diff --git a/tutorindigo/components/IndigoFooter.jsx b/tutorindigo/components/IndigoFooter.jsx deleted file mode 100644 index e27b2a067..000000000 --- a/tutorindigo/components/IndigoFooter.jsx +++ /dev/null @@ -1,80 +0,0 @@ - -const IndigoFooter = () => { - const intl = useIntl(); - const config = getConfig(); - - const indigoFooterNavLinks = config.INDIGO_FOOTER_NAV_LINKS || []; - - const messages = { - "footer.poweredby.text": { - id: "footer.poweredby.text", - defaultMessage: "Powered by", - description: "text for the footer", - }, - "footer.tutorlogo.altText": { - id: "footer.tutorlogo.altText", - defaultMessage: "Runs on Tutor", - description: "alt text for the footer tutor logo", - }, - "footer.logo.altText": { - id: "footer.logo.altText", - defaultMessage: "Powered by Open edX", - description: "alt text for the footer logo.", - }, - "footer.copyright.text": { - id: "footer.copyright.text", - defaultMessage: `Copyrights ©${new Date().getFullYear()}. All Rights Reserved.`, - description: "copyright text for the footer", - }, - }; - - return ( -
- -
- ); -}; diff --git a/tutorindigo/patches/mfe-env-config-runtime-definitions b/tutorindigo/patches/mfe-env-config-runtime-definitions index 63c625660..a110c6215 100644 --- a/tutorindigo/patches/mfe-env-config-runtime-definitions +++ b/tutorindigo/patches/mfe-env-config-runtime-definitions @@ -1,4 +1,3 @@ -{{- patch("IndigoFooter.jsx") }} {{- patch("MobileViewHeader.jsx") }} {{- patch("ThemedLogo.jsx") }} {{- patch("ToggleThemeButton.jsx") }} diff --git a/tutorindigo/plugin.py b/tutorindigo/plugin.py index d8eca71ee..83c8ecace 100644 --- a/tutorindigo/plugin.py +++ b/tutorindigo/plugin.py @@ -24,7 +24,7 @@ "defaults": { "VERSION": __version__, "WELCOME_MESSAGE": "The place for all your online learning", - "PRIMARY_COLOR": "#15376D", # Indigo + "PRIMARY_COLOR": "#003366", # Indigo "ENABLE_DARK_TOGGLE": True, # Footer links are dictionaries with a "title" and "url" # To remove all links, run: @@ -164,6 +164,11 @@ def _override_openedx_docker_image( MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }} MFE_CONFIG['INDIGO_FOOTER_NAV_LINKS'] = {{ INDIGO_FOOTER_NAV_LINKS }} + +# Ensure Mako templates from the theme are found by the comprehensive theming system. +# The env var COMPREHENSIVE_THEME_DIRS=/openedx/themes is set in the Dockerfile but +# may not be picked up by the dev settings chain; set it explicitly here. +COMPREHENSIVE_THEME_DIRS = ['/openedx/themes'] """, ), ( @@ -171,6 +176,8 @@ def _override_openedx_docker_image( """ MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }} MFE_CONFIG['INDIGO_FOOTER_NAV_LINKS'] = {{ INDIGO_FOOTER_NAV_LINKS }} + +COMPREHENSIVE_THEME_DIRS = ['/openedx/themes'] """, ), ] @@ -194,19 +201,6 @@ def _override_openedx_docker_image( mfe, "org.openedx.frontend.layout.footer.v1", """ - { - op: PLUGIN_OPERATIONS.Hide, - widgetId: 'default_contents', - }, - { - op: PLUGIN_OPERATIONS.Insert, - widget: { - id: 'indigo_footer', - type: DIRECT_PLUGIN, - priority: 1, - RenderWidget: IndigoFooter, - }, - }, { op: PLUGIN_OPERATIONS.Insert, widget: { @@ -300,14 +294,14 @@ def _override_openedx_docker_image( "variants": { "light": { "urls": { - "default": "https://raw.githubusercontent.com/edly-io/brand-openedx/refs/heads/ulmo/indigo/dist/light.min.css", - "brandOverride": "https://raw.githubusercontent.com/edly-io/brand-openedx/refs/heads/ulmo/indigo/dist/light.min.css", + "default": "https://{{ LMS_HOST }}/static/indigo/css/light.min.css", + "brandOverride": "https://{{ LMS_HOST }}/static/indigo/css/light.min.css", }, }, "dark": { "urls": { - "default": "https://raw.githubusercontent.com/edly-io/brand-openedx/refs/heads/ulmo/indigo/dist/dark.min.css", - "brandOverride": "https://raw.githubusercontent.com/edly-io/brand-openedx/refs/heads/ulmo/indigo/dist/dark.min.css", + "default": "https://{{ LMS_HOST }}/static/indigo/css/dark.min.css", + "brandOverride": "https://{{ LMS_HOST }}/static/indigo/css/dark.min.css", } }, } diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Bold.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Bold.otf new file mode 100644 index 000000000..c2cb631ac Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Bold.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-BoldItalic.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-BoldItalic.otf new file mode 100644 index 000000000..95e53dd16 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-BoldItalic.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Extrabold.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Extrabold.otf new file mode 100644 index 000000000..7515ff802 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Extrabold.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-ExtraboldItalic.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-ExtraboldItalic.otf new file mode 100644 index 000000000..0e39b51e3 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-ExtraboldItalic.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Extralight.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Extralight.otf new file mode 100644 index 000000000..c1ca88272 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Extralight.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-ExtralightItalic.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-ExtralightItalic.otf new file mode 100644 index 000000000..a835f8755 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-ExtralightItalic.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Heavy.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Heavy.otf new file mode 100644 index 000000000..02edb6dd0 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Heavy.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-HeavyItalic.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-HeavyItalic.otf new file mode 100644 index 000000000..c0a51228a Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-HeavyItalic.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Light.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Light.otf new file mode 100644 index 000000000..f8c61fd96 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Light.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-LightItalic.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-LightItalic.otf new file mode 100644 index 000000000..3ef14209e Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-LightItalic.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Medium.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Medium.otf new file mode 100644 index 000000000..e7155847f Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Medium.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-MediumItalic.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-MediumItalic.otf new file mode 100644 index 000000000..f31559a64 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-MediumItalic.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Regular.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Regular.otf new file mode 100644 index 000000000..ebf1e5ce7 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-Regular.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-RegularItalic.otf b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-RegularItalic.otf new file mode 100644 index 000000000..d86d453f7 Binary files /dev/null and b/tutorindigo/templates/indigo/cms/static/fonts/RockfordSans-RegularItalic.otf differ diff --git a/tutorindigo/templates/indigo/cms/static/images/favicon.ico b/tutorindigo/templates/indigo/cms/static/images/favicon.ico index 5bc7c23de..4269e7253 100644 Binary files a/tutorindigo/templates/indigo/cms/static/images/favicon.ico and b/tutorindigo/templates/indigo/cms/static/images/favicon.ico differ diff --git a/tutorindigo/templates/indigo/cms/static/images/studio-logo.png b/tutorindigo/templates/indigo/cms/static/images/studio-logo.png index a222e4c74..040519f41 100644 Binary files a/tutorindigo/templates/indigo/cms/static/images/studio-logo.png and b/tutorindigo/templates/indigo/cms/static/images/studio-logo.png differ diff --git a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_fonts.scss b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_fonts.scss index b7005296e..c7a923dcb 100644 --- a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_fonts.scss +++ b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_fonts.scss @@ -1 +1,130 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); +///////// Sans (Rockford Sans) +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Extralight.otf') format('opentype'); + font-weight: 200; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-ExtralightItalic.otf') format('opentype'); + font-weight: 200; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Light.otf') format('opentype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-LightItalic.otf') format('opentype'); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Regular.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-RegularItalic.otf') format('opentype'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Medium.otf') format('opentype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-MediumItalic.otf') format('opentype'); + font-weight: 500; + font-style: italic; +} + +// Alias 600 to Medium (no dedicated SemiBold cut) so `font-weight: 600;` +// rules get an exact match instead of rounding up to Bold. +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Medium.otf') format('opentype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-MediumItalic.otf') format('opentype'); + font-weight: 600; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Bold.otf') format('opentype'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-BoldItalic.otf') format('opentype'); + font-weight: 700; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Extrabold.otf') format('opentype'); + font-weight: 800; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-ExtraboldItalic.otf') format('opentype'); + font-weight: 800; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Heavy.otf') format('opentype'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-HeavyItalic.otf') format('opentype'); + font-weight: 900; + font-style: italic; +} diff --git a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables-v1.scss b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables-v1.scss index 56674980d..2e38949f0 100644 --- a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables-v1.scss +++ b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables-v1.scss @@ -13,7 +13,7 @@ $fg-min-width: 900px; // +Fonts // ==================== -$f-sans-serif: 'Inter', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; +$f-sans-serif: 'Rockford Sans', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; // +Colors - Utility diff --git a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables.scss b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables.scss index 888b6611a..1bdd58321 100644 --- a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables.scss +++ b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables.scss @@ -11,10 +11,12 @@ $m-blue-d6: mix(rgb(42, 134, 226), $primary, 40%) !default; $uxpl-blue-hover-active: lighten($primary, 7%) !default; -$serif: 'Inter'; -$f-sans-serif: 'Inter', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; -$font-family-title: 'Inter'; -$font-family-sans-serif: 'Inter', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; +$serif: 'Rockford Sans'; +$f-sans-serif: 'Rockford Sans', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; +$font-family-title: 'Rockford Sans'; +$font-family-sans-serif: 'Rockford Sans', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; +$font-weight-base: 200; +$headings-font-weight: 400; // Initialize the Open edX Bootstrap theme @import 'edx-bootstrap/sass/open-edx/theme'; diff --git a/tutorindigo/templates/indigo/lms/static/css/dark.min.css b/tutorindigo/templates/indigo/lms/static/css/dark.min.css new file mode 100644 index 000000000..75a037d65 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/css/dark.min.css @@ -0,0 +1,1169 @@ +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Extralight.otf") format("opentype"); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-ExtralightItalic.otf") format("opentype"); + font-weight: 200; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Light.otf") format("opentype"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-LightItalic.otf") format("opentype"); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Regular.otf") format("opentype"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-RegularItalic.otf") format("opentype"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Medium.otf") format("opentype"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-MediumItalic.otf") format("opentype"); + font-weight: 500; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Medium.otf") format("opentype"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-MediumItalic.otf") format("opentype"); + font-weight: 600; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Bold.otf") format("opentype"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-BoldItalic.otf") format("opentype"); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Extrabold.otf") format("opentype"); + font-weight: 800; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-ExtraboldItalic.otf") format("opentype"); + font-weight: 800; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Heavy.otf") format("opentype"); + font-weight: 900; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-HeavyItalic.otf") format("opentype"); + font-weight: 900; + font-style: italic; +} +:root { + + /* ================================================================ + COLOR SCALE + ================================================================ */ + + /* ---- Gray scale ---- */ + --pgn-color-gray-100: #ebebeb; + --pgn-color-gray-200: #cccccc; + --pgn-color-gray-300: #adadad; + --pgn-color-gray-400: #8f8f8f; + --pgn-color-gray-500: #707070; + --pgn-color-gray-600: #5c5c5c; + --pgn-color-gray-700: #454545; + --pgn-color-gray-800: #333333; + --pgn-color-gray-900: #212529; + + /* ---- Primary ($primary: #0A3055) ---- */ + --pgn-color-primary-50: #E6F2FF; + --pgn-color-primary-100:#99CCFF; + --pgn-color-primary-200:#4DA3FF; + --pgn-color-primary-300:#1A75D1; + --pgn-color-primary-400:#0059B3; + --pgn-color-primary-500:#004080; + --pgn-color-primary-600:#003366; + --pgn-color-primary-700:#00264D; + --pgn-color-primary-800:#001A33; + --pgn-color-primary-900:#000D1A; + + /* ---- Brand ($brand: #9D0054) ---- */ + --pgn-color-brand-50: #FCF7FA; + --pgn-color-brand-100: #F9F0F5; + --pgn-color-brand-200: #E7BFD4; + --pgn-color-brand-300: #CE80AA; + --pgn-color-brand-400: #B6407F; + --pgn-color-brand-500: #9D0054; + --pgn-color-brand-600: #8D004C; + --pgn-color-brand-700: #7E0043; + --pgn-color-brand-800: #76003F; + --pgn-color-brand-900: #6E003B; + +/* ---- Success (Green) ---- */ + --pgn-color-success-50: #ECFDF5; + --pgn-color-success-100: #D1FAE5; + --pgn-color-success-200: #A7F3D0; + --pgn-color-success-300: #6EE7B7; + --pgn-color-success-400: #34D399; + --pgn-color-success-500: #10B981; + --pgn-color-success-600: #059669; + --pgn-color-success-700: #047857; + --pgn-color-success-800: #065F46; + --pgn-color-success-900: #064E3B; + + /* ---- Info ($info: #006DAA) ---- */ + --pgn-color-info-100: #e6f2f9; + --pgn-color-info-200: #b3d3e8; + --pgn-color-info-300: #80b5d5; + --pgn-color-info-400: #4096c2; + --pgn-color-info-500: #006daa; + --pgn-color-info-600: #006299; + --pgn-color-info-700: #005788; + --pgn-color-info-800: #005280; + --pgn-color-info-900: #004c77; + + /* ---- Warning (Amber) ---- */ + --pgn-color-warning-50: #FFFBEB; + --pgn-color-warning-100: #FEF3C7; + --pgn-color-warning-200: #FDE68A; + --pgn-color-warning-300: #FCD34D; + --pgn-color-warning-400: #FBBF24; + --pgn-color-warning-500: #F59E0B; + --pgn-color-warning-600: #D97706; + --pgn-color-warning-700: #B45309; + --pgn-color-warning-800: #92400E; + --pgn-color-warning-900: #78350F; + + /* ---- Danger (Red) ---- */ + --pgn-color-danger-50: #FFF7ED; + --pgn-color-danger-100: #FFEDD5; + --pgn-color-danger-200: #FED7AA; + --pgn-color-danger-300: #FDBA74; + --pgn-color-danger-400: #FB923C; + --pgn-color-danger-500: #F97316; + --pgn-color-danger-600: #EA580C; + --pgn-color-danger-700: #C2410C; + --pgn-color-danger-800: #9A3412; + --pgn-color-danger-900: #7C2D12; + + /* ---- Light (Slate) ---- */ + --pgn-color-light-50: #F8FAFC; + --pgn-color-light-100: #F1F5F9; + --pgn-color-light-200: #E2E8F0; + --pgn-color-light-300: #CBD5E1; + --pgn-color-light-400: #94A3B8; + --pgn-color-light-500: #64748B; + --pgn-color-light-600: #475569; + --pgn-color-light-700: #334155; + --pgn-color-light-800: #1E293B; + --pgn-color-light-900: #0F172A; + + /* ---- Dark (Slate) ---- */ + --pgn-color-dark-50: #F8FAFC; + --pgn-color-dark-100: #F1F5F9; + --pgn-color-dark-200: #E2E8F0; + --pgn-color-dark-300: #CBD5E1; + --pgn-color-dark-400: #94A3B8; + --pgn-color-dark-500: #64748B; + --pgn-color-dark-600: #475569; + --pgn-color-dark-700: #334155; + --pgn-color-dark-800: #1E293B; + --pgn-color-dark-900: #0F172A; + + /* ---- Accent ---- */ + --pgn-color-accent-a: #00bbf9; + --pgn-color-accent-b: #ffee88; + + /* ---- Error (Red) ---- */ + --pgn-color-error-50: #FEF2F2; + --pgn-color-error-100: #FEE2E2; + --pgn-color-error-200: #FECACA; + --pgn-color-error-300: #FCA5A5; + --pgn-color-error-400: #F87171; + --pgn-color-error-500: #EF4444; + --pgn-color-error-600: #DC2626; + --pgn-color-error-700: #B91C1C; + --pgn-color-error-800: #991B1B; + --pgn-color-error-900: #7F1D1D; + + /* ================================================================ + COMPONENT-LEVEL COLOR TOKENS + ================================================================ */ + + /* ---- Body / Global ---- */ + --pgn-color-body-bg: #ffffff; + --pgn-color-body-color: var(--pgn-color-gray-700); + --pgn-color-border: var(--pgn-color-gray-200); + --pgn-color-link: var(--pgn-color-info-500); + --pgn-color-link-hover: var(--pgn-color-info-700); + --pgn-color-muted: var(--pgn-color-gray-500); + --pgn-color-heading: #000000; + --pgn-color-mark-bg: #fff243; + --pgn-color-code-bg: var(--pgn-color-gray-100); + --pgn-color-code-color: var(--pgn-color-danger-700); + --pgn-color-hr: var(--pgn-color-gray-200); + + /* ---- Button ---- */ + --pgn-color-btn-disabled-bg: var(--pgn-color-gray-200); + --pgn-color-btn-disabled-color: var(--pgn-color-gray-400); + --pgn-color-btn-disabled-border: var(--pgn-color-gray-200); + + /* ---- Card ---- */ + --pgn-color-card-bg: #ffffff; + --pgn-color-card-border: rgba(0, 0, 0, 0.125); + --pgn-color-card-cap-bg: rgba(0, 0, 0, 0.03); + --pgn-color-card-bg-dark: var(--pgn-color-primary-500); + --pgn-color-card-bg-muted: var(--pgn-color-light-200); + --pgn-color-card-divider: var(--pgn-color-light-400); + --pgn-color-card-focus-border: var(--pgn-color-primary-500); + + /* ---- Dropdown ---- */ + --pgn-color-dropdown-bg: #ffffff; + --pgn-color-dropdown-border: rgba(0, 0, 0, 0.15); + --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100); + --pgn-color-dropdown-link-color: var(--pgn-color-gray-900); + --pgn-color-dropdown-link-hover-color: var(--pgn-color-gray-900); + --pgn-color-dropdown-link-hover-bg: var(--pgn-color-light-300); + --pgn-color-dropdown-link-active-color: #ffffff; + --pgn-color-dropdown-link-active-bg: var(--pgn-color-primary-500); + --pgn-color-dropdown-link-disabled-color: var(--pgn-color-gray-500); + --pgn-color-dropdown-header-color: var(--pgn-color-gray-500); + + /* ---- Alert ---- */ + --pgn-color-alert-title-color: #000000; + --pgn-color-alert-content-color: var(--pgn-color-gray-700); + + /* ---- Badge ---- */ + --pgn-color-badge-color: #ffffff; + + /* ---- Form / Input ---- */ + --pgn-color-input-bg: #ffffff; + --pgn-color-input-disabled-bg: var(--pgn-color-gray-100); + --pgn-color-input-color: var(--pgn-color-gray-800); + --pgn-color-input-border: var(--pgn-color-gray-300); + --pgn-color-input-focus-border: var(--pgn-color-primary-500); + --pgn-color-input-focus-shadow: var(--pgn-color-primary-200); + --pgn-color-input-placeholder-color: var(--pgn-color-gray-400); + --pgn-color-input-error-border: var(--pgn-color-danger-500); + --pgn-color-input-error-color: var(--pgn-color-danger-700); + --pgn-color-form-label-color: var(--pgn-color-gray-800); + --pgn-color-form-help-color: var(--pgn-color-gray-500); + --pgn-color-form-check-bg: #ffffff; + --pgn-color-form-check-border: var(--pgn-color-gray-400); + --pgn-color-form-check-checked-bg: var(--pgn-color-primary-500); + --pgn-color-form-switch-bg: var(--pgn-color-gray-300); + --pgn-color-form-switch-checked-bg: var(--pgn-color-primary-500); + --pgn-color-form-switch-knob: #ffffff; + + /* ---- Navbar ---- */ + --pgn-color-navbar-bg: var(--pgn-color-primary-500); + --pgn-color-navbar-color: #ffffff; + --pgn-color-navbar-brand-color: #ffffff; + --pgn-color-navbar-link-color: rgba(255, 255, 255, 0.85); + --pgn-color-navbar-link-hover-color: #ffffff; + --pgn-color-navbar-link-active-color: #ffffff; + --pgn-color-navbar-link-disabled-color: rgba(255, 255, 255, 0.25); + --pgn-color-navbar-toggler-border: rgba(255, 255, 255, 0.1); + + /* ---- Modal ---- */ + --pgn-color-modal-bg: #ffffff; + --pgn-color-modal-border: rgba(0, 0, 0, 0.2); + --pgn-color-modal-header-border: var(--pgn-color-gray-200); + --pgn-color-modal-footer-border: var(--pgn-color-gray-200); + --pgn-color-modal-backdrop-bg: #000000; + --pgn-color-modal-title-color: #000000; + + /* ---- Tooltip ---- */ + --pgn-color-tooltip-bg: var(--pgn-color-gray-900); + --pgn-color-tooltip-color: #ffffff; + + /* ---- Popover ---- */ + --pgn-color-popover-bg: #ffffff; + --pgn-color-popover-border: rgba(0, 0, 0, 0.2); + --pgn-color-popover-header-bg: var(--pgn-color-gray-100); + --pgn-color-popover-header-color: #000000; + --pgn-color-popover-body-color: var(--pgn-color-gray-700); + --pgn-color-popover-arrow-color: #ffffff; + --pgn-color-popover-arrow-outer-color: rgba(0, 0, 0, 0.25); + + /* ---- Toast ---- */ + --pgn-color-toast-bg: #ffffff; + --pgn-color-toast-border: rgba(0, 0, 0, 0.1); + --pgn-color-toast-header-bg: rgba(255, 255, 255, 0.85); + --pgn-color-toast-header-color: var(--pgn-color-gray-600); + --pgn-color-toast-header-border: rgba(0, 0, 0, 0.05); + + /* ---- Pagination ---- */ + --pgn-color-pagination-bg: #ffffff; + --pgn-color-pagination-border: var(--pgn-color-gray-200); + --pgn-color-pagination-color: var(--pgn-color-gray-700); + --pgn-color-pagination-hover-bg: var(--pgn-color-gray-100); + --pgn-color-pagination-hover-border: var(--pgn-color-gray-300); + --pgn-color-pagination-hover-color: var(--pgn-color-gray-700); + --pgn-color-pagination-active-bg: var(--pgn-color-primary-500); + --pgn-color-pagination-active-border: var(--pgn-color-primary-500); + --pgn-color-pagination-active-color: #ffffff; + --pgn-color-pagination-disabled-bg: #ffffff; + --pgn-color-pagination-disabled-border: var(--pgn-color-gray-200); + --pgn-color-pagination-disabled-color: var(--pgn-color-gray-400); + + /* ---- Nav / Tabs ---- */ + --pgn-color-nav-tabs-border: var(--pgn-color-gray-200); + --pgn-color-nav-tabs-link-color: var(--pgn-color-gray-600); + --pgn-color-nav-tabs-link-hover-color: var(--pgn-color-gray-700); + --pgn-color-nav-tabs-link-active-color: var(--pgn-color-primary-500); + --pgn-color-nav-tabs-link-active-border: var(--pgn-color-primary-500); + --pgn-color-nav-tabs-link-active-bg: transparent; + --pgn-color-nav-link-disabled-color: var(--pgn-color-gray-400); + + /* ---- Breadcrumb ---- */ + --pgn-color-breadcrumb-bg: transparent; + --pgn-color-breadcrumb-color: var(--pgn-color-info-500); + --pgn-color-breadcrumb-active-color: var(--pgn-color-gray-600); + --pgn-color-breadcrumb-divider-color: var(--pgn-color-gray-400); + + /* ---- Progress Bar ---- */ + --pgn-color-progress-bg: var(--pgn-color-gray-100); + --pgn-color-progress-bar-bg: var(--pgn-color-primary-500); + --pgn-color-progress-bar-color: #ffffff; + + /* ---- Skeleton ---- */ + --pgn-color-skeleton-base: var(--pgn-color-gray-100); + --pgn-color-skeleton-highlight: var(--pgn-color-gray-200); + + /* ---- Collapsible ---- */ + --pgn-color-collapsible-bg: #ffffff; + --pgn-color-collapsible-border: var(--pgn-color-gray-200); + --pgn-color-collapsible-active-bg: var(--pgn-color-primary-100); + --pgn-color-collapsible-header-color: var(--pgn-color-gray-800); + + /* ---- Avatar ---- */ + --pgn-color-avatar-bg: var(--pgn-color-primary-500); + --pgn-color-avatar-color: #ffffff; + --pgn-color-avatar-border: var(--pgn-color-primary-200); + --pgn-color-avatar-status-online: var(--pgn-color-success-500); + --pgn-color-avatar-status-away: var(--pgn-color-warning-500); + --pgn-color-avatar-status-offline: var(--pgn-color-gray-400); + + /* ---- Chip ---- */ + --pgn-color-chip-bg: var(--pgn-color-primary-100); + --pgn-color-chip-color: var(--pgn-color-primary-700); + --pgn-color-chip-border: var(--pgn-color-primary-300); + + /* ---- Table ---- */ + --pgn-color-table-bg: transparent; + --pgn-color-table-border: var(--pgn-color-gray-200); + --pgn-color-table-head-bg: var(--pgn-color-gray-100); + --pgn-color-table-head-color: var(--pgn-color-gray-700); + --pgn-color-table-striped-bg: rgba(0, 0, 0, 0.05); + --pgn-color-table-hover-bg: var(--pgn-color-gray-100); + --pgn-color-table-caption-color: var(--pgn-color-gray-500); + + /* ---- Page Banner ---- */ + --pgn-color-page-banner-bg: var(--pgn-color-warning-100); + --pgn-color-page-banner-color: var(--pgn-color-warning-900); + --pgn-color-page-banner-border: var(--pgn-color-warning-300); + + /* ---- Spinner ---- */ + --pgn-color-spinner-track: var(--pgn-color-primary-200); + --pgn-color-spinner-fill: var(--pgn-color-primary-500); + + /* ---- List Group ---- */ + --pgn-color-list-group-bg: #ffffff; + --pgn-color-list-group-border: rgba(0, 0, 0, 0.125); + --pgn-color-list-group-hover-bg: var(--pgn-color-gray-100); + --pgn-color-list-group-active-bg: var(--pgn-color-primary-500); + --pgn-color-list-group-active-color: #ffffff; + --pgn-color-list-group-disabled-color: var(--pgn-color-gray-600); + + /* ================================================================ + TYPOGRAPHY TOKENS ($font-*, $headings-*, $display-*) + ================================================================ */ + + /* Font families */ + --pgn-font-family-base: "Rockford Sans", "Segoe UI", Roboto, "Open Sans", -apple-system, sans-serif; + --pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --pgn-font-family-heading: var(--pgn-font-family-base); + + /* Base font sizes ($font-size-base: 1.125rem) */ + --pgn-font-size-base: 0.875rem; + --pgn-font-size-xs: 0.75rem; + --pgn-font-size-sm: 0.75rem; + --pgn-font-size-lg: 1.375rem; + --pgn-font-size-xl: 1.75rem; + + /* Heading font sizes ($h1-font-size … $h6-font-size) */ + --pgn-h1-font-size: 3rem; + --pgn-h2-font-size: 1.875rem; + --pgn-h3-font-size: 1.125rem; + --pgn-h4-font-size: 1.125rem; + --pgn-h5-font-size: 0.875rem; + --pgn-h6-font-size: 0.75rem; + + /* Display sizes ($display1-size … $display4-size) */ + --pgn-display1-font-size: 6rem; + --pgn-display2-font-size: 5rem; + --pgn-display3-font-size: 4rem; + --pgn-display4-font-size: 3rem; + + /* Font weights ($font-weight-*) */ + --pgn-font-weight-light: 300; + --pgn-font-weight-normal: 400; + --pgn-font-weight-medium: 500; + --pgn-font-weight-semibold: 600; + --pgn-font-weight-bold: 700; + + /* Heading weights ($headings-font-weight) */ + --pgn-headings-font-weight: 400; + --pgn-headings-line-height: 1.25; + --pgn-headings-margin-bottom: 0.5rem; + + /* Line heights ($line-height-*) */ + --pgn-line-height-base: 1.5556; + --pgn-line-height-sm: 1.25; + --pgn-line-height-lg: 2; + + /* Lead paragraph ($lead-font-size, $lead-font-weight) */ + --pgn-lead-font-size: 1.375rem; + --pgn-lead-font-weight: 400; + + /* Small text ($small-font-size) */ + --pgn-small-font-size: 80%; + + /* Paragraph ($paragraph-margin-bottom) */ + --pgn-paragraph-margin-bottom: 1rem; + + /* Code ($code-font-size, $code-padding-y, $code-padding-x) */ + --pgn-code-font-size: 87.5%; + --pgn-code-padding-y: 0.1em; + --pgn-code-padding-x: 0.4em; + --pgn-code-border-radius: 0.25rem; + + /* ================================================================ + GLOBAL SPACING / GRID ($spacer: 1rem) + ================================================================ */ + + --pgn-spacer: 1rem; + --pgn-spacer-1: 0.25rem; /* $spacer * .25 */ + --pgn-spacer-2: 0.5rem; /* $spacer * .5 */ + --pgn-spacer-3: 1rem; /* $spacer */ + --pgn-spacer-4: 1.5rem; /* $spacer * 1.5 */ + --pgn-spacer-5: 3rem; /* $spacer * 3 */ + + /* Legacy aliases */ + --pgn-spacing-1: var(--pgn-spacer-1); + --pgn-spacing-2: var(--pgn-spacer-2); + --pgn-spacing-3: var(--pgn-spacer-3); + --pgn-spacing-4: var(--pgn-spacer-4); + --pgn-spacing-5: var(--pgn-spacer-5); + + /* Container gutter */ + --pgn-grid-gutter-width: 1.5rem; + + /* ================================================================ + BORDERS & RADII ($border-radius, $border-width) + ================================================================ */ + + --pgn-border-width: 1px; + --pgn-border-radius-sm: 0.375rem; + --pgn-border-radius: 0.5rem; + --pgn-border-radius-lg: 0.75rem; + --pgn-border-radius-xl: 1rem; + --pgn-border-radius-pill: 50rem; + + /* ================================================================ + SHADOWS ($box-shadow-*) + ================================================================ */ + --pgn-shadow-1: 0 0.0625rem 0.125rem rgba(0,0,0,.15), 0 0.0625rem 0.25rem rgba(0,0,0,.15); + --pgn-shadow-2: 0 0.125rem 0.25rem rgba(0,0,0,.15), 0 0.125rem 0.5rem rgba(0,0,0,.15); + --pgn-shadow-3: 0 0.5rem 1rem rgba(0,0,0,.15), 0 0.25rem 0.625rem rgba(0,0,0,.15); + --pgn-shadow-4: 0 0.625rem 1.25rem rgba(0,0,0,.15), 0 0.5rem 1.25rem rgba(0,0,0,.15); + --pgn-shadow-5: 0 1.25rem 2.5rem rgba(0,0,0,.15), 0 0.5rem 2.5rem rgba(0,0,0,.15); + --pgn-shadow-inset: inset 0 1px 2px rgba(0,0,0,.075); + + /* ================================================================ + Z-INDEX SCALE ($zindex-*) + ================================================================ */ + + --pgn-zindex-dropdown: 200; + --pgn-zindex-sticky: 100; + --pgn-zindex-fixed: 120; + --pgn-zindex-overlay: 300; + --pgn-zindex-modal: 1040; + --pgn-zindex-modal-dialog: 1050; + --pgn-zindex-popover: 300; + --pgn-zindex-tooltip: 400; + --pgn-zindex-toast: 999; + + /* ================================================================ + TRANSITIONS ($transition-base, $transition-fade) + ================================================================ */ + + --pgn-transition-base: all 0.2s ease-in-out; + --pgn-transition-fade: opacity 0.15s linear; + --pgn-transition-collapse: height 0.35s ease; + --pgn-transition-duration: 0.2s; + --pgn-transition-easing: ease-in-out; + + /* ================================================================ + COMPONENT STRUCTURAL TOKENS + ================================================================ */ + + /* ---- Button ($btn-*) ---- */ + --pgn-btn-padding-y: 0.5rem; + --pgn-btn-padding-x: 1rem; + --pgn-btn-font-size: 0.875rem; + --pgn-btn-font-weight: 500; + --pgn-btn-line-height: 1.5; + --pgn-btn-border-width: 1px; + --pgn-btn-border-radius: var(--pgn-border-radius); + --pgn-btn-transition: var(--pgn-transition-base); + --pgn-btn-focus-width: 3px; + --pgn-btn-focus-offset: 2px; + /* Small */ + --pgn-btn-sm-padding-y: 0.25rem; + --pgn-btn-sm-padding-x: 0.5rem; + --pgn-btn-sm-font-size: 0.875rem; + --pgn-btn-sm-border-radius: var(--pgn-border-radius-sm); + /* Large */ + --pgn-btn-lg-padding-y: 0.75rem; + --pgn-btn-lg-padding-x: 1.25rem; + --pgn-btn-lg-font-size: 1.325rem; + --pgn-btn-lg-border-radius: var(--pgn-border-radius-lg); + + /* ---- Badge ($badge-*) ---- */ + --pgn-badge-padding-y: 0.25em; + --pgn-badge-padding-x: 0.6em; + --pgn-badge-font-size: 0.75rem; + --pgn-badge-font-weight: 700; + --pgn-badge-border-radius: var(--pgn-border-radius-sm); + --pgn-badge-pill-radius: var(--pgn-border-radius-pill); + + /* ---- Card ($card-*) ---- */ + --pgn-card-spacer-y: 1.25rem; + --pgn-card-spacer-x: 1.25rem; + --pgn-card-border-width: 1px; + --pgn-card-border-radius: var(--pgn-border-radius-lg); + --pgn-card-box-shadow: var(--pgn-shadow-1); + --pgn-card-footer-padding: 0.75rem 1.25rem; + --pgn-card-img-overlay-padding: 1.25rem; + + /* ---- Alert ($alert-*) ---- */ + --pgn-alert-padding-y: 1rem; + --pgn-alert-padding-x: 1.25rem; + --pgn-alert-margin-bottom: 1rem; + --pgn-alert-border-radius: var(--pgn-border-radius); + --pgn-alert-border-width: 1px; + --pgn-alert-left-border-width: 4px; + --pgn-alert-gap: 0.75rem; + + /* ---- Chip ---- */ + --pgn-chip-padding-y: 0.25rem; + --pgn-chip-padding-x: 0.75rem; + --pgn-chip-font-size: 0.875rem; + --pgn-chip-font-weight: 500; + --pgn-chip-border-radius: var(--pgn-border-radius-pill); + --pgn-chip-border-width: 1px; + --pgn-chip-gap: 0.375rem; + + /* ---- Dropdown ($dropdown-*) ---- */ + --pgn-dropdown-padding-y: 0.25rem; + --pgn-dropdown-item-padding-y: 0.625rem; + --pgn-dropdown-item-padding-x: 1rem; + --pgn-dropdown-font-size: 0.9375rem; + --pgn-dropdown-border-width: 1px; + --pgn-dropdown-border-radius: var(--pgn-border-radius); + --pgn-dropdown-min-width: 11.25rem; + --pgn-dropdown-spacer: 0.25rem; + --pgn-dropdown-box-shadow: var(--pgn-shadow-2); + --pgn-dropdown-header-padding: 0.5rem 1rem; + --pgn-dropdown-header-font-size: var(--pgn-font-size-sm); + + /* ---- Form / Input ($input-*, $label-*, $form-*) ---- */ + --pgn-input-padding-y: 0.5625rem; + --pgn-input-padding-x: 1rem; + --pgn-input-font-size: 1rem; + --pgn-input-font-weight: var(--pgn-font-weight-normal); + --pgn-input-line-height: 1.3333; + --pgn-input-border-width: 1px; + --pgn-input-border-radius: var(--pgn-border-radius); + --pgn-input-height: 2.5rem; + --pgn-input-focus-width: 3px; + --pgn-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + --pgn-label-margin-bottom: 0.25rem; + --pgn-label-font-size: 0.875rem; + --pgn-label-font-weight: 500; + --pgn-form-help-font-size: 0.8125rem; + --pgn-form-group-margin-bottom: 1rem; + --pgn-form-check-size: 1.125rem; + --pgn-form-check-border-width: 2px; + --pgn-form-switch-width: 2.5rem; + --pgn-form-switch-height: 1.375rem; + --pgn-form-switch-border-radius: var(--pgn-border-radius-pill); + --pgn-form-check-gap: 0.625rem; + + /* ---- Select ---- */ + --pgn-select-padding-x-right: 2.5rem; + + /* ---- Navbar ($navbar-*) ---- */ + --pgn-navbar-height: 3.5rem; + --pgn-navbar-padding-y: 0; + --pgn-navbar-padding-x: 1.5rem; + --pgn-navbar-brand-font-size: 1.125rem; + --pgn-navbar-brand-font-weight: 700; + --pgn-navbar-brand-letter-spacing: -0.01em; + --pgn-navbar-nav-link-padding-x: 1rem; + --pgn-navbar-nav-link-font-size: 0.875rem; + --pgn-navbar-toggler-padding-y: 0.25rem; + --pgn-navbar-toggler-padding-x: 0.6rem; + --pgn-navbar-toggler-font-size: 0.875rem; + --pgn-navbar-toggler-border-radius: var(--pgn-border-radius); + --pgn-navbar-box-shadow: var(--pgn-shadow-2); + + /* ---- Modal ($modal-*) ---- */ + --pgn-modal-padding: 1.25rem; + --pgn-modal-border-width: 1px; + --pgn-modal-border-radius: var(--pgn-border-radius-lg); + --pgn-modal-box-shadow: var(--pgn-shadow-4); + --pgn-modal-header-padding: 1rem 1.25rem; + --pgn-modal-footer-padding: 0.75rem 1.25rem; + --pgn-modal-title-font-size: 1.125rem; + --pgn-modal-title-font-weight: 700; + --pgn-modal-sm-max-width: 18.75rem; + --pgn-modal-md-max-width: 35rem; + --pgn-modal-lg-max-width: 50rem; + --pgn-modal-xl-max-width: 71.25rem; + --pgn-modal-backdrop-opacity: 0.5; + --pgn-modal-transition: transform 0.3s ease-out; + + /* ---- Tooltip ($tooltip-*) ---- */ + --pgn-tooltip-padding-y: 0.3rem; + --pgn-tooltip-padding-x: 0.625rem; + --pgn-tooltip-font-size: 0.8125rem; + --pgn-tooltip-border-radius: var(--pgn-border-radius-sm); + --pgn-tooltip-arrow-size: 5px; + --pgn-tooltip-max-width: 12.5rem; + + /* ---- Popover ($popover-*) ---- */ + --pgn-popover-border-width: 1px; + --pgn-popover-border-radius: var(--pgn-border-radius-lg); + --pgn-popover-box-shadow: var(--pgn-shadow-3); + --pgn-popover-max-width: 17.25rem; + --pgn-popover-header-padding-y: 0.5rem; + --pgn-popover-header-padding-x: 0.875rem; + --pgn-popover-header-font-size: 0.9375rem; + --pgn-popover-header-font-weight: 700; + --pgn-popover-body-padding-y: 0.75rem; + --pgn-popover-body-padding-x: 0.875rem; + --pgn-popover-body-font-size: 0.875rem; + + /* ---- Toast ($toast-*) ---- */ + --pgn-toast-padding-y: 0.875rem; + --pgn-toast-padding-x: 1.25rem; + --pgn-toast-gap: 0.75rem; + --pgn-toast-border-width: 1px; + --pgn-toast-left-border-width: 4px; + --pgn-toast-border-radius: var(--pgn-border-radius); + --pgn-toast-box-shadow: var(--pgn-shadow-3); + --pgn-toast-font-size: 0.9375rem; + --pgn-toast-min-width: 17.5rem; + --pgn-toast-icon-size: 1.5rem; + + /* ---- Pagination ($pagination-*) ---- */ + --pgn-pagination-item-size: 2.25rem; + --pgn-pagination-font-size: 0.9375rem; + --pgn-pagination-border-radius: var(--pgn-border-radius); + --pgn-pagination-border-width: 1px; + --pgn-pagination-gap: 0.25rem; + --pgn-pagination-active-font-weight: 700; + + /* ---- Nav / Tabs ($nav-tabs-*) ---- */ + --pgn-nav-tabs-link-padding-y: 0.625rem; + --pgn-nav-tabs-link-padding-x: 1.25rem; + --pgn-nav-tabs-link-font-size: 0.9375rem; + --pgn-nav-tabs-border-width: 2px; + --pgn-nav-tabs-active-font-weight: 700; + --pgn-nav-tabs-panel-padding-y: 0.875rem; + + /* ---- Breadcrumb ($breadcrumb-*) ---- */ + --pgn-breadcrumb-font-size: 0.9375rem; + --pgn-breadcrumb-item-padding-x: 0.25rem; + --pgn-breadcrumb-gap: 0.25rem; + --pgn-breadcrumb-divider: "/"; + + /* ---- Progress ($progress-*) ---- */ + --pgn-progress-height: 0.75rem; + --pgn-progress-border-radius: var(--pgn-border-radius-pill); + --pgn-progress-font-size: 0.75rem; + --pgn-progress-label-font-size: 0.875rem; + --pgn-progress-label-margin-bottom: 0.25rem; + --pgn-progress-transition: width 0.4s ease; + + /* ---- Spinner ---- */ + --pgn-spinner-size-sm: 1rem; + --pgn-spinner-size-md: 2rem; + --pgn-spinner-size-lg: 3rem; + --pgn-spinner-size-xl: 4rem; + --pgn-spinner-border-width: 2px; + --pgn-spinner-animation-duration: 0.75s; + + /* ---- Avatar ---- */ + --pgn-avatar-size-xs: 1.5rem; + --pgn-avatar-size-sm: 2rem; + --pgn-avatar-size-md: 2.5rem; + --pgn-avatar-size-lg: 3rem; + --pgn-avatar-size-xl: 4rem; + --pgn-avatar-size-xxl: 5rem; + --pgn-avatar-font-weight: 700; + --pgn-avatar-border-width: 2px; + --pgn-avatar-status-size-ratio: 0.28; + + /* ---- Chip ---- */ + /* (already defined above) */ + + /* ---- Table ($table-*) ---- */ + --pgn-table-cell-padding-y: 0.75rem; + --pgn-table-cell-padding-x: 1rem; + --pgn-table-cell-sm-padding-y: 0.375rem; + --pgn-table-cell-sm-padding-x: 0.5rem; + --pgn-table-head-font-size: 0.875rem; + --pgn-table-head-font-weight: 700; + --pgn-table-head-text-transform: uppercase; + --pgn-table-head-letter-spacing: 0.05em; + --pgn-table-border-width: 1px; + --pgn-table-head-border-width: 2px; + --pgn-table-caption-font-size: 0.8125rem; + --pgn-table-caption-padding: 0.5rem; + + /* ---- Skeleton ---- */ + --pgn-skeleton-border-radius: var(--pgn-border-radius); + --pgn-skeleton-animation-duration: 1.5s; + --pgn-skeleton-animation-timing: ease; + --pgn-skeleton-bg-size: 200% 100%; + + /* ---- Collapsible ---- */ + --pgn-collapsible-header-padding: 0.875rem 1rem; + --pgn-collapsible-body-padding: 1rem; + --pgn-collapsible-border-width: 1px; + --pgn-collapsible-border-radius: var(--pgn-border-radius); + --pgn-collapsible-header-font-size: 0.9375rem; + --pgn-collapsible-header-font-weight: 600; + --pgn-collapsible-transition: background 0.2s ease-in-out; + + /* ---- Page Banner ---- */ + --pgn-page-banner-padding-y: 0.625rem; + --pgn-page-banner-padding-x: 1.25rem; + --pgn-page-banner-font-size: 0.9375rem; + --pgn-page-banner-border-width: 1px; + + /* ---- Stat Card (custom) ---- */ + --pgn-stat-card-label-font-size: 0.8125rem; + --pgn-stat-card-value-font-size: 2rem; + --pgn-stat-card-value-font-weight: 700; + --pgn-stat-card-change-font-size: 0.8125rem; + --pgn-stat-card-change-font-weight: 500; + --pgn-stat-card-accent-border-width: 3px; + --pgn-stat-card-padding: 1.25rem; + + /* ---- List Group ($list-group-*) ---- */ + --pgn-list-group-item-padding-y: 0.75rem; + --pgn-list-group-item-padding-x: 1.25rem; + --pgn-list-group-border-width: 1px; + --pgn-list-group-border-radius: var(--pgn-border-radius); + --pgn-list-group-font-size: 0.9375rem; +} + +.text-primary-50 { color: var(--color-primary-50); } +.bg-primary-50 { background-color: var(--color-primary-50); } +.border-primary-50 { border-color: var(--color-primary-50); } +.text-primary-100 { color: var(--color-primary-100); } +.bg-primary-100 { background-color: var(--color-primary-100); } +.border-primary-100 { border-color: var(--color-primary-100); } +.text-primary-200 { color: var(--color-primary-200); } +.bg-primary-200 { background-color: var(--color-primary-200); } +.border-primary-200 { border-color: var(--color-primary-200); } +.text-primary-300 { color: var(--color-primary-300); } +.bg-primary-300 { background-color: var(--color-primary-300); } +.border-primary-300 { border-color: var(--color-primary-300); } +.text-primary-400 { color: var(--color-primary-400); } +.bg-primary-400 { background-color: var(--color-primary-400); } +.border-primary-400 { border-color: var(--color-primary-400); } +.text-primary-500 { color: var(--color-primary-500); } +.bg-primary-500 { background-color: var(--color-primary-500); } +.border-primary-500 { border-color: var(--color-primary-500); } +.text-primary-600 { color: var(--color-primary-600); } +.bg-primary-600 { background-color: var(--color-primary-600); } +.border-primary-600 { border-color: var(--color-primary-600); } +.text-primary-700 { color: var(--color-primary-700); } +.bg-primary-700 { background-color: var(--color-primary-700); } +.border-primary-700 { border-color: var(--color-primary-700); } +.text-primary-800 { color: var(--color-primary-800); } +.bg-primary-800 { background-color: var(--color-primary-800); } +.border-primary-800 { border-color: var(--color-primary-800); } +.text-primary-900 { color: var(--color-primary-900); } +.bg-primary-900 { background-color: var(--color-primary-900); } +.border-primary-900 { border-color: var(--color-primary-900); } +.text-brand-50 { color: var(--color-brand-50); } +.bg-brand-50 { background-color: var(--color-brand-50); } +.border-brand-50 { border-color: var(--color-brand-50); } +.text-brand-100 { color: var(--color-brand-100); } +.bg-brand-100 { background-color: var(--color-brand-100); } +.border-brand-100 { border-color: var(--color-brand-100); } +.text-brand-200 { color: var(--color-brand-200); } +.bg-brand-200 { background-color: var(--color-brand-200); } +.border-brand-200 { border-color: var(--color-brand-200); } +.text-brand-300 { color: var(--color-brand-300); } +.bg-brand-300 { background-color: var(--color-brand-300); } +.border-brand-300 { border-color: var(--color-brand-300); } +.text-brand-400 { color: var(--color-brand-400); } +.bg-brand-400 { background-color: var(--color-brand-400); } +.border-brand-400 { border-color: var(--color-brand-400); } +.text-brand-500 { color: var(--color-brand-500); } +.bg-brand-500 { background-color: var(--color-brand-500); } +.border-brand-500 { border-color: var(--color-brand-500); } +.text-brand-600 { color: var(--color-brand-600); } +.bg-brand-600 { background-color: var(--color-brand-600); } +.border-brand-600 { border-color: var(--color-brand-600); } +.text-brand-700 { color: var(--color-brand-700); } +.bg-brand-700 { background-color: var(--color-brand-700); } +.border-brand-700 { border-color: var(--color-brand-700); } +.text-brand-800 { color: var(--color-brand-800); } +.bg-brand-800 { background-color: var(--color-brand-800); } +.border-brand-800 { border-color: var(--color-brand-800); } +.text-brand-900 { color: var(--color-brand-900); } +.bg-brand-900 { background-color: var(--color-brand-900); } +.border-brand-900 { border-color: var(--color-brand-900); } +.text-blue-50 { color: var(--color-blue-50); } +.bg-blue-50 { background-color: var(--color-blue-50); } +.border-blue-50 { border-color: var(--color-blue-50); } +.text-blue-100 { color: var(--color-blue-100); } +.bg-blue-100 { background-color: var(--color-blue-100); } +.border-blue-100 { border-color: var(--color-blue-100); } +.text-blue-200 { color: var(--color-blue-200); } +.bg-blue-200 { background-color: var(--color-blue-200); } +.border-blue-200 { border-color: var(--color-blue-200); } +.text-blue-300 { color: var(--color-blue-300); } +.bg-blue-300 { background-color: var(--color-blue-300); } +.border-blue-300 { border-color: var(--color-blue-300); } +.text-blue-400 { color: var(--color-blue-400); } +.bg-blue-400 { background-color: var(--color-blue-400); } +.border-blue-400 { border-color: var(--color-blue-400); } +.text-blue-500 { color: var(--color-blue-500); } +.bg-blue-500 { background-color: var(--color-blue-500); } +.border-blue-500 { border-color: var(--color-blue-500); } +.text-blue-600 { color: var(--color-blue-600); } +.bg-blue-600 { background-color: var(--color-blue-600); } +.border-blue-600 { border-color: var(--color-blue-600); } +.text-blue-700 { color: var(--color-blue-700); } +.bg-blue-700 { background-color: var(--color-blue-700); } +.border-blue-700 { border-color: var(--color-blue-700); } +.text-blue-800 { color: var(--color-blue-800); } +.bg-blue-800 { background-color: var(--color-blue-800); } +.border-blue-800 { border-color: var(--color-blue-800); } +.text-blue-900 { color: var(--color-blue-900); } +.bg-blue-900 { background-color: var(--color-blue-900); } +.border-blue-900 { border-color: var(--color-blue-900); } +.text-red-50 { color: var(--color-red-50); } +.bg-red-50 { background-color: var(--color-red-50); } +.border-red-50 { border-color: var(--color-red-50); } +.text-red-100 { color: var(--color-red-100); } +.bg-red-100 { background-color: var(--color-red-100); } +.border-red-100 { border-color: var(--color-red-100); } +.text-red-200 { color: var(--color-red-200); } +.bg-red-200 { background-color: var(--color-red-200); } +.border-red-200 { border-color: var(--color-red-200); } +.text-red-300 { color: var(--color-red-300); } +.bg-red-300 { background-color: var(--color-red-300); } +.border-red-300 { border-color: var(--color-red-300); } +.text-red-400 { color: var(--color-red-400); } +.bg-red-400 { background-color: var(--color-red-400); } +.border-red-400 { border-color: var(--color-red-400); } +.text-red-500 { color: var(--color-red-500); } +.bg-red-500 { background-color: var(--color-red-500); } +.border-red-500 { border-color: var(--color-red-500); } +.text-red-600 { color: var(--color-red-600); } +.bg-red-600 { background-color: var(--color-red-600); } +.border-red-600 { border-color: var(--color-red-600); } +.text-red-700 { color: var(--color-red-700); } +.bg-red-700 { background-color: var(--color-red-700); } +.border-red-700 { border-color: var(--color-red-700); } +.text-red-800 { color: var(--color-red-800); } +.bg-red-800 { background-color: var(--color-red-800); } +.border-red-800 { border-color: var(--color-red-800); } +.text-red-900 { color: var(--color-red-900); } +.bg-red-900 { background-color: var(--color-red-900); } +.border-red-900 { border-color: var(--color-red-900); } +.text-yellow-50 { color: var(--color-yellow-50); } +.bg-yellow-50 { background-color: var(--color-yellow-50); } +.border-yellow-50 { border-color: var(--color-yellow-50); } +.text-yellow-100 { color: var(--color-yellow-100); } +.bg-yellow-100 { background-color: var(--color-yellow-100); } +.border-yellow-100 { border-color: var(--color-yellow-100); } +.text-yellow-200 { color: var(--color-yellow-200); } +.bg-yellow-200 { background-color: var(--color-yellow-200); } +.border-yellow-200 { border-color: var(--color-yellow-200); } +.text-yellow-300 { color: var(--color-yellow-300); } +.bg-yellow-300 { background-color: var(--color-yellow-300); } +.border-yellow-300 { border-color: var(--color-yellow-300); } +.text-yellow-400 { color: var(--color-yellow-400); } +.bg-yellow-400 { background-color: var(--color-yellow-400); } +.border-yellow-400 { border-color: var(--color-yellow-400); } +.text-yellow-500 { color: var(--color-yellow-500); } +.bg-yellow-500 { background-color: var(--color-yellow-500); } +.border-yellow-500 { border-color: var(--color-yellow-500); } +.text-yellow-600 { color: var(--color-yellow-600); } +.bg-yellow-600 { background-color: var(--color-yellow-600); } +.border-yellow-600 { border-color: var(--color-yellow-600); } +.text-yellow-700 { color: var(--color-yellow-700); } +.bg-yellow-700 { background-color: var(--color-yellow-700); } +.border-yellow-700 { border-color: var(--color-yellow-700); } +.text-yellow-800 { color: var(--color-yellow-800); } +.bg-yellow-800 { background-color: var(--color-yellow-800); } +.border-yellow-800 { border-color: var(--color-yellow-800); } +.text-yellow-900 { color: var(--color-yellow-900); } +.bg-yellow-900 { background-color: var(--color-yellow-900); } +.border-yellow-900 { border-color: var(--color-yellow-900); } +.text-green-50 { color: var(--color-green-50); } +.bg-green-50 { background-color: var(--color-green-50); } +.border-green-50 { border-color: var(--color-green-50); } +.text-green-100 { color: var(--color-green-100); } +.bg-green-100 { background-color: var(--color-green-100); } +.border-green-100 { border-color: var(--color-green-100); } +.text-green-200 { color: var(--color-green-200); } +.bg-green-200 { background-color: var(--color-green-200); } +.border-green-200 { border-color: var(--color-green-200); } +.text-green-300 { color: var(--color-green-300); } +.bg-green-300 { background-color: var(--color-green-300); } +.border-green-300 { border-color: var(--color-green-300); } +.text-green-400 { color: var(--color-green-400); } +.bg-green-400 { background-color: var(--color-green-400); } +.border-green-400 { border-color: var(--color-green-400); } +.text-green-500 { color: var(--color-green-500); } +.bg-green-500 { background-color: var(--color-green-500); } +.border-green-500 { border-color: var(--color-green-500); } +.text-green-600 { color: var(--color-green-600); } +.bg-green-600 { background-color: var(--color-green-600); } +.border-green-600 { border-color: var(--color-green-600); } +.text-green-700 { color: var(--color-green-700); } +.bg-green-700 { background-color: var(--color-green-700); } +.border-green-700 { border-color: var(--color-green-700); } +.text-green-800 { color: var(--color-green-800); } +.bg-green-800 { background-color: var(--color-green-800); } +.border-green-800 { border-color: var(--color-green-800); } +.text-green-900 { color: var(--color-green-900); } +.bg-green-900 { background-color: var(--color-green-900); } +.border-green-900 { border-color: var(--color-green-900); } +.text-teal-50 { color: var(--color-teal-50); } +.bg-teal-50 { background-color: var(--color-teal-50); } +.border-teal-50 { border-color: var(--color-teal-50); } +.text-teal-100 { color: var(--color-teal-100); } +.bg-teal-100 { background-color: var(--color-teal-100); } +.border-teal-100 { border-color: var(--color-teal-100); } +.text-teal-200 { color: var(--color-teal-200); } +.bg-teal-200 { background-color: var(--color-teal-200); } +.border-teal-200 { border-color: var(--color-teal-200); } +.text-teal-300 { color: var(--color-teal-300); } +.bg-teal-300 { background-color: var(--color-teal-300); } +.border-teal-300 { border-color: var(--color-teal-300); } +.text-teal-400 { color: var(--color-teal-400); } +.bg-teal-400 { background-color: var(--color-teal-400); } +.border-teal-400 { border-color: var(--color-teal-400); } +.text-teal-500 { color: var(--color-teal-500); } +.bg-teal-500 { background-color: var(--color-teal-500); } +.border-teal-500 { border-color: var(--color-teal-500); } +.text-teal-600 { color: var(--color-teal-600); } +.bg-teal-600 { background-color: var(--color-teal-600); } +.border-teal-600 { border-color: var(--color-teal-600); } +.text-teal-700 { color: var(--color-teal-700); } +.bg-teal-700 { background-color: var(--color-teal-700); } +.border-teal-700 { border-color: var(--color-teal-700); } +.text-teal-800 { color: var(--color-teal-800); } +.bg-teal-800 { background-color: var(--color-teal-800); } +.border-teal-800 { border-color: var(--color-teal-800); } +.text-teal-900 { color: var(--color-teal-900); } +.bg-teal-900 { background-color: var(--color-teal-900); } +.border-teal-900 { border-color: var(--color-teal-900); } +.text-dark-50 { color: var(--color-dark-50); } +.bg-dark-50 { background-color: var(--color-dark-50); } +.border-dark-50 { border-color: var(--color-dark-50); } +.text-dark-100 { color: var(--color-dark-100); } +.bg-dark-100 { background-color: var(--color-dark-100); } +.border-dark-100 { border-color: var(--color-dark-100); } +.text-dark-200 { color: var(--color-dark-200); } +.bg-dark-200 { background-color: var(--color-dark-200); } +.border-dark-200 { border-color: var(--color-dark-200); } +.text-dark-300 { color: var(--color-dark-300); } +.bg-dark-300 { background-color: var(--color-dark-300); } +.border-dark-300 { border-color: var(--color-dark-300); } +.text-dark-400 { color: var(--color-dark-400); } +.bg-dark-400 { background-color: var(--color-dark-400); } +.border-dark-400 { border-color: var(--color-dark-400); } +.text-dark-500 { color: var(--color-dark-500); } +.bg-dark-500 { background-color: var(--color-dark-500); } +.border-dark-500 { border-color: var(--color-dark-500); } +.text-dark-600 { color: var(--color-dark-600); } +.bg-dark-600 { background-color: var(--color-dark-600); } +.border-dark-600 { border-color: var(--color-dark-600); } +.text-dark-700 { color: var(--color-dark-700); } +.bg-dark-700 { background-color: var(--color-dark-700); } +.border-dark-700 { border-color: var(--color-dark-700); } +.text-dark-800 { color: var(--color-dark-800); } +.bg-dark-800 { background-color: var(--color-dark-800); } +.border-dark-800 { border-color: var(--color-dark-800); } +.text-dark-900 { color: var(--color-dark-900); } +.bg-dark-900 { background-color: var(--color-dark-900); } +.border-dark-900 { border-color: var(--color-dark-900); } +.text-gray-50 { color: var(--color-gray-50); } +.bg-gray-50 { background-color: var(--color-gray-50); } +.border-gray-50 { border-color: var(--color-gray-50); } +.text-gray-100 { color: var(--color-gray-100); } +.bg-gray-100 { background-color: var(--color-gray-100); } +.border-gray-100 { border-color: var(--color-gray-100); } +.text-gray-200 { color: var(--color-gray-200); } +.bg-gray-200 { background-color: var(--color-gray-200); } +.border-gray-200 { border-color: var(--color-gray-200); } +.text-gray-300 { color: var(--color-gray-300); } +.bg-gray-300 { background-color: var(--color-gray-300); } +.border-gray-300 { border-color: var(--color-gray-300); } +.text-gray-400 { color: var(--color-gray-400); } +.bg-gray-400 { background-color: var(--color-gray-400); } +.border-gray-400 { border-color: var(--color-gray-400); } +.text-gray-500 { color: var(--color-gray-500); } +.bg-gray-500 { background-color: var(--color-gray-500); } +.border-gray-500 { border-color: var(--color-gray-500); } +.text-gray-600 { color: var(--color-gray-600); } +.bg-gray-600 { background-color: var(--color-gray-600); } +.border-gray-600 { border-color: var(--color-gray-600); } +.text-gray-700 { color: var(--color-gray-700); } +.bg-gray-700 { background-color: var(--color-gray-700); } +.border-gray-700 { border-color: var(--color-gray-700); } +.text-gray-800 { color: var(--color-gray-800); } +.bg-gray-800 { background-color: var(--color-gray-800); } +.border-gray-800 { border-color: var(--color-gray-800); } +.text-gray-900 { color: var(--color-gray-900); } +.bg-gray-900 { background-color: var(--color-gray-900); } +.border-gray-900 { border-color: var(--color-gray-900); } +.text-black { color: #000000; } +.text-white { color: #ffffff; } + +.p-0 { padding: 0px; } +.px-0 { padding-left: 0px; padding-right: 0px; } +.py-0 { padding-top: 0px; padding-bottom: 0px; } +.m-0 { margin: 0px; } +.mx-0 { margin-left: 0px; margin-right: 0px; } +.my-0 { margin-top: 0px; margin-bottom: 0px; } +.p-xs { padding: 4px; } +.px-xs { padding-left: 4px; padding-right: 4px; } +.py-xs { padding-top: 4px; padding-bottom: 4px; } +.m-xs { margin: 4px; } +.mx-xs { margin-left: 4px; margin-right: 4px; } +.my-xs { margin-top: 4px; margin-bottom: 4px; } +.p-sm { padding: 8px; } +.px-sm { padding-left: 8px; padding-right: 8px; } +.py-sm { padding-top: 8px; padding-bottom: 8px; } +.m-sm { margin: 8px; } +.mx-sm { margin-left: 8px; margin-right: 8px; } +.my-sm { margin-top: 8px; margin-bottom: 8px; } +.p-md { padding: 16px; } +.px-md { padding-left: 16px; padding-right: 16px; } +.py-md { padding-top: 16px; padding-bottom: 16px; } +.m-md { margin: 16px; } +.mx-md { margin-left: 16px; margin-right: 16px; } +.my-md { margin-top: 16px; margin-bottom: 16px; } +.p-lg { padding: 24px; } +.px-lg { padding-left: 24px; padding-right: 24px; } +.py-lg { padding-top: 24px; padding-bottom: 24px; } +.m-lg { margin: 24px; } +.mx-lg { margin-left: 24px; margin-right: 24px; } +.my-lg { margin-top: 24px; margin-bottom: 24px; } +.p-xl { padding: 32px; } +.px-xl { padding-left: 32px; padding-right: 32px; } +.py-xl { padding-top: 32px; padding-bottom: 32px; } +.m-xl { margin: 32px; } +.mx-xl { margin-left: 32px; margin-right: 32px; } +.my-xl { margin-top: 32px; margin-bottom: 32px; } +.p-2xl { padding: 48px; } +.px-2xl { padding-left: 48px; padding-right: 48px; } +.py-2xl { padding-top: 48px; padding-bottom: 48px; } +.m-2xl { margin: 48px; } +.mx-2xl { margin-left: 48px; margin-right: 48px; } +.my-2xl { margin-top: 48px; margin-bottom: 48px; } +.p-3xl { padding: 64px; } +.px-3xl { padding-left: 64px; padding-right: 64px; } +.py-3xl { padding-top: 64px; padding-bottom: 64px; } +.m-3xl { margin: 64px; } +.mx-3xl { margin-left: 64px; margin-right: 64px; } +.my-3xl { margin-top: 64px; margin-bottom: 64px; } +.p-4xl { padding: 80px; } +.px-4xl { padding-left: 80px; padding-right: 80px; } +.py-4xl { padding-top: 80px; padding-bottom: 80px; } +.m-4xl { margin: 80px; } +.mx-4xl { margin-left: 80px; margin-right: 80px; } +.my-4xl { margin-top: 80px; margin-bottom: 80px; } + +.rounded-xs { border-radius: 4px; } +.rounded-sm { border-radius: 6px; } +.rounded-md { border-radius: 7px; } +.rounded-lg { border-radius: 8px; } +.rounded-xl { border-radius: 16px; } +.rounded-pill { border-radius: 800px; } +.rounded-full { border-radius: 9999px; } + +.text-xl { font-size: 40px; } +.text-lg { font-size: 32px; } +.text-md { font-size: 22px; } +.text-sm { font-size: 18px; } +.text-xs { font-size: 14px; } +.text-regular { font-size: 12px; } + +.font-regular { font-weight: 400; } +.font-medium { font-weight: 500; } +.font-semibold { font-weight: 600; } +.font-bold { font-weight: 700; } + +.lh-display { line-height: 40px; } +.lh-heading { line-height: 28px; } +.lh-md { line-height: 28px; } +.lh-regular { line-height: 24px; } + +.font-primary { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, Segoe UI, Roboto, Helvetica Neue, Arial; } +.font-segoe-ui { font-family: Segoe UI; } +.font-roboto { font-family: Roboto; } +.font-helvetica-neue { font-family: Helvetica Neue; } +.font-arial { font-family: Arial; } diff --git a/tutorindigo/templates/indigo/lms/static/css/light.min.css b/tutorindigo/templates/indigo/lms/static/css/light.min.css new file mode 100644 index 000000000..84c5a4c04 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/css/light.min.css @@ -0,0 +1,22722 @@ +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Extralight.otf") format("opentype"); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-ExtralightItalic.otf") format("opentype"); + font-weight: 200; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Light.otf") format("opentype"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-LightItalic.otf") format("opentype"); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Regular.otf") format("opentype"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-RegularItalic.otf") format("opentype"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Medium.otf") format("opentype"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-MediumItalic.otf") format("opentype"); + font-weight: 500; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Medium.otf") format("opentype"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-MediumItalic.otf") format("opentype"); + font-weight: 600; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Bold.otf") format("opentype"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-BoldItalic.otf") format("opentype"); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Extrabold.otf") format("opentype"); + font-weight: 800; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-ExtraboldItalic.otf") format("opentype"); + font-weight: 800; + font-style: italic; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-Heavy.otf") format("opentype"); + font-weight: 900; + font-style: normal; +} +@font-face { + font-family: "Rockford Sans"; + src: url("https://{{ LMS_HOST }}/static/indigo/fonts/RockfordSans-HeavyItalic.otf") format("opentype"); + font-weight: 900; + font-style: italic; +} +#root { + background: #F8FAFC !important; + font-family: "Rockford Sans", "Segoe UI", Roboto, "Open Sans", -apple-system, sans-serif !important;; +} +#root header .logo{ + font-size: 40px !important; + padding-block: 12px !important; +} +:root { + --color-primary-50: #ecfdf5; + --color-primary-100: #d1fae5; + --color-primary-200: #a7f3d0; + --color-primary-300: #6ee7b7; + --color-primary-400: #34d399; + --color-primary-500: #059669; + --color-primary-600: #047857; + --color-primary-700: #065f46; + --color-primary-800: #064e3b; + --color-primary-900: #022c22; + --color-brand-50: #FCF7FA; + --color-brand-100: #F9F0F5; + --color-brand-200: #E7BFD4; + --color-brand-300: #CE80AA; + --color-brand-400: #B6407F; + --color-brand-500: #9D0054; + --color-brand-600: #8D004C; + --color-brand-700: #7E0043; + --color-brand-800: #76003F; + --color-brand-900: #6E003B; + --color-blue-50: #F8F9FC; + --color-blue-100: #F2F4F9; + --color-blue-200: #C8D0E7; + --color-blue-300: #91A0CF; + --color-blue-400: #5A71B7; + --color-blue-500: #23419F; + --color-blue-600: #203B8F; + --color-blue-700: #1C347F; + --color-blue-800: #1A3177; + --color-blue-900: #192E6F; + --color-red-50: #FDF9F9; + --color-red-100: #FBF2F3; + --color-red-200: #F0CBCE; + --color-red-300: #E1969D; + --color-red-400: #D2626B; + --color-red-500: #C32D3A; + --color-red-600: #B02934; + --color-red-700: #9C242E; + --color-red-800: #92222C; + --color-red-900: #891F29; + --color-yellow-50: #FFFEF7; + --color-yellow-100: #FFFDF0; + --color-yellow-200: #FFF6BF; + --color-yellow-300: #FFEC80; + --color-yellow-400: #FFE340; + --color-yellow-500: #FFD900; + --color-yellow-600: #E6C300; + --color-yellow-700: #CCAE00; + --color-yellow-800: #BFA300; + --color-yellow-900: #B39800; + --color-green-50: #F8FBFA; + --color-green-100: #F1F8F5; + --color-green-200: #C5E0D4; + --color-green-300: #8BC1A9; + --color-green-400: #51A17E; + --color-green-500: #178253; + --color-green-600: #15754B; + --color-green-700: #126842; + --color-green-800: #11623E; + --color-green-900: #105B3A; + --color-teal-50: #F7FBFC; + --color-teal-100: #F0F6FA; + --color-teal-200: #BFDBEA; + --color-teal-300: #80B6D5; + --color-teal-400: #4092BF; + --color-teal-500: #006DAA; + --color-teal-600: #006299; + --color-teal-700: #005788; + --color-teal-800: #005280; + --color-teal-900: #004C77; + --color-dark-50: #F9F9F9; + --color-dark-100: #F2F3F3; + --color-dark-200: #C9CFCB; + --color-dark-300: #939F97; + --color-dark-400: #5D6F63; + --color-dark-500: #273F2F; + --color-dark-600: #23392A; + --color-dark-700: #1F3226; + --color-dark-800: #1D2F23; + --color-dark-900: #1B2C21; + --color-gray-50: #F8F8F8; + --color-gray-100: #EBEBEB; + --color-gray-200: #CCCCCC; + --color-gray-300: #ADADAD; + --color-gray-400: #8F8F8F; + --color-gray-500: #707070; + --color-gray-600: #5C5C5C; + --color-gray-700: #454545; + --color-gray-800: #333333; + --color-gray-900: #212529; + --color-slate-100: #F8FAFC; + --color-slate-200: #F1F5F9; + --color-slate-300: #E2E8F0; + --color-slate-400: #CBD5E1; + --color-slate-500: #94A3B8; + --color-slate-600: #64748B; + --color-slate-700: #475569; + --color-slate-800: #334155; + --color-slate-900: #1E293B; +} + +.text-primary-50 { color: var(--color-primary-50); } +.bg-primary-50 { background-color: var(--color-primary-50); } +.border-primary-50 { border-color: var(--color-primary-50); } +.text-primary-100 { color: var(--color-primary-100); } +.bg-primary-100 { background-color: var(--color-primary-100); } +.border-primary-100 { border-color: var(--color-primary-100); } +.text-primary-200 { color: var(--color-primary-200); } +.bg-primary-200 { background-color: var(--color-primary-200); } +.border-primary-200 { border-color: var(--color-primary-200); } +.text-primary-300 { color: var(--color-primary-300); } +.bg-primary-300 { background-color: var(--color-primary-300); } +.border-primary-300 { border-color: var(--color-primary-300); } +.text-primary-400 { color: var(--color-primary-400); } +.bg-primary-400 { background-color: var(--color-primary-400); } +.border-primary-400 { border-color: var(--color-primary-400); } +.text-primary-500 { color: var(--color-primary-500); } +.bg-primary-500 { background-color: var(--color-primary-500); } +.border-primary-500 { border-color: var(--color-primary-500); } +.text-primary-600 { color: var(--color-primary-600); } +.bg-primary-600 { background-color: var(--color-primary-600); } +.border-primary-600 { border-color: var(--color-primary-600); } +.text-primary-700 { color: var(--color-primary-700); } +.bg-primary-700 { background-color: var(--color-primary-700); } +.border-primary-700 { border-color: var(--color-primary-700); } +.text-primary-800 { color: var(--color-primary-800); } +.bg-primary-800 { background-color: var(--color-primary-800); } +.border-primary-800 { border-color: var(--color-primary-800); } +.text-primary-900 { color: var(--color-primary-900); } +.bg-primary-900 { background-color: var(--color-primary-900); } +.border-primary-900 { border-color: var(--color-primary-900); } +.text-brand-50 { color: var(--color-brand-50); } +.bg-brand-50 { background-color: var(--color-brand-50); } +.border-brand-50 { border-color: var(--color-brand-50); } +.text-brand-100 { color: var(--color-brand-100); } +.bg-brand-100 { background-color: var(--color-brand-100); } +.border-brand-100 { border-color: var(--color-brand-100); } +.text-brand-200 { color: var(--color-brand-200); } +.bg-brand-200 { background-color: var(--color-brand-200); } +.border-brand-200 { border-color: var(--color-brand-200); } +.text-brand-300 { color: var(--color-brand-300); } +.bg-brand-300 { background-color: var(--color-brand-300); } +.border-brand-300 { border-color: var(--color-brand-300); } +.text-brand-400 { color: var(--color-brand-400); } +.bg-brand-400 { background-color: var(--color-brand-400); } +.border-brand-400 { border-color: var(--color-brand-400); } +.text-brand-500 { color: var(--color-brand-500); } +.bg-brand-500 { background-color: var(--color-brand-500); } +.border-brand-500 { border-color: var(--color-brand-500); } +.text-brand-600 { color: var(--color-brand-600); } +.bg-brand-600 { background-color: var(--color-brand-600); } +.border-brand-600 { border-color: var(--color-brand-600); } +.text-brand-700 { color: var(--color-brand-700); } +.bg-brand-700 { background-color: var(--color-brand-700); } +.border-brand-700 { border-color: var(--color-brand-700); } +.text-brand-800 { color: var(--color-brand-800); } +.bg-brand-800 { background-color: var(--color-brand-800); } +.border-brand-800 { border-color: var(--color-brand-800); } +.text-brand-900 { color: var(--color-brand-900); } +.bg-brand-900 { background-color: var(--color-brand-900); } +.border-brand-900 { border-color: var(--color-brand-900); } +.text-blue-50 { color: var(--color-blue-50); } +.bg-blue-50 { background-color: var(--color-blue-50); } +.border-blue-50 { border-color: var(--color-blue-50); } +.text-blue-100 { color: var(--color-blue-100); } +.bg-blue-100 { background-color: var(--color-blue-100); } +.border-blue-100 { border-color: var(--color-blue-100); } +.text-blue-200 { color: var(--color-blue-200); } +.bg-blue-200 { background-color: var(--color-blue-200); } +.border-blue-200 { border-color: var(--color-blue-200); } +.text-blue-300 { color: var(--color-blue-300); } +.bg-blue-300 { background-color: var(--color-blue-300); } +.border-blue-300 { border-color: var(--color-blue-300); } +.text-blue-400 { color: var(--color-blue-400); } +.bg-blue-400 { background-color: var(--color-blue-400); } +.border-blue-400 { border-color: var(--color-blue-400); } +.text-blue-500 { color: var(--color-blue-500); } +.bg-blue-500 { background-color: var(--color-blue-500); } +.border-blue-500 { border-color: var(--color-blue-500); } +.text-blue-600 { color: var(--color-blue-600); } +.bg-blue-600 { background-color: var(--color-blue-600); } +.border-blue-600 { border-color: var(--color-blue-600); } +.text-blue-700 { color: var(--color-blue-700); } +.bg-blue-700 { background-color: var(--color-blue-700); } +.border-blue-700 { border-color: var(--color-blue-700); } +.text-blue-800 { color: var(--color-blue-800); } +.bg-blue-800 { background-color: var(--color-blue-800); } +.border-blue-800 { border-color: var(--color-blue-800); } +.text-blue-900 { color: var(--color-blue-900); } +.bg-blue-900 { background-color: var(--color-blue-900); } +.border-blue-900 { border-color: var(--color-blue-900); } +.text-red-50 { color: var(--color-red-50); } +.bg-red-50 { background-color: var(--color-red-50); } +.border-red-50 { border-color: var(--color-red-50); } +.text-red-100 { color: var(--color-red-100); } +.bg-red-100 { background-color: var(--color-red-100); } +.border-red-100 { border-color: var(--color-red-100); } +.text-red-200 { color: var(--color-red-200); } +.bg-red-200 { background-color: var(--color-red-200); } +.border-red-200 { border-color: var(--color-red-200); } +.text-red-300 { color: var(--color-red-300); } +.bg-red-300 { background-color: var(--color-red-300); } +.border-red-300 { border-color: var(--color-red-300); } +.text-red-400 { color: var(--color-red-400); } +.bg-red-400 { background-color: var(--color-red-400); } +.border-red-400 { border-color: var(--color-red-400); } +.text-red-500 { color: var(--color-red-500); } +.bg-red-500 { background-color: var(--color-red-500); } +.border-red-500 { border-color: var(--color-red-500); } +.text-red-600 { color: var(--color-red-600); } +.bg-red-600 { background-color: var(--color-red-600); } +.border-red-600 { border-color: var(--color-red-600); } +.text-red-700 { color: var(--color-red-700); } +.bg-red-700 { background-color: var(--color-red-700); } +.border-red-700 { border-color: var(--color-red-700); } +.text-red-800 { color: var(--color-red-800); } +.bg-red-800 { background-color: var(--color-red-800); } +.border-red-800 { border-color: var(--color-red-800); } +.text-red-900 { color: var(--color-red-900); } +.bg-red-900 { background-color: var(--color-red-900); } +.border-red-900 { border-color: var(--color-red-900); } +.text-yellow-50 { color: var(--color-yellow-50); } +.bg-yellow-50 { background-color: var(--color-yellow-50); } +.border-yellow-50 { border-color: var(--color-yellow-50); } +.text-yellow-100 { color: var(--color-yellow-100); } +.bg-yellow-100 { background-color: var(--color-yellow-100); } +.border-yellow-100 { border-color: var(--color-yellow-100); } +.text-yellow-200 { color: var(--color-yellow-200); } +.bg-yellow-200 { background-color: var(--color-yellow-200); } +.border-yellow-200 { border-color: var(--color-yellow-200); } +.text-yellow-300 { color: var(--color-yellow-300); } +.bg-yellow-300 { background-color: var(--color-yellow-300); } +.border-yellow-300 { border-color: var(--color-yellow-300); } +.text-yellow-400 { color: var(--color-yellow-400); } +.bg-yellow-400 { background-color: var(--color-yellow-400); } +.border-yellow-400 { border-color: var(--color-yellow-400); } +.text-yellow-500 { color: var(--color-yellow-500); } +.bg-yellow-500 { background-color: var(--color-yellow-500); } +.border-yellow-500 { border-color: var(--color-yellow-500); } +.text-yellow-600 { color: var(--color-yellow-600); } +.bg-yellow-600 { background-color: var(--color-yellow-600); } +.border-yellow-600 { border-color: var(--color-yellow-600); } +.text-yellow-700 { color: var(--color-yellow-700); } +.bg-yellow-700 { background-color: var(--color-yellow-700); } +.border-yellow-700 { border-color: var(--color-yellow-700); } +.text-yellow-800 { color: var(--color-yellow-800); } +.bg-yellow-800 { background-color: var(--color-yellow-800); } +.border-yellow-800 { border-color: var(--color-yellow-800); } +.text-yellow-900 { color: var(--color-yellow-900); } +.bg-yellow-900 { background-color: var(--color-yellow-900); } +.border-yellow-900 { border-color: var(--color-yellow-900); } +.text-green-50 { color: var(--color-green-50); } +.bg-green-50 { background-color: var(--color-green-50); } +.border-green-50 { border-color: var(--color-green-50); } +.text-green-100 { color: var(--color-green-100); } +.bg-green-100 { background-color: var(--color-green-100); } +.border-green-100 { border-color: var(--color-green-100); } +.text-green-200 { color: var(--color-green-200); } +.bg-green-200 { background-color: var(--color-green-200); } +.border-green-200 { border-color: var(--color-green-200); } +.text-green-300 { color: var(--color-green-300); } +.bg-green-300 { background-color: var(--color-green-300); } +.border-green-300 { border-color: var(--color-green-300); } +.text-green-400 { color: var(--color-green-400); } +.bg-green-400 { background-color: var(--color-green-400); } +.border-green-400 { border-color: var(--color-green-400); } +.text-green-500 { color: var(--color-green-500); } +.bg-green-500 { background-color: var(--color-green-500); } +.border-green-500 { border-color: var(--color-green-500); } +.text-green-600 { color: var(--color-green-600); } +.bg-green-600 { background-color: var(--color-green-600); } +.border-green-600 { border-color: var(--color-green-600); } +.text-green-700 { color: var(--color-green-700); } +.bg-green-700 { background-color: var(--color-green-700); } +.border-green-700 { border-color: var(--color-green-700); } +.text-green-800 { color: var(--color-green-800); } +.bg-green-800 { background-color: var(--color-green-800); } +.border-green-800 { border-color: var(--color-green-800); } +.text-green-900 { color: var(--color-green-900); } +.bg-green-900 { background-color: var(--color-green-900); } +.border-green-900 { border-color: var(--color-green-900); } +.text-teal-50 { color: var(--color-teal-50); } +.bg-teal-50 { background-color: var(--color-teal-50); } +.border-teal-50 { border-color: var(--color-teal-50); } +.text-teal-100 { color: var(--color-teal-100); } +.bg-teal-100 { background-color: var(--color-teal-100); } +.border-teal-100 { border-color: var(--color-teal-100); } +.text-teal-200 { color: var(--color-teal-200); } +.bg-teal-200 { background-color: var(--color-teal-200); } +.border-teal-200 { border-color: var(--color-teal-200); } +.text-teal-300 { color: var(--color-teal-300); } +.bg-teal-300 { background-color: var(--color-teal-300); } +.border-teal-300 { border-color: var(--color-teal-300); } +.text-teal-400 { color: var(--color-teal-400); } +.bg-teal-400 { background-color: var(--color-teal-400); } +.border-teal-400 { border-color: var(--color-teal-400); } +.text-teal-500 { color: var(--color-teal-500); } +.bg-teal-500 { background-color: var(--color-teal-500); } +.border-teal-500 { border-color: var(--color-teal-500); } +.text-teal-600 { color: var(--color-teal-600); } +.bg-teal-600 { background-color: var(--color-teal-600); } +.border-teal-600 { border-color: var(--color-teal-600); } +.text-teal-700 { color: var(--color-teal-700); } +.bg-teal-700 { background-color: var(--color-teal-700); } +.border-teal-700 { border-color: var(--color-teal-700); } +.text-teal-800 { color: var(--color-teal-800); } +.bg-teal-800 { background-color: var(--color-teal-800); } +.border-teal-800 { border-color: var(--color-teal-800); } +.text-teal-900 { color: var(--color-teal-900); } +.bg-teal-900 { background-color: var(--color-teal-900); } +.border-teal-900 { border-color: var(--color-teal-900); } +.text-dark-50 { color: var(--color-dark-50); } +.bg-dark-50 { background-color: var(--color-dark-50); } +.border-dark-50 { border-color: var(--color-dark-50); } +.text-dark-100 { color: var(--color-dark-100); } +.bg-dark-100 { background-color: var(--color-dark-100); } +.border-dark-100 { border-color: var(--color-dark-100); } +.text-dark-200 { color: var(--color-dark-200); } +.bg-dark-200 { background-color: var(--color-dark-200); } +.border-dark-200 { border-color: var(--color-dark-200); } +.text-dark-300 { color: var(--color-dark-300); } +.bg-dark-300 { background-color: var(--color-dark-300); } +.border-dark-300 { border-color: var(--color-dark-300); } +.text-dark-400 { color: var(--color-dark-400); } +.bg-dark-400 { background-color: var(--color-dark-400); } +.border-dark-400 { border-color: var(--color-dark-400); } +.text-dark-500 { color: var(--color-dark-500); } +.bg-dark-500 { background-color: var(--color-dark-500); } +.border-dark-500 { border-color: var(--color-dark-500); } +.text-dark-600 { color: var(--color-dark-600); } +.bg-dark-600 { background-color: var(--color-dark-600); } +.border-dark-600 { border-color: var(--color-dark-600); } +.text-dark-700 { color: var(--color-dark-700); } +.bg-dark-700 { background-color: var(--color-dark-700); } +.border-dark-700 { border-color: var(--color-dark-700); } +.text-dark-800 { color: var(--color-dark-800); } +.bg-dark-800 { background-color: var(--color-dark-800); } +.border-dark-800 { border-color: var(--color-dark-800); } +.text-dark-900 { color: var(--color-dark-900); } +.bg-dark-900 { background-color: var(--color-dark-900); } +.border-dark-900 { border-color: var(--color-dark-900); } +.text-gray-50 { color: var(--color-gray-50); } +.bg-gray-50 { background-color: var(--color-gray-50); } +.border-gray-50 { border-color: var(--color-gray-50); } +.text-gray-100 { color: var(--color-gray-100); } +.bg-gray-100 { background-color: var(--color-gray-100); } +.border-gray-100 { border-color: var(--color-gray-100); } +.text-gray-200 { color: var(--color-gray-200); } +.bg-gray-200 { background-color: var(--color-gray-200); } +.border-gray-200 { border-color: var(--color-gray-200); } +.text-gray-300 { color: var(--color-gray-300); } +.bg-gray-300 { background-color: var(--color-gray-300); } +.border-gray-300 { border-color: var(--color-gray-300); } +.text-gray-400 { color: var(--color-gray-400); } +.bg-gray-400 { background-color: var(--color-gray-400); } +.border-gray-400 { border-color: var(--color-gray-400); } +.text-gray-500 { color: var(--color-gray-500); } +.bg-gray-500 { background-color: var(--color-gray-500); } +.border-gray-500 { border-color: var(--color-gray-500); } +.text-gray-600 { color: var(--color-gray-600); } +.bg-gray-600 { background-color: var(--color-gray-600); } +.border-gray-600 { border-color: var(--color-gray-600); } +.text-gray-700 { color: var(--color-gray-700); } +.bg-gray-700 { background-color: var(--color-gray-700); } +.border-gray-700 { border-color: var(--color-gray-700); } +.text-gray-800 { color: var(--color-gray-800); } +.bg-gray-800 { background-color: var(--color-gray-800); } +.border-gray-800 { border-color: var(--color-gray-800); } +.text-gray-900 { color: var(--color-gray-900); } +.bg-gray-900 { background-color: var(--color-gray-900); } +.border-gray-900 { border-color: var(--color-gray-900); } +.text-slate-100 { color: var(--color-slate-100); } +.bg-slate-100 { background-color: var(--color-slate-100); } +.border-slate-100 { border-color: var(--color-slate-100); } +.text-slate-200 { color: var(--color-slate-200); } +.bg-slate-200 { background-color: var(--color-slate-200); } +.border-slate-200 { border-color: var(--color-slate-200); } +.text-slate-300 { color: var(--color-slate-300); } +.bg-slate-300 { background-color: var(--color-slate-300); } +.border-slate-300 { border-color: var(--color-slate-300); } +.text-slate-400 { color: var(--color-slate-400); } +.bg-slate-400 { background-color: var(--color-slate-400); } +.border-slate-400 { border-color: var(--color-slate-400); } +.text-slate-500 { color: var(--color-slate-500); } +.bg-slate-500 { background-color: var(--color-slate-500); } +.border-slate-500 { border-color: var(--color-slate-500); } +.text-slate-600 { color: var(--color-slate-600); } +.bg-slate-600 { background-color: var(--color-slate-600); } +.border-slate-600 { border-color: var(--color-slate-600); } +.text-slate-700 { color: var(--color-slate-700); } +.bg-slate-700 { background-color: var(--color-slate-700); } +.border-slate-700 { border-color: var(--color-slate-700); } +.text-slate-800 { color: var(--color-slate-800); } +.bg-slate-800 { background-color: var(--color-slate-800); } +.border-slate-800 { border-color: var(--color-slate-800); } +.text-slate-900 { color: var(--color-slate-900); } +.bg-slate-900 { background-color: var(--color-slate-900); } +.border-slate-900 { border-color: var(--color-slate-900); } +.text-black { color: #000000; } +.text-white { color: #ffffff; } + +.p-0 { padding: 0px; } +.px-0 { padding-left: 0px; padding-right: 0px; } +.py-0 { padding-top: 0px; padding-bottom: 0px; } +.m-0 { margin: 0px; } +.mx-0 { margin-left: 0px; margin-right: 0px; } +.my-0 { margin-top: 0px; margin-bottom: 0px; } +.p-xs { padding: 4px; } +.px-xs { padding-left: 4px; padding-right: 4px; } +.py-xs { padding-top: 4px; padding-bottom: 4px; } +.m-xs { margin: 4px; } +.mx-xs { margin-left: 4px; margin-right: 4px; } +.my-xs { margin-top: 4px; margin-bottom: 4px; } +.p-sm { padding: 8px; } +.px-sm { padding-left: 8px; padding-right: 8px; } +.py-sm { padding-top: 8px; padding-bottom: 8px; } +.m-sm { margin: 8px; } +.mx-sm { margin-left: 8px; margin-right: 8px; } +.my-sm { margin-top: 8px; margin-bottom: 8px; } +.p-md { padding: 16px; } +.px-md { padding-left: 16px; padding-right: 16px; } +.py-md { padding-top: 16px; padding-bottom: 16px; } +.m-md { margin: 16px; } +.mx-md { margin-left: 16px; margin-right: 16px; } +.my-md { margin-top: 16px; margin-bottom: 16px; } +.p-lg { padding: 24px; } +.px-lg { padding-left: 24px; padding-right: 24px; } +.py-lg { padding-top: 24px; padding-bottom: 24px; } +.m-lg { margin: 24px; } +.mx-lg { margin-left: 24px; margin-right: 24px; } +.my-lg { margin-top: 24px; margin-bottom: 24px; } +.p-xl { padding: 32px; } +.px-xl { padding-left: 32px; padding-right: 32px; } +.py-xl { padding-top: 32px; padding-bottom: 32px; } +.m-xl { margin: 32px; } +.mx-xl { margin-left: 32px; margin-right: 32px; } +.my-xl { margin-top: 32px; margin-bottom: 32px; } +.p-2xl { padding: 48px; } +.px-2xl { padding-left: 48px; padding-right: 48px; } +.py-2xl { padding-top: 48px; padding-bottom: 48px; } +.m-2xl { margin: 48px; } +.mx-2xl { margin-left: 48px; margin-right: 48px; } +.my-2xl { margin-top: 48px; margin-bottom: 48px; } +.p-3xl { padding: 64px; } +.px-3xl { padding-left: 64px; padding-right: 64px; } +.py-3xl { padding-top: 64px; padding-bottom: 64px; } +.m-3xl { margin: 64px; } +.mx-3xl { margin-left: 64px; margin-right: 64px; } +.my-3xl { margin-top: 64px; margin-bottom: 64px; } +.p-4xl { padding: 80px; } +.px-4xl { padding-left: 80px; padding-right: 80px; } +.py-4xl { padding-top: 80px; padding-bottom: 80px; } +.m-4xl { margin: 80px; } +.mx-4xl { margin-left: 80px; margin-right: 80px; } +.my-4xl { margin-top: 80px; margin-bottom: 80px; } + +.rounded-xs { border-radius: 4px; } +.rounded-sm { border-radius: 6px; } +.rounded-md { border-radius: 7px; } +.rounded-lg { border-radius: 8px; } +.rounded-xl { border-radius: 16px; } +.rounded-pill { border-radius: 800px; } +.rounded-full { border-radius: 9999px; } + +.text-xl { font-size: 40px; } +.text-lg { font-size: 32px; } +.text-md { font-size: 22px; } +.text-sm { font-size: 18px; } +.text-xs { font-size: 14px; } +.text-regular { font-size: 12px; } + +.font-light { font-weight: 200; } +.font-regular { font-weight: 300; } +.font-medium { font-weight: 400; } +.font-semibold { font-weight: 500; } +.font-bold { font-weight: 700; } + +.lh-display { line-height: 40px; } +.lh-heading { line-height: 28px; } +.lh-md { line-height: 28px; } +.lh-regular { line-height: 24px; } + +.font-primary { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, Segoe UI, Roboto, Helvetica Neue, Arial; } +.font-segoe-ui { font-family: Segoe UI; } +.font-roboto { font-family: Roboto; } +.font-helvetica-neue { font-family: Helvetica Neue; } +.font-arial { font-family: Arial; } + + + +/* ── Direct overrides for non-token properties ────────────────── */ +.btn-primary { + font-weight: 400 !important; + padding: 8px 12px !important; + border-radius: 6px !important; +} + +.bg-primary { + background-color: #003366 !important; +} + + +/* ================================================================ + REAL @openedx/paragon DIST CSS (core.css + light.css, v23.19.2) + Colors/typography overridden below to Indigo brand values; + all selectors, structure, and variable names left untouched. + ================================================================ */ + +@charset "UTF-8"; +@keyframes react-loading-skeleton { + 100% { + transform: translateX(100%); + } +} +.react-loading-skeleton { + --base-color: #ebebeb; + --highlight-color: #f5f5f5; + --animation-duration: 1.5s; + --animation-direction: normal; + --pseudo-element-display: block; /* Enable animation */ + + background-color: var(--base-color); + + width: 100%; + border-radius: 0.25rem; + display: inline-flex; + line-height: 1; + + position: relative; + user-select: none; + overflow: hidden; + z-index: unset; +} +.react-loading-skeleton::after { + content: ' '; + display: var(--pseudo-element-display); + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background-repeat: no-repeat; + background-image: var( + --custom-highlight-background, + linear-gradient( + 90deg, + var(--base-color) 0%, + var(--highlight-color) 50%, + var(--base-color) 100% + ) + ); + transform: translateX(-100%); + + animation-name: react-loading-skeleton; + animation-direction: var(--animation-direction); + animation-duration: var(--animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} +@media (prefers-reduced-motion) { + .react-loading-skeleton { + --pseudo-element-display: none; /* Disable animation */ + } +} +:export { + xs: 0; + sm: 576px; + md: 768px; + lg: 992px; + xl: 1200px; + xxl: 1400px; +} +:root { + --blue: var(--pgn-color-blue) !important; + --green: var(--pgn-color-green) !important; + --teal: var(--pgn-color-teal) !important; + --red: var(--pgn-color-red) !important; + --yellow: var(--pgn-color-yellow) !important; + --white: var(--pgn-color-white) !important; + --dark-gray: var(--pgn-color-gray-700) !important; + --primary: var(--pgn-color-primary-base) !important; + --secondary: var(--pgn-color-secondary-base) !important; + --brand: var(--pgn-color-brand-base) !important; + --success: var(--pgn-color-success-base) !important; + --info: var(--pgn-color-info-base) !important; + --warning: var(--pgn-color-warning-base) !important; + --danger: var(--pgn-color-danger-base) !important; + --light: var(--pgn-color-light-base) !important; + --dark: var(--pgn-color-dark-base) !important; + --gray: var(--pgn-color-gray-500) !important; + --accent-a: var(--pgn-color-accent-a) !important; + --accent-b: var(--pgn-color-accent-b) !important; + --breakpoint-xs: 0 !important; + --breakpoint-sm: 576px !important; + --breakpoint-md: 768px !important; + --breakpoint-lg: 992px !important; + --breakpoint-xl: 1200px !important; + --breakpoint-xxl: 1400px !important; + --font-family-sans-serif: var(--pgn-typography-font-family-sans-serif) !important; + --font-family-monospace: var(--pgn-typography-font-family-monospace) !important; + --pgn-size-border-width: 1px !important; + --pgn-size-border-radius-base: 0.375rem !important; + --pgn-size-border-radius-lg: 0.425rem !important; + --pgn-size-border-radius-sm: 0.25rem !important; + --pgn-size-rounded-pill: 50rem !important; + --pgn-size-alert-border-width: 0 !important; + --pgn-size-annotation-arrow-border-width: 0.5rem !important; + --pgn-size-annotation-max-width: 18.75rem !important; + --pgn-size-annotation-border-radius: 0.25rem !important; + --pgn-size-avatar-base: 3rem !important; + --pgn-size-avatar-xs: 1.5rem !important; + --pgn-size-avatar-sm: 2.25rem !important; + --pgn-size-avatar-lg: 4rem !important; + --pgn-size-avatar-xl: 6rem !important; + --pgn-size-avatar-xxl: 11.5rem !important; + --pgn-size-avatar-huge: 18.75rem !important; + --pgn-size-avatar-border-base: 1px !important; + --pgn-size-avatar-border-radius: 100% !important; + --pgn-size-badge-border-radius-base: 0.25rem !important; + --pgn-size-badge-border-radius-pill: 10rem !important; + --pgn-size-breadcrumb-border-radius-focus: 0.125rem !important; + --pgn-size-breadcrumb-border-axis-x-focus: 0.25rem !important; + --pgn-size-breadcrumb-border-axis-y-focus: 0.5rem !important; + --pgn-size-breadcrumb-border-width-focus: 0.0625rem !important; + --pgn-size-btn-focus-width: 2px !important; + --pgn-size-card-border-radius-logo: 0.25rem !important; + --pgn-size-card-focus-border-width: 2px !important; + --pgn-size-card-image-horizontal-width-max: 240px !important; + --pgn-size-card-image-vertical-max-height: 200px !important; + --pgn-size-card-logo-width: 7.25rem !important; + --pgn-size-card-logo-height: 4.125rem !important; + --pgn-size-carousel-control-width-base: 15% !important; + --pgn-size-carousel-control-width-icon: 20px !important; + --pgn-size-carousel-indicator-width: 30px !important; + --pgn-size-carousel-indicator-height-base: 3px !important; + --pgn-size-carousel-indicator-height-area-hit: 10px !important; + --pgn-size-carousel-caption-width: 70% !important; + --pgn-size-chip-border-radius: 0.375rem !important; + --pgn-size-chip-icon: 1.5rem !important; + --pgn-size-code-pre-scrollable-max-height: 340px !important; + --pgn-size-color-picker-sm: 2rem !important; + --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px) !important; + --pgn-size-container-max-width-xs: 464px !important; + --pgn-size-container-max-width-sm: 708px !important; + --pgn-size-container-max-width-md: 952px !important; + --pgn-size-container-max-width-lg: 1192px !important; + --pgn-size-container-max-width-xl: 1440px !important; + --pgn-size-data-table-border: 2px !important; + --pgn-size-data-table-dropdown-pagination-max-height: 60vh !important; + --pgn-size-data-table-dropdown-pagination-min-width: 6rem !important; + --pgn-size-data-table-layout-sidebar-width: 12rem !important; + --pgn-size-dropdown-min-width: 18rem !important; + --pgn-size-form-input-width-hover: 0.063rem !important; + --pgn-size-form-input-width-focus: 0.063rem !important; + --pgn-size-form-control-indicator-base: 1.25rem !important; + --pgn-size-form-control-indicator-bg: 100% !important; + --pgn-size-form-control-indicator-border-width: 0.125rem !important; + --pgn-size-form-control-range-track-width: 100% !important; + --pgn-size-form-control-range-track-height: 0.5rem !important; + --pgn-size-form-control-range-track-border-radius: 1rem !important; + --pgn-size-form-control-range-thumb-width: 1rem !important; + --pgn-size-form-control-range-thumb-border-base: 0 !important; + --pgn-size-form-control-range-thumb-border-radius: 1rem !important; + --pgn-size-form-control-icon-width: 2rem !important; + --pgn-size-form-control-border-checkbox-indicator-radius: 0 !important; + --pgn-size-form-control-border-radio-indicator-radius: 50% !important; + --pgn-size-form-grid-gutter-width: 0.625rem !important; + --pgn-size-form-autosuggest-icon-width: 2.4rem !important; + --pgn-size-form-autosuggest-spinner-width: 1.25rem !important; + --pgn-size-form-autosuggest-border-width: 0.125rem !important; + --pgn-size-form-border-radius-check-focus: 0.0625rem !important; + --pgn-size-form-border-radius-width: 0.125rem !important; + --pgn-size-icon-inline: 0.8em !important; + --pgn-size-icon-xs: 1rem !important; + --pgn-size-icon-sm: 1.25rem !important; + --pgn-size-icon-md: 1.5rem !important; + --pgn-size-icon-lg: 1.75rem !important; + --pgn-size-icon-button-diameter-md: 2.75rem !important; + --pgn-size-icon-button-diameter-sm: 2.25rem !important; + --pgn-size-menu-base-border-radius: 0.25em !important; + --pgn-size-menu-base-max-height: 16.813rem !important; + --pgn-size-menu-item-height: 3rem !important; + --pgn-size-menu-item-width-base: 19rem !important; + --pgn-size-menu-item-width-xs: 13.438rem !important; + --pgn-size-modal-xl: 1140px !important; + --pgn-size-modal-lg: 800px !important; + --pgn-size-modal-md: 500px !important; + --pgn-size-modal-sm: 400px !important; + --pgn-size-modal-content-border-width: 0px !important; + --pgn-size-nav-pills-link-border-width: 1px !important; + --pgn-size-nav-tabs-link-border-bottom-width: 0.188rem !important; + --pgn-size-nav-tabs-border-width: 2px !important; + --pgn-size-nav-tabs-border-radius: 0 !important; + --pgn-size-navbar-nav-scroll-max-height: 75vh !important; + --pgn-size-pagination-icon-width: 2.25rem !important; + --pgn-size-pagination-icon-height: 2.25rem !important; + --pgn-size-pagination-secondary-height-base: 2.75rem !important; + --pgn-size-pagination-secondary-height-sm: 2.25rem !important; + --pgn-size-pagination-reduced-dropdown-max-height: 60vh !important; + --pgn-size-pagination-reduced-dropdown-min-width: 6rem !important; + --pgn-size-pagination-toggle-border-base: 0.3125rem !important; + --pgn-size-pagination-toggle-border-sm: 0.25rem !important; + --pgn-size-pagination-focus-outline: 0 !important; + --pgn-size-popover-max-width: 480px !important; + --pgn-size-popover-icon-height: 1rem !important; + --pgn-size-popover-icon-width: 1rem !important; + --pgn-size-popover-arrow-width: 1rem !important; + --pgn-size-popover-arrow-height: 0.5rem !important; + --pgn-size-product-tour-checkpoint-width-border: 8px !important; + --pgn-size-product-tour-checkpoint-width-arrow: 15px !important; + --pgn-size-product-tour-checkpoint-width-max: 480px !important; + --pgn-size-progress-bar-height-base: 0.5rem !important; + --pgn-size-progress-bar-height-annotated: 0.3125rem !important; + --pgn-size-progress-bar-border-width: 0px !important; + --pgn-size-progress-bar-border-radius: 9999px !important; + --pgn-size-progress-bar-threshold-circle: 0.5625rem !important; + --pgn-size-search-field-border-width-base: 0.0625rem !important; + --pgn-size-search-field-border-width-focus: 0.3125rem !important; + --pgn-size-search-field-border-radius: 0 !important; + --pgn-size-spinner-base-width: 2rem !important; + --pgn-size-spinner-base-border-width: 0.25em !important; + --pgn-size-spinner-sm-width: 1rem !important; + --pgn-size-spinner-sm-border-width: 0.2em !important; + --pgn-size-stack-gap: 0 !important; + --pgn-size-stepper-header-height-min: 5.13rem !important; + --pgn-size-stepper-step-width-min: 0 !important; + --pgn-size-stepper-step-bubble-error-shadow-width: 3px !important; + --pgn-size-tabs-notification-height: 1rem !important; + --pgn-size-tabs-notification-width: 1rem !important; + --pgn-size-toast-max-width: 400px !important; + --pgn-size-toast-border-width: 1px !important; + --pgn-size-toast-border-radius: 0.25rem !important; + --pgn-size-tooltip-max-width: 200px !important; + --pgn-size-tooltip-arrow-height: 0.4rem !important; + --pgn-size-tooltip-arrow-width: 0.8rem !important; + --pgn-size-caret-width: 0.3em !important; + --pgn-size-input-btn-focus-width: 1px !important; + --pgn-size-breakpoint-xs: 0px !important; + --pgn-size-breakpoint-sm: 576px !important; + --pgn-size-breakpoint-md: 768px !important; + --pgn-size-breakpoint-lg: 992px !important; + --pgn-size-breakpoint-xl: 1200px !important; + --pgn-size-breakpoint-xxl: 1400px !important; + --pgn-spacing-action-row-gap-x: 0.5rem !important; + --pgn-spacing-action-row-gap-y: 0.5rem !important; + --pgn-spacing-alert-padding-y: 1.5rem !important; + --pgn-spacing-alert-padding-x: 1.5rem !important; + --pgn-spacing-alert-margin-bottom: 1rem !important; + --pgn-spacing-alert-icon-space: 0.8rem !important; + --pgn-spacing-annotation-padding: 0.5rem !important; + --pgn-spacing-annotation-arrow-side-margin: 0.25rem !important; + --pgn-spacing-avatar-button-padding-left-base: 0.25em !important; + --pgn-spacing-avatar-button-padding-left-sm: 0.25em !important; + --pgn-spacing-avatar-button-padding-left-lg: 0.25em !important; + --pgn-spacing-badge-padding-x-base: 0.5rem !important; + --pgn-spacing-badge-padding-x-pill: 0.6em !important; + --pgn-spacing-badge-padding-y: 0.125rem !important; + --pgn-spacing-breadcrumb-margin-left: 0.5rem !important; + --pgn-spacing-bubble-expandable-padding-y: 0 !important; + --pgn-spacing-bubble-expandable-padding-x: 0.25rem !important; + --pgn-spacing-btn-block-spacing-y: 0.5rem !important; + --pgn-spacing-card-spacer-x: 1.5rem !important; + --pgn-spacing-card-spacer-y: 0.75rem !important; + --pgn-spacing-card-margin-group: 12px !important; + --pgn-spacing-card-columns-count: 3 !important; + --pgn-spacing-card-columns-gap: 1.25rem !important; + --pgn-spacing-card-footer-action-gap: 0.5rem !important; + --pgn-spacing-card-loading-skeleton-spacer: 0.313rem !important; + --pgn-spacing-card-logo-left-offset-base: 1.5rem !important; + --pgn-spacing-card-logo-left-offset-horizontal: 0.4375rem !important; + --pgn-spacing-card-logo-bottom-offset-base: 1rem !important; + --pgn-spacing-card-logo-bottom-offset-horizontal: 0.4375rem !important; + --pgn-spacing-card-focus-border-offset: 5px !important; + --pgn-spacing-carousel-indicator-spacer: 3px !important; + --pgn-spacing-chip-margin-base: 0.125rem !important; + --pgn-spacing-chip-margin-icon: 0.25rem !important; + --pgn-spacing-chip-padding-y: 1px !important; + --pgn-spacing-chip-padding-x: 0.5rem !important; + --pgn-spacing-chip-outline-selected-distance-light: 3px !important; + --pgn-spacing-chip-outline-selected-distance-dark: 3px !important; + --pgn-spacing-chip-outline-focus-distance-light: 0.313rem !important; + --pgn-spacing-chip-outline-focus-distance-dark: 0.313rem !important; + --pgn-spacing-chip-outline-width: 3px !important; + --pgn-spacing-chip-carousel-controls-top-offset: 0.375rem !important; + --pgn-spacing-chip-carousel-container-padding-x: 0.625rem !important; + --pgn-spacing-chip-carousel-container-padding-y: 0.313rem !important; + --pgn-spacing-code-kbd-padding-y: 0.2rem !important; + --pgn-spacing-code-kbd-padding-x: 0.4rem !important; + --pgn-spacing-collapsible-card-spacer-y-base: 0.5rem !important; + --pgn-spacing-collapsible-card-spacer-x-base: 0.5rem !important; + --pgn-spacing-collapsible-card-spacer-left-body: 0.75rem !important; + --pgn-spacing-collapsible-card-spacer-icon: 2.5rem !important; + --pgn-spacing-collapsible-card-spacer-basic-y: 0.5rem !important; + --pgn-spacing-collapsible-card-spacer-basic-x: 0.5rem !important; + --pgn-spacing-collapsible-card-spacer-basic-icon: 0.625rem !important; + --pgn-spacing-data-table-padding-x: 0.75rem !important; + --pgn-spacing-data-table-padding-y: 0.75rem !important; + --pgn-spacing-data-table-padding-small: 0.5rem !important; + --pgn-spacing-data-table-padding-cell-x: 0.5rem !important; + --pgn-spacing-data-table-padding-cell-y: 0.75rem !important; + --pgn-spacing-data-table-footer-position: center !important; + --pgn-spacing-dropdown-spacer: 0.125rem !important; + --pgn-spacing-dropdown-padding-x-base: 0 !important; + --pgn-spacing-dropdown-padding-x-item: 1rem !important; + --pgn-spacing-dropdown-padding-y-base: 0.5rem !important; + --pgn-spacing-dropdown-padding-y-item: 0.25rem !important; + --pgn-spacing-dropdown-padding-header-y: 0.5rem !important; + --pgn-spacing-dropdown-close-container-top: 0.625rem !important; + --pgn-spacing-dropzone-padding: 1.5rem !important; + --pgn-spacing-dropzone-border-base: 1px !important; + --pgn-spacing-form-input-check-gutter: 1.25rem !important; + --pgn-spacing-form-input-check-margin-x-base: 0.25rem !important; + --pgn-spacing-form-input-check-margin-x-inline: 0.3125rem !important; + --pgn-spacing-form-input-check-margin-y: 0.3rem !important; + --pgn-spacing-form-text-margin-top: 0.25rem !important; + --pgn-spacing-form-check-inline-margin-x: 0.75rem !important; + --pgn-spacing-form-check-position-axis: 0.375rem !important; + --pgn-spacing-form-group-margin-bottom: 1rem !important; + --pgn-spacing-form-control-gutter: 0.5rem !important; + --pgn-spacing-form-control-spacer-x: 1rem !important; + --pgn-spacing-form-control-select-indicator-padding: 1rem !important; + --pgn-spacing-form-control-select-feedback-icon-position-position-y: center !important; + --pgn-spacing-form-control-select-feedback-icon-position-position-x: right !important; + --pgn-spacing-form-control-select-feedback-icon-position-offset-y: 0 !important; + --pgn-spacing-form-control-select-feedback-tooltip-padding-y: 0.25rem !important; + --pgn-spacing-form-control-select-feedback-tooltip-padding-x: 0.5rem !important; + --pgn-spacing-form-control-select-icon-padding: 0.5625rem !important; + --pgn-spacing-image-thumbnail-padding: 0.25rem !important; + --pgn-spacing-menu-item-icon-margin-left: 0.25em !important; + --pgn-spacing-modal-inner-padding-base: 1.5rem !important; + --pgn-spacing-modal-inner-padding-bottom: 0.7rem !important; + --pgn-spacing-modal-footer-padding-base-x: 1.5rem !important; + --pgn-spacing-modal-footer-padding-y: 1rem !important; + --pgn-spacing-modal-header-padding-base-x: 1.5rem !important; + --pgn-spacing-modal-header-padding-y: 1rem !important; + --pgn-spacing-modal-dialog-margin: 1.5rem !important; + --pgn-spacing-nav-link-padding-y: 0.5rem !important; + --pgn-spacing-nav-link-padding-x: 1rem !important; + --pgn-spacing-nav-link-distance-to-border: 4px !important; + --pgn-spacing-navbar-padding-x-nav-link: 0.5rem !important; + --pgn-spacing-navbar-toggler-padding-y: 0.25rem !important; + --pgn-spacing-navbar-toggler-padding-x: 0.75rem !important; + --pgn-spacing-pagination-padding-y-base: 0.625rem !important; + --pgn-spacing-pagination-padding-y-sm: 0.8rem !important; + --pgn-spacing-pagination-padding-y-lg: 0.75rem !important; + --pgn-spacing-pagination-padding-x-base: 1rem !important; + --pgn-spacing-pagination-padding-x-sm: 0.6rem !important; + --pgn-spacing-pagination-padding-x-lg: 1.5rem !important; + --pgn-spacing-popover-header-padding-y: 0.5rem !important; + --pgn-spacing-popover-header-padding-x: 1rem !important; + --pgn-spacing-popover-icon-margin-right: 0.5rem !important; + --pgn-spacing-progress-bar-hint-annotation-gap: 0.5rem !important; + --pgn-spacing-search-field-margin-button: 0.5rem !important; + --pgn-spacing-selectable-box-padding: 1rem !important; + --pgn-spacing-selectable-box-border-radius: 0.25rem !important; + --pgn-spacing-selectable-box-box-space: 0.75rem !important; + --pgn-spacing-vertical-align: 0.125em !important; + --pgn-spacing-stepper-header-padding-y: 0.75rem !important; + --pgn-spacing-stepper-header-step-padding: 0.25rem !important; + --pgn-spacing-stepper-header-step-list-padding-y: 0.25rem !important; + --pgn-spacing-stepper-header-step-list-padding-x: 0 !important; + --pgn-spacing-stepper-header-step-list-margin: 0 !important; + --pgn-spacing-sticky-offset: 0 !important; + --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: 0.7rem !important; + --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: 0.625rem !important; + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: 0.625rem !important; + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px !important; + --pgn-spacing-toast-padding-x: 0.75rem !important; + --pgn-spacing-toast-padding-y: 0.25rem !important; + --pgn-spacing-toast-container-gutter-lg: 1.25rem !important; + --pgn-spacing-toast-container-gutter-sm: 0.625rem !important; + --pgn-spacing-tooltip-padding-y: 0.5rem !important; + --pgn-spacing-tooltip-padding-x: 0.5rem !important; + --pgn-spacing-tooltip-margin: 0 !important; + --pgn-spacing-caret-base: 0.255em !important; + --pgn-spacing-caret-vertical-align: 0.255em !important; + --pgn-spacing-headings-margin-bottom: 0.5rem !important; + --pgn-spacing-input-btn-padding-y: 0.5625rem !important; + --pgn-spacing-input-btn-padding-x: 1rem !important; + --pgn-spacing-input-btn-padding-sm-y: 0.4375rem !important; + --pgn-spacing-input-btn-padding-sm-x: 0.75rem !important; + --pgn-spacing-input-btn-padding-lg-y: 0.6875rem !important; + --pgn-spacing-input-btn-padding-lg-x: 1.25rem !important; + --pgn-spacing-list-inline-padding: 0.5rem !important; + --pgn-spacing-list-group-item-padding-y: 0.75rem !important; + --pgn-spacing-list-group-item-padding-x: 1.25rem !important; + --pgn-spacing-paragraph-margin-bottom: 1rem !important; + --pgn-spacing-mark-padding: 0.2em !important; + --pgn-spacing-spacer-0: 0 !important; + --pgn-spacing-spacer-base: 1rem !important; + --pgn-spacing-label-margin-bottom: 0.5rem !important; + --pgn-spacing-table-cell-padding-base: 0.75rem !important; + --pgn-spacing-table-cell-padding-sm: 0.3rem !important; + --pgn-spacing-grid-gutter-width: 24px !important; + --pgn-typography-alert-font-size: 0.875rem !important; + --pgn-typography-alert-line-height: 1.5rem !important; + --pgn-typography-badge-font-size: 75% !important; + --pgn-typography-dropdown-item-text-decoration: none !important; + --pgn-typography-image-figure-caption-font-size: 90% !important; + --pgn-typography-menu-select-btn-link-text-decoration-line: underline !important; + --pgn-typography-menu-select-btn-link-text-decoration-thickness: 0.125rem !important; + --pgn-typography-nav-link-font-weight: 500 !important; + --pgn-typography-nav-link-text-decoration: none !important; + --pgn-typography-pagination-font-size-sm: 0.875rem !important; + --pgn-typography-pagination-line-height: 1.5rem !important; + --pgn-typography-spacer-line-height: 1px !important; + --pgn-typography-toast-font-size: 0.875rem !important; + --pgn-typography-headings-font-family: inherit !important; + --pgn-typography-headings-line-height: 1.5 !important; + --pgn-typography-headings-font-family: "Rockford Sans", "Segoe UI", Roboto, "Open Sans", -apple-system, sans-serif !important; + --pgn-typography-input-btn-font-family: inherit !important; + --pgn-typography-input-btn-font-size-base: 1.125rem !important; + --pgn-typography-input-btn-font-size-sm: 0.875rem !important; + --pgn-typography-input-btn-font-size-lg: 1.325rem !important; + --pgn-typography-input-btn-line-height-base: 1.3333 !important; + --pgn-typography-input-btn-line-height-sm: 1.4286 !important; + --pgn-typography-link-decoration-base: none !important; + --pgn-typography-link-decoration-hover: underline !important; + --pgn-typography-link-decoration-inline-base: underline !important; + --pgn-typography-link-decoration-inline-hover: underline !important; + --pgn-typography-link-decoration-muted-base: none !important; + --pgn-typography-link-decoration-muted-hover: underline !important; + --pgn-typography-link-decoration-muted-inline-base: underline !important; + --pgn-typography-link-decoration-muted-inline-hover: underline !important; + --pgn-typography-link-decoration-brand-base: none !important; + --pgn-typography-link-decoration-brand-hover: underline !important; + --pgn-typography-link-decoration-brand-inline-base: underline !important; + --pgn-typography-link-decoration-brand-inline-hover: underline !important; + --pgn-typography-font-family-sans-serif: "Rockford Sans", "Segoe UI", Roboto, "Open Sans", -apple-system, sans-serif !important; + --pgn-typography-font-family-serif: serif !important; + --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; + --pgn-typography-font-size-base: 1.125rem !important; + --pgn-typography-font-size-sm: 87.5% !important; + --pgn-typography-font-size-xs: 75% !important; + --pgn-typography-font-size-micro: 0.688rem !important; + --pgn-typography-font-size-h1-base: 3rem !important; + --pgn-typography-font-size-h1-mobile: 2.25rem !important; + --pgn-typography-font-size-h2-base: 1.875rem !important; + --pgn-typography-font-size-h3-base: 1.125rem !important; + --pgn-typography-font-size-h4-base: 1.125rem !important; + --pgn-typography-font-size-h5-base: 0.875rem !important; + --pgn-typography-font-size-h6-base: 0.75rem !important; + --pgn-typography-font-size-display-1: 3.75rem !important; + --pgn-typography-font-size-display-2: 4.875rem !important; + --pgn-typography-font-size-display-3: 5.625rem !important; + --pgn-typography-font-size-display-4: 7.5rem !important; + --pgn-typography-font-size-display-mobile-1: 3.25rem !important; + --pgn-typography-font-weight-lighter: lighter !important; + --pgn-typography-font-weight-light: 300 !important; + --pgn-typography-font-weight-normal: 400 !important; + --pgn-typography-font-weight-semi-bold: 500 !important; + --pgn-typography-font-weight-bold: 700 !important; + --pgn-typography-font-weight-bolder: bolder !important; + --pgn-typography-font-weight-lead: inherit !important; + --pgn-typography-font-weight-table-th: 700 !important; + --pgn-typography-line-height-base: 1.5556 !important; + --pgn-typography-line-height-lg: 1.5 !important; + --pgn-typography-line-height-sm: 1.5 !important; + --pgn-typography-line-height-micro: 0.938rem !important; + --pgn-typography-line-height-display-base: 1 !important; + --pgn-typography-line-height-display-mobile: 3.5rem !important; + --pgn-transition-badge: none !important; + --pgn-transition-btn: none !important; + --pgn-transition-carousel-base-property: transform !important; + --pgn-transition-carousel-base-timing-function: ease-in-out !important; + --pgn-transition-carousel-base-delay: 0ms !important; + --pgn-transition-carousel-base-behavior: normal !important; + --pgn-transition-carousel-duration: 0.6s !important; + --pgn-transition-carousel-indicator-property: opacity !important; + --pgn-transition-carousel-indicator-timing-function: ease !important; + --pgn-transition-carousel-indicator-delay: 0ms !important; + --pgn-transition-carousel-indicator-behavior: normal !important; + --pgn-transition-carousel-control-property: opacity !important; + --pgn-transition-carousel-control-duration: 0.15s !important; + --pgn-transition-carousel-control-timing-function: ease !important; + --pgn-transition-carousel-control-delay: 0ms !important; + --pgn-transition-carousel-control-behavior: normal !important; + --pgn-transition-form-input-1-property: border-color !important; + --pgn-transition-form-input-1-duration: 0.15s !important; + --pgn-transition-form-input-1-timing-function: ease-in-out !important; + --pgn-transition-form-input-1-delay: 0s !important; + --pgn-transition-form-input-1-behavior: normal !important; + --pgn-transition-form-input-2-property: box-shadow !important; + --pgn-transition-form-input-2-duration: 0.15s !important; + --pgn-transition-form-input-2-timing-function: ease-in-out !important; + --pgn-transition-form-input-2-delay: 0s !important; + --pgn-transition-form-input-2-behavior: normal !important; + --pgn-transition-form-control-1-property: background-color !important; + --pgn-transition-form-control-1-duration: 0.15s !important; + --pgn-transition-form-control-1-timing-function: ease-in-out !important; + --pgn-transition-form-control-1-delay: 0s !important; + --pgn-transition-form-control-1-behavior: normal !important; + --pgn-transition-form-control-2-property: border-color !important; + --pgn-transition-form-control-2-duration: 0.15s !important; + --pgn-transition-form-control-2-timing-function: ease-in-out !important; + --pgn-transition-form-control-2-delay: 0s !important; + --pgn-transition-form-control-2-behavior: normal !important; + --pgn-transition-form-control-3-property: box-shadow !important; + --pgn-transition-form-control-3-duration: 0.15s !important; + --pgn-transition-form-control-3-timing-function: ease-in-out !important; + --pgn-transition-form-control-3-delay: 0s !important; + --pgn-transition-form-control-3-behavior: normal !important; + --pgn-transition-progress-bar-animation-timing-duration: 1s !important; + --pgn-transition-progress-bar-animation-timing-timing-function: linear !important; + --pgn-transition-progress-bar-animation-timing-delay: 0s !important; + --pgn-transition-progress-bar-animation-timing-iteration-count: infinite !important; + --pgn-transition-progress-bar-transition-property: width !important; + --pgn-transition-progress-bar-transition-duration: 0.6s !important; + --pgn-transition-progress-bar-transition-timing-function: ease !important; + --pgn-transition-progress-bar-transition-delay: 0s !important; + --pgn-transition-progress-bar-transition-behavior: normal !important; + --pgn-transition-base-property: all !important; + --pgn-transition-base-duration: 0.2s !important; + --pgn-transition-base-timing-function: ease-in-out !important; + --pgn-transition-base-delay: 0s !important; + --pgn-transition-base-behavior: normal !important; + --pgn-transition-fade-property: opacity !important; + --pgn-transition-fade-duration: 0.15s !important; + --pgn-transition-fade-timing-function: linear !important; + --pgn-transition-fade-delay: 0s !important; + --pgn-transition-fade-behavior: normal !important; + --pgn-transition-collapse-height-property: height !important; + --pgn-transition-collapse-height-duration: 0.35s !important; + --pgn-transition-collapse-height-timing-function: ease !important; + --pgn-transition-collapse-height-delay: 0s !important; + --pgn-transition-collapse-height-behavior: normal !important; + --pgn-transition-collapse-width-property: width !important; + --pgn-transition-collapse-width-duration: 0.35s !important; + --pgn-transition-collapse-width-timing-function: ease !important; + --pgn-transition-collapse-width-delay: 0s !important; + --pgn-transition-collapse-width-behavior: normal !important; + --pgn-elevation-dropdown-zindex: 1000 !important; + --pgn-elevation-modal-backdrop-zindex: 1040 !important; + --pgn-elevation-modal-zindex: 1050 !important; + --pgn-elevation-popover-zindex: 1060 !important; + --pgn-elevation-product-tour-checkpoint-zindex: 1060 !important; + --pgn-elevation-sheet-zindex-backdrop: 1031 !important; + --pgn-elevation-sheet-zindex-main: 1032 !important; + --pgn-elevation-tooltip-zindex: 1070 !important; + --pgn-elevation-zindex-0: 0 !important; + --pgn-elevation-zindex-200: 200 !important; + --pgn-elevation-zindex-400: 400 !important; + --pgn-elevation-zindex-600: 600 !important; + --pgn-elevation-zindex-800: 800 !important; + --pgn-elevation-zindex-1000: 1000 !important; + --pgn-elevation-zindex-1200: 1200 !important; + --pgn-elevation-zindex-1400: 1400 !important; + --pgn-elevation-zindex-1600: 1600 !important; + --pgn-elevation-zindex-1800: 1800 !important; + --pgn-elevation-zindex-2000: 2000 !important; + --pgn-elevation-zindex-sticky: 1020 !important; + --pgn-elevation-zindex-fixed: 1030 !important; + --pgn-other-form-control-cursor: auto !important; + --pgn-other-form-control-range-track-cursor: pointer !important; + --pgn-other-form-control-custom-file-lang: en !important; + --pgn-other-form-control-custom-file-content: Browse !important; + --pgn-theme-interval: 8% !important; + --pgn-print-page-size: a3 !important; + --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base) !important; + --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width) !important; + --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base) !important; + --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg) !important; + --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm) !important; + --pgn-size-card-border-width: var(--pgn-size-border-width) !important; + --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base) !important; + --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base)) !important; + --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max) !important; + --pgn-size-dropdown-border-width: var(--pgn-size-border-width) !important; + --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base) !important; + --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base) !important; + --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg) !important; + --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm) !important; + --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75) !important; + --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4) !important; + --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2) !important; + --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base) !important; + --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width) !important; + --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus) !important; + --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width) !important; + --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width) !important; + --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base) !important; + --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em) !important; + --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width) !important; + --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base) !important; + --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg) !important; + --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base) !important; + --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width) !important; + --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width) !important; + --pgn-size-pagination-border-width: var(--pgn-size-border-width) !important; + --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm) !important; + --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg) !important; + --pgn-size-popover-border-width: var(--pgn-size-border-width) !important; + --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm) !important; + --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow) !important; + --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow) !important; + --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width) !important; + --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width) !important; + --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base) !important; + --pgn-size-hr-border-width: var(--pgn-size-border-width) !important; + --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base) !important; + --pgn-size-input-btn-border-width: var(--pgn-size-border-width) !important; + --pgn-size-list-group-border-width: var(--pgn-size-border-width) !important; + --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base) !important; + --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y) !important; + --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y) !important; + --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !important; + --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x) !important; + --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x) !important; + --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !important; + --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width) !important; + --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)) !important; + --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group) !important; + --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group) !important; + --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y) !important; + --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y) !important; + --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x) !important; + --pgn-spacing-dropdown-padding-header-x: var(--pgn-spacing-dropdown-padding-x-item) !important; + --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2) !important; + --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y) !important; + --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !important; + --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y) !important; + --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x) !important; + --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !important; + --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x) !important; + --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top) !important; + --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left) !important; + --pgn-spacing-modal-footer-padding-base-y: var(--pgn-spacing-modal-footer-padding-y) !important; + --pgn-spacing-modal-header-padding-base-y: var(--pgn-spacing-modal-header-padding-y) !important; + --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2) !important; + --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base) !important; + --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y) !important; + --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x) !important; + --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base) !important; + --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base) !important; + --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base) !important; + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base) !important; + --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25) !important; + --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5) !important; + --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base) !important; + --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3) !important; + --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5) !important; + --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375) !important; + --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75) !important; + --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2) !important; + --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4) !important; + --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal) !important; + --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm) !important; + --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm) !important; + --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold) !important; + --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family) !important; + --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base) !important; + --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm) !important; + --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg) !important; + --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal) !important; + --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base) !important; + --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm) !important; + --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs) !important; + --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5) !important; + --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold) !important; + --pgn-typography-code-font-size: var(--pgn-typography-font-size-sm) !important; + --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold) !important; + --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base) !important; + --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-xs) !important; + --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family) !important; + --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base) !important; + --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm) !important; + --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg) !important; + --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base) !important; + --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm) !important; + --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-sm) !important; + --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm) !important; + --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base) !important; + --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2) !important; + --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm) !important; + --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75) !important; + --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs) !important; + --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm) !important; + --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-normal) !important; + --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg) !important; + --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold) !important; + --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm) !important; + --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25) !important; + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif) !important; + --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25) !important; + --pgn-typography-font-size-h2-mobile: var(--pgn-typography-font-size-h2-base) !important; + --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base) !important; + --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base) !important; + --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base) !important; + --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base) !important; + --pgn-typography-font-size-display-mobile-2: var(--pgn-typography-font-size-display-mobile-1) !important; + --pgn-typography-font-size-display-mobile-3: var(--pgn-typography-font-size-display-mobile-1) !important; + --pgn-typography-font-size-display-mobile-4: var(--pgn-typography-font-size-display-mobile-1) !important; + --pgn-typography-font-weight-base: 200 !important; + --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold) !important; + --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold) !important; + --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold) !important; + --pgn-typography-font-weight-display-4: var(--pgn-typography-font-weight-bold) !important; + --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration) !important; + --pgn-transition-carousel-indicator-duration: var(--pgn-transition-carousel-duration) !important; + --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width) !important; + --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)) !important; + --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base) !important; + --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) !important; + --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base) !important; + --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)) !important; + --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border)) !important; + --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border)) !important; + --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2) !important; + --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base)) !important; + --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2)) !important; + --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width) !important; + --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base) !important; + --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base) !important; + --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2) !important; + --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3) !important; + --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)) !important; + --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3) !important; + --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3) !important; + --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base) !important; + --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm) !important; + --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg) !important; + --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base) !important; + --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm) !important; + --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg) !important; + --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base) !important; + --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base) !important; + --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base) !important; + --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base) !important; + --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2) !important; + --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg) !important; + --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size) !important; + --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base) !important; + --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg) !important; + --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family) !important; + --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base) !important; + --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm) !important; + --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg) !important; + --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base) !important; + --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base) !important; + --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family) !important; + --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg) !important; + --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg) !important; + --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base) !important; + --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2) !important; + --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border)) !important; + --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base) !important; + --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm) !important; + --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half) !important; + --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border) !important; + --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border) !important; + --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base) !important; + --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base) !important; + --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width) !important; + --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base)) !important; + --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)) !important; + --pgn-spacing-form-control-select-feedback-icon-position-offset-x: calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)) !important; + --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight) !important; + --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight) !important; + --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg) !important; + /** + * TRANSITION + */ + --pgn-transition-base: + var(--pgn-transition-base-property) + var(--pgn-transition-base-duration) + var(--pgn-transition-base-timing-function) + var(--pgn-transition-base-delay) + var(--pgn-transition-base-behavior) !important; + --pgn-transition-fade: + var(--pgn-transition-fade-property) + var(--pgn-transition-fade-duration) + var(--pgn-transition-fade-timing-function) + var(--pgn-transition-fade-delay) + var(--pgn-transition-fade-behavior) !important; + --pgn-transition-collapse-height: + var(--pgn-transition-collapse-height-property) + var(--pgn-transition-collapse-height-duration) + var(--pgn-transition-collapse-height-timing-function) + var(--pgn-transition-collapse-height-delay) + var(--pgn-transition-collapse-height-behavior) !important; + --pgn-transition-collapse-width: + var(--pgn-transition-collapse-width-property) + var(--pgn-transition-collapse-width-duration) + var(--pgn-transition-collapse-width-timing-function) + var(--pgn-transition-collapse-width-delay) + var(--pgn-transition-collapse-width-behavior) !important; + --pgn-transition-form-input: + var(--pgn-transition-form-input-1-property) + var(--pgn-transition-form-input-1-duration) + var(--pgn-transition-form-input-1-timing-function) + var(--pgn-transition-form-input-1-delay) + var(--pgn-transition-form-input-1-behavior), + var(--pgn-transition-form-input-2-property) + var(--pgn-transition-form-input-2-duration) + var(--pgn-transition-form-input-2-timing-function) + var(--pgn-transition-form-input-2-delay) + var(--pgn-transition-form-input-2-behavior) !important; + --pgn-elevation-annotation-box-shadow: + drop-shadow( + var(--pgn-elevation-annotation-box-shadow-1-offset-x) + var(--pgn-elevation-annotation-box-shadow-1-offset-y) + var(--pgn-elevation-annotation-box-shadow-1-blur) + var(--pgn-elevation-annotation-box-shadow-1-color) + ) + drop-shadow( + var(--pgn-elevation-annotation-box-shadow-2-offset-x) + var(--pgn-elevation-annotation-box-shadow-2-offset-y) + var(--pgn-elevation-annotation-box-shadow-2-blur) + var(--pgn-elevation-annotation-box-shadow-2-color) + ) !important; + --pgn-transition-carousel-base: + var(--pgn-transition-carousel-base-property) + var(--pgn-transition-carousel-base-duration) + var(--pgn-transition-carousel-base-timing-function) + var(--pgn-transition-carousel-base-delay) + var(--pgn-transition-carousel-base-behavior) !important; + --pgn-transition-carousel-indicator: + var(--pgn-transition-carousel-indicator-property) + var(--pgn-transition-carousel-indicator-duration) + var(--pgn-transition-carousel-indicator-timing-function) + var(--pgn-transition-carousel-indicator-delay) + var(--pgn-transition-carousel-indicator-behavior) !important; + --pgn-transition-carousel-control: + var(--pgn-transition-carousel-control-property) + var(--pgn-transition-carousel-control-duration) + var(--pgn-transition-carousel-control-timing-function) + var(--pgn-transition-carousel-control-delay) + var(--pgn-transition-carousel-control-behavior) !important; + --pgn-elevation-close-button-text-shadow: + var(--pgn-elevation-close-button-text-shadow-offset-x) + var(--pgn-elevation-close-button-text-shadow-offset-y) + var(--pgn-elevation-close-button-text-shadow-blur) + var(--pgn-elevation-close-button-text-shadow-color) !important; + --pgn-spacing-dropdown-padding-header: + var(--pgn-spacing-dropdown-padding-header-y) + var(--pgn-spacing-dropdown-padding-header-x) !important; + --pgn-elevation-form-control-select-border-focus: + var(--pgn-elevation-form-control-select-border-focus-offset-x) + var(--pgn-elevation-form-control-select-border-focus-offset-y) + var(--pgn-elevation-form-control-select-border-focus-blur) + var(--pgn-elevation-form-control-select-border-focus-spread) + var(--pgn-elevation-form-control-select-border-focus-color) !important; + --pgn-elevation-form-control-file-focus: + var(--pgn-elevation-form-control-file-focus-offset-x) + var(--pgn-elevation-form-control-file-focus-offset-y) + var(--pgn-elevation-form-control-file-focus-blur) + var(--pgn-elevation-form-control-file-focus-spread) + var(--pgn-elevation-form-control-file-focus-color) !important; + --pgn-transition-form-control: + var(--pgn-transition-form-control-1-property) + var(--pgn-transition-form-control-1-duration) + var(--pgn-transition-form-control-1-timing-function) + var(--pgn-transition-form-control-1-delay) + var(--pgn-transition-form-control-1-behavior), + var(--pgn-transition-form-control-2-property) + var(--pgn-transition-form-control-2-duration) + var(--pgn-transition-form-control-2-timing-function) + var(--pgn-transition-form-control-2-delay) + var(--pgn-transition-form-control-2-behavior), + var(--pgn-transition-form-control-3-property) + var(--pgn-transition-form-control-3-duration) + var(--pgn-transition-form-control-3-timing-function) + var(--pgn-transition-form-control-3-delay) + var(--pgn-transition-form-control-3-behavior) !important; + --pgn-elevation-form-input-focus: + var(--pgn-elevation-form-input-focus-offset-x) + var(--pgn-elevation-form-input-focus-offset-y) + var(--pgn-elevation-form-input-focus-blur) + var(--pgn-elevation-form-input-focus-spread) + var(--pgn-elevation-form-input-focus-color) !important; + --pgn-spacing-form-control-select-feedback-icon-position: + var(--pgn-spacing-form-control-select-feedback-icon-position-position-y) + var(--pgn-spacing-form-control-select-feedback-icon-position-position-x) + var(--pgn-spacing-form-control-select-feedback-icon-position-offset-x) + var(--pgn-spacing-form-control-select-feedback-icon-position-offset-y) !important; + --pgn-other-content-form-control-select-bg: + var(--pgn-other-content-form-control-select-bg-image) + var(--pgn-other-content-form-control-select-bg-position-x) + var(--pgn-other-content-form-control-select-bg-offset-y) + var(--pgn-other-content-form-control-select-bg-position-y) + / var(--pgn-other-content-form-control-select-bg-color) !important; + --pgn-elevation-form-control-indicator-checked-focus: + var(--pgn-elevation-form-control-indicator-checked-focus-offset-x) + var(--pgn-elevation-form-control-indicator-checked-focus-offset-y) + var(--pgn-elevation-form-control-indicator-checked-focus-blur) + var(--pgn-elevation-form-control-indicator-checked-focus-spread) + var(--pgn-elevation-form-control-indicator-checked-focus-color) !important; + --pgn-elevation-menu-box-shadow: + var(--pgn-elevation-menu-box-shadow-offset-x) + var(--pgn-elevation-menu-box-shadow-offset-y) + var(--pgn-elevation-menu-box-shadow-blur) + var(--pgn-elevation-menu-box-shadow-color) !important; + --pgn-elevation-modal-content-box-shadow-sm-up: + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color), + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color) !important; + --pgn-spacing-modal-footer-padding-base: + var(--pgn-spacing-modal-footer-padding-base-y) + var(--pgn-spacing-modal-footer-padding-base-x) !important; + --pgn-spacing-modal-header-padding-base: + var(--pgn-spacing-modal-header-padding-base-y) + var(--pgn-spacing-modal-header-padding-base-x) !important; + --pgn-border-color-nav-tabs-link-border-hover: + var(--pgn-border-color-nav-tabs-link-border-hover-top) + var(--pgn-border-color-nav-tabs-link-border-hover-right) + var(--pgn-border-color-nav-tabs-link-border-hover-bottom) + var(--pgn-border-color-nav-tabs-link-border-hover-left) !important; + --pgn-transition-progress-bar-animation-timing: + var(--pgn-transition-progress-bar-animation-timing-duration) + var(--pgn-transition-progress-bar-animation-timing-timing-function) + var(--pgn-transition-progress-bar-animation-timing-iteration-count) + var(--pgn-transition-progress-bar-animation-timing-delay) !important; + --pgn-transition-progress-bar-transition: + var(--pgn-transition-progress-bar-transition-property) + var(--pgn-transition-progress-bar-transition-duration) + var(--pgn-transition-progress-bar-transition-timing-function) + var(--pgn-transition-progress-bar-transition-delay) + var(--pgn-transition-progress-bar-transition-behavior) !important; + --pgn-elevation-tooltip-box-shadow: + drop-shadow( + var(--pgn-elevation-tooltip-box-shadow-1-offset-x) + var(--pgn-elevation-tooltip-box-shadow-1-offset-y) + var(--pgn-elevation-tooltip-box-shadow-1-blur) + var(--pgn-elevation-tooltip-box-shadow-1-color) + ) + drop-shadow( + var(--pgn-elevation-tooltip-box-shadow-2-offset-x) + var(--pgn-elevation-tooltip-box-shadow-2-offset-y) + var(--pgn-elevation-tooltip-box-shadow-2-blur) + var(--pgn-elevation-tooltip-box-shadow-2-color) + ) !important; + --pgn-elevation-data-table-box-shadow: + var(--pgn-elevation-data-table-box-shadow-offset-x) + var(--pgn-elevation-data-table-box-shadow-offset-y) + var(--pgn-elevation-data-table-box-shadow-blur) + var(--pgn-elevation-data-table-box-shadow-color) !important; + --pgn-spacing-data-table-padding-cell: + var(--pgn-spacing-data-table-padding-cell-x) + var(--pgn-spacing-data-table-padding-cell-y) !important; + --pgn-elevation-icon-button-box-shadow-primary-base: + var(--pgn-elevation-icon-button-box-shadow-primary-base-inset) + var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-primary-base-blur) + var(--pgn-elevation-icon-button-box-shadow-primary-base-spread) + var(--pgn-elevation-icon-button-box-shadow-primary-base-color) !important; + --pgn-elevation-icon-button-box-shadow-primary-inverse: + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color) !important; + --pgn-elevation-icon-button-box-shadow-secondary-base: + var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-color) !important; + --pgn-elevation-icon-button-box-shadow-secondary-inverse: + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color) !important; + --pgn-elevation-icon-button-box-shadow-brand-base: + var(--pgn-elevation-icon-button-box-shadow-brand-base-inset) + var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-brand-base-blur) + var(--pgn-elevation-icon-button-box-shadow-brand-base-spread) + var(--pgn-elevation-icon-button-box-shadow-brand-base-color) !important; + --pgn-elevation-icon-button-box-shadow-brand-inverse: + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color) !important; + --pgn-elevation-icon-button-box-shadow-success-base: + var(--pgn-elevation-icon-button-box-shadow-success-base-inset) + var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-success-base-blur) + var(--pgn-elevation-icon-button-box-shadow-success-base-spread) + var(--pgn-elevation-icon-button-box-shadow-success-base-color) !important; + --pgn-elevation-icon-button-box-shadow-success-inverse: + var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-color) !important; + --pgn-elevation-icon-button-box-shadow-warning-base: + var(--pgn-elevation-icon-button-box-shadow-warning-base-inset) + var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-warning-base-blur) + var(--pgn-elevation-icon-button-box-shadow-warning-base-spread) + var(--pgn-elevation-icon-button-box-shadow-warning-base-color) !important; + --pgn-elevation-icon-button-box-shadow-warning-inverse: + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color) !important; + --pgn-elevation-icon-button-box-shadow-danger-base: + var(--pgn-elevation-icon-button-box-shadow-danger-base-inset) + var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-danger-base-blur) + var(--pgn-elevation-icon-button-box-shadow-danger-base-spread) + var(--pgn-elevation-icon-button-box-shadow-danger-base-color) !important; + --pgn-elevation-icon-button-box-shadow-danger-inverse: + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color) !important; + --pgn-elevation-icon-button-box-shadow-light-base: + var(--pgn-elevation-icon-button-box-shadow-light-base-inset) + var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-light-base-blur) + var(--pgn-elevation-icon-button-box-shadow-light-base-spread) + var(--pgn-elevation-icon-button-box-shadow-light-base-color) !important; + --pgn-elevation-icon-button-box-shadow-light-inverse: + var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-color) !important; + --pgn-elevation-icon-button-box-shadow-dark-base: + var(--pgn-elevation-icon-button-box-shadow-dark-base-inset) + var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-dark-base-blur) + var(--pgn-elevation-icon-button-box-shadow-dark-base-spread) + var(--pgn-elevation-icon-button-box-shadow-dark-base-color) !important; + --pgn-elevation-icon-button-box-shadow-dark-inverse: + var(--pgn-elevation-icon-button-box-shadow-dark-inverse) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color) !important; + --pgn-elevation-icon-button-box-shadow-black-base: + var(--pgn-elevation-icon-button-box-shadow-black-base-inset) + var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-black-base-blur) + var(--pgn-elevation-icon-button-box-shadow-black-base-spread) + var(--pgn-elevation-icon-button-box-shadow-black-base-color) !important; + --pgn-elevation-icon-button-box-shadow-black-inverse: + var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-color) !important; + --pgn-elevation-toast-box-shadow: + var(--pgn-elevation-toast-box-shadow-1-offset-x) + var(--pgn-elevation-toast-box-shadow-1-offset-y) + var(--pgn-elevation-toast-box-shadow-1-blur) + var(--pgn-elevation-toast-box-shadow-1-color), + var(--pgn-elevation-toast-box-shadow-2-offset-x) + var(--pgn-elevation-toast-box-shadow-2-offset-y) + var(--pgn-elevation-toast-box-shadow-2-blur) + var(--pgn-elevation-toast-box-shadow-2-color) !important; + --pgn-elevation-sticky-shadow-bottom: + var(--pgn-elevation-sticky-shadow-bottom-1-offset-x) + var(--pgn-elevation-sticky-shadow-bottom-1-offset-y) + var(--pgn-elevation-sticky-shadow-bottom-1-blur) + var(--pgn-elevation-sticky-shadow-bottom-1-color), + var(--pgn-elevation-sticky-shadow-bottom-2-offset-x) + var(--pgn-elevation-sticky-shadow-bottom-2-offset-y) + var(--pgn-elevation-sticky-shadow-bottom-2-blur) + var(--pgn-elevation-sticky-shadow-bottom-2-color) !important; + --pgn-elevation-dropzone-hover: + var(--pgn-elevation-dropzone-hover-inset) + var(--pgn-elevation-dropzone-hover-offset-x) + var(--pgn-elevation-dropzone-hover-offset-y) + var(--pgn-elevation-dropzone-hover-blur) + var(--pgn-elevation-dropzone-hover-spread) + var(--pgn-elevation-dropzone-hover-color) !important; + --pgn-elevation-dropzone-focus: + var(--pgn-elevation-dropzone-focus-inset) + var(--pgn-elevation-dropzone-focus-offset-x) + var(--pgn-elevation-dropzone-focus-offset-y) + var(--pgn-elevation-dropzone-focus-blur) + var(--pgn-elevation-dropzone-focus-spread) + var(--pgn-elevation-dropzone-focus-color) !important; + --pgn-elevation-dropzone-error: + var(--pgn-elevation-dropzone-error-inset) + var(--pgn-elevation-dropzone-error-offset-x) + var(--pgn-elevation-dropzone-error-offset-y) + var(--pgn-elevation-dropzone-error-blur) + var(--pgn-elevation-dropzone-error-spread) + var(--pgn-elevation-dropzone-error-color) !important; + --pgn-elevation-dropzone-active: + var(--pgn-elevation-dropzone-active-inset) + var(--pgn-elevation-dropzone-active-offset-x) + var(--pgn-elevation-dropzone-active-offset-y) + var(--pgn-elevation-dropzone-active-blur) + var(--pgn-elevation-dropzone-active-spread) + var(--pgn-elevation-dropzone-active-color) !important; +} +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(var(--pgn-color-black), 0); +} +article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; +} +body { + margin: 0; + font-family: var(--pgn-typography-font-family-base); + font-size: var(--pgn-typography-font-size-base); + font-weight: var(--pgn-typography-font-weight-base); + line-height: var(--pgn-typography-line-height-base); + color: var(--pgn-color-body-base); + text-align: left; + background-color: var(--pgn-color-body-bg); +} +[tabindex="-1"]:focus:not(:focus-visible) { + outline: 0 !important; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; + margin-top: var(--pgn-size-hr-border-margin-y); + margin-bottom: var(--pgn-size-hr-border-margin-y); + border: 0; + border-top: var(--pgn-size-hr-border-width) solid var(--pgn-color-hr-border); +} +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: var(--pgn-spacing-headings-margin-bottom); +} +p { + margin-top: 0; + margin-bottom: var(--pgn-spacing-paragraph-margin-bottom); +} +abbr[title], +abbr[data-original-title] { + text-decoration: underline; + text-decoration: underline dotted; + cursor: help; + border-bottom: 0; + text-decoration-skip-ink: none; +} +address { + margin-bottom: 1rem; + font-style: normal; + line-height: inherit; +} +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1rem; +} +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} +dt { + font-weight: var(--pgn-typography-dt-font-weight); +} +dd { + margin-bottom: 0.5rem; + margin-left: 0; +} +blockquote { + margin: 0 0 1rem; +} +b, +strong { + font-weight: var(--pgn-typography-font-weight-bolder); +} +small { + font-size: 80%; +} +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +a { + color: var(--pgn-color-link-base); + text-decoration: var(--pgn-typography-link-decoration-base); + background-color: transparent; +} +a:hover { + color: var(--pgn-color-link-hover); + text-decoration: var(--pgn-typography-link-decoration-hover); +} +a:not([href]):not([class]) { + color: inherit; + text-decoration: none; +} +a:not([href]):not([class]):hover { + color: inherit; + text-decoration: none; +} +pre, +code, +kbd, +samp { + font-family: var(--pgn-typography-font-family-monospace); + font-size: 1em; +} +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; + -ms-overflow-style: scrollbar; + display: block; + color: var(--pgn-color-code-pre); + font-size: var(--pgn-typography-code-font-size); +} +figure { + margin: 0 0 1rem; +} +img { + vertical-align: middle; + border-style: none; +} +svg { + overflow: hidden; + vertical-align: middle; +} +table { + border-collapse: collapse; +} +caption { + padding-top: var(--pgn-spacing-table-cell-padding-base); + padding-bottom: var(--pgn-spacing-table-cell-padding-base); + color: var(--pgn-color-table-caption); + text-align: left; + caption-side: bottom; +} +th { + font-weight: var(--pgn-typography-font-weight-table-th); + text-align: inherit; + text-align: -webkit-match-parent; +} +label { + display: inline-block; + margin-bottom: var(--pgn-spacing-label-margin-bottom); +} +button { + border-radius: 0; +} +button:focus:not(:focus-visible) { + outline: 0; +} +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +[role=button] { + cursor: pointer; +} +select { + word-wrap: normal; +} +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} +button:not(:disabled), +[type=button]:not(:disabled), +[type=reset]:not(:disabled), +[type=submit]:not(:disabled) { + cursor: pointer; +} +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + padding: 0; + border-style: none; +} +input[type=radio], +input[type=checkbox] { + box-sizing: border-box; + padding: 0; +} +textarea { + overflow: auto; + resize: vertical; +} +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} +legend { + display: block; + width: 100%; + max-width: 100%; + padding: 0; + margin-bottom: 0.5rem; + font-size: 1.5rem; + line-height: inherit; + color: inherit; + white-space: normal; +} +progress { + vertical-align: baseline; +} +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} +[type=search] { + outline-offset: -2px; + -webkit-appearance: none; +} +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} +output { + display: inline-block; +} +summary { + display: list-item; + cursor: pointer; +} +template { + display: none; +} +[hidden] { + display: none !important; +} +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: var(--pgn-spacing-headings-margin-bottom); + font-family: var(--pgn-typography-headings-font-family); + font-weight: var(--pgn-typography-headings-font-weight); + line-height: var(--pgn-typography-headings-line-height); + color: var(--pgn-color-headings-base); +} +h1, .h1 { + font-size: var(--pgn-typography-font-size-h1-base); + font-weight: 500; + line-height: 1.5; +} +h2, .h2 { + font-size: var(--pgn-typography-font-size-h2-base); + font-weight: 500; + line-height: 1.5; +} +h3, .h3 { + font-size: var(--pgn-typography-font-size-h3-base); + font-weight: 500; + line-height: 1.5; +} +h4, .h4 { + font-size: var(--pgn-typography-font-size-h4-base); + font-weight: 500; + line-height: 1.5; +} +h5, .h5 { + font-size: var(--pgn-typography-font-size-h5-base); + font-weight: 500; + line-height: 1.5; +} +h6, .h6 { + font-size: var(--pgn-typography-font-size-h6-base); + font-weight: 500; + line-height: 1.5; +} +.lead { + font-size: var(--pgn-typography-font-size-lg); + font-weight: var(--pgn-typography-font-weight-lead); +} +.display-1 { + font-size: var(--pgn-typography-font-size-display-1); + font-weight: var(--pgn-typography-font-weight-display-1); + line-height: var(--pgn-typography-line-height-display-base); +} +.display-2 { + font-size: var(--pgn-typography-font-size-display-2); + font-weight: var(--pgn-typography-font-weight-display-2); + line-height: var(--pgn-typography-line-height-display-base); +} +.display-3 { + font-size: var(--pgn-typography-font-size-display-3); + font-weight: var(--pgn-typography-font-weight-display-3); + line-height: var(--pgn-typography-line-height-display-base); +} +.display-4 { + font-size: var(--pgn-typography-font-size-display-4); + font-weight: var(--pgn-typography-font-weight-display-4); + line-height: var(--pgn-typography-line-height-display-base); +} +small, +.small { + font-size: var(--pgn-typography-font-size-sm); + font-weight: var(--pgn-typography-font-weight-normal); +} +mark, +.mark { + padding: var(--pgn-spacing-mark-padding); + background-color: var(--pgn-color-mark-bg); +} +.list-unstyled { + padding-left: 0; + list-style: none; +} +.list-inline { + padding-left: 0; + list-style: none; +} +.list-inline-item { + display: inline-block; +} +.list-inline-item:not(:last-child) { + margin-right: var(--pgn-spacing-list-inline-padding); +} +.initialism { + font-size: 90%; + text-transform: uppercase; +} +.blockquote { + margin-bottom: var(--pgn-spacing-spacer-base); + font-size: var(--pgn-typography-blockquote-font-size); +} +.blockquote-footer { + display: block; + font-size: var(--pgn-typography-blockquote-small-font-size); + color: var(--pgn-color-blockquote-small); +} +.blockquote-footer::before { + content: "— "; +} +@media (max-width: 576px) { + .display-1 { + font-size: var(--pgn-typography-font-size-display-mobile-1); + line-height: var(--pgn-typography-line-height-display-mobile); + } + .display-2 { + font-size: var(--pgn-typography-font-size-display-mobile-2); + line-height: var(--pgn-typography-line-height-display-mobile); + } + .display-3 { + font-size: var(--pgn-typography-font-size-display-mobile-3); + line-height: var(--pgn-typography-line-height-display-mobile); + } + .display-4 { + font-size: var(--pgn-typography-font-size-display-mobile-4); + line-height: var(--pgn-typography-line-height-display-mobile); + } + h1, + .h1 { + font-size: var(--pgn-typography-font-size-h1-mobile); + } + h2, + .h2 { + font-size: var(--pgn-typography-font-size-h2-mobile); + } + h3, + .h3 { + font-size: var(--pgn-typography-font-size-h3-mobile); + } + h4, + .h4 { + font-size: var(--pgn-typography-font-size-h4-mobile); + } + h5, + .h5 { + font-size: var(--pgn-typography-font-size-h5-mobile); + } + h6, + .h6 { + font-size: var(--pgn-typography-font-size-h6-mobile); + } +} +.mobile-type .display-1 { + font-size: var(--pgn-typography-font-size-display-mobile-1); + line-height: var(--pgn-typography-line-height-display-mobile); +} +.mobile-type .display-2 { + font-size: var(--pgn-typography-font-size-display-mobile-2); + line-height: var(--pgn-typography-line-height-display-mobile); +} +.mobile-type .display-3 { + font-size: var(--pgn-typography-font-size-display-mobile-3); + line-height: var(--pgn-typography-line-height-display-mobile); +} +.mobile-type .display-4 { + font-size: var(--pgn-typography-font-size-display-mobile-4); + line-height: var(--pgn-typography-line-height-display-mobile); +} +.mobile-type h1, +.mobile-type .h1 { + font-size: var(--pgn-typography-font-size-h1-mobile); +} +.mobile-type h2, +.mobile-type .h2 { + font-size: var(--pgn-typography-font-size-h2-mobile); +} +.mobile-type h3, +.mobile-type .h3 { + font-size: var(--pgn-typography-font-size-h3-mobile); +} +.mobile-type h4, +.mobile-type .h4 { + font-size: var(--pgn-typography-font-size-h4-mobile); +} +.mobile-type h5, +.mobile-type .h5 { + font-size: var(--pgn-typography-font-size-h5-mobile); +} +.mobile-type h6, +.mobile-type .h6 { + font-size: var(--pgn-typography-font-size-h6-mobile); +} +.heading-label { + text-transform: uppercase; + font-family: var(--pgn-typography-font-family-monospace); + margin-bottom: 0 !important; +} +p > a[href]:not(.btn), +a.inline-link { + color: var(--pgn-color-link-inline-base); + text-decoration: var(--pgn-typography-link-decoration-inline-base); + text-decoration-line: var(--pgn-typography-link-decoration-inline-base); + text-decoration-color: var(--pgn-color-link-inline-decoration); +} +p > a[href]:not(.btn):hover, +a.inline-link:hover { + color: var(--pgn-color-link-inline-hover-base); + text-decoration: var(--pgn-typography-link-decoration-inline-hover); + text-decoration-line: var(--pgn-typography-link-decoration-inline-hover); + text-decoration-color: var(--pgn-color-link-inline-hover-decoration); +} +a.muted-link { + color: var(--pgn-color-link-muted-base); + text-decoration: var(--pgn-typography-link-decoration-muted-base); +} +a.muted-link:hover { + color: var(--pgn-color-link-muted-hover); + text-decoration: var(--pgn-typography-link-decoration-muted-hover); +} +p > a.muted-link[href]:not(.btn), a.muted-link.inline-link { + color: var(--pgn-color-link-muted-inline-base); + text-decoration: var(--pgn-typography-link-decoration-muted-inline-base); + text-decoration-line: var(--pgn-typography-link-decoration-muted-inline-base); + text-decoration-color: var(--pgn-color-link-muted-inline-decoration); +} +p > a.muted-link[href]:not(.btn):hover, a.muted-link.inline-link:hover { + color: var(--pgn-color-link-muted-inline-hover-base); + text-decoration: var(--pgn-typography-link-decoration-muted-inline-hover); + text-decoration-line: var(--pgn-typography-link-decoration-muted-inline-hover); + text-decoration-color: var(--pgn-color-link-muted-inline-hover-decoration); +} +a.brand-link { + color: var(--pgn-color-link-brand-base); + text-decoration: var(--pgn-typography-link-decoration-brand-base); +} +a.brand-link:hover { + color: var(--pgn-color-link-brand-hover); + text-decoration: var(--pgn-typography-link-decoration-brand-hover); +} +p > a.brand-link[href]:not(.btn), a.brand-link.inline-link { + color: var(--pgn-color-link-brand-inline-base); + text-decoration: var(--pgn-typography-link-decoration-brand-inline-base); + text-decoration-line: var(--pgn-typography-link-decoration-brand-inline-base); + text-decoration-color: var(--pgn-color-link-brand-inline-decoration); +} +p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover { + color: var(--pgn-color-link-brand-inline-hover-base); + text-decoration: var(--pgn-typography-link-decoration-brand-inline-hover); + text-decoration-line: var(--pgn-typography-link-decoration-brand-inline-hover); + text-decoration-color: var(--pgn-color-link-brand-inline-hover-decoration); +} +.container, +.container-fluid, +.container-xl, +.container-lg, +.container-md, +.container-sm { + width: 100%; + padding-right: 48px !important; + padding-left: 48px !important; + margin-right: auto; + margin-left: auto; +} +@media (min-width: 576px) { + .container-sm, .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container-md, .container-sm, .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container-lg, .container-md, .container-sm, .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, .container-lg, .container-md, .container-sm, .container { + max-width: 1600px; + } +} +.row { + display: flex; + flex-wrap: wrap; + margin-right: calc(-1 * var(--pgn-spacing-grid-gutter-width) * 0.5); + margin-left: calc(-1 * var(--pgn-spacing-grid-gutter-width) * 0.5); +} +.no-gutters { + margin-right: 0; + margin-left: 0; +} +.no-gutters > .col, +.no-gutters > [class*=col-] { + padding-right: 0; + padding-left: 0; +} +.col-xxl, +.col-xxl-auto, .col-xxl-12, .col-xxl-11, .col-xxl-10, .col-xxl-9, .col-xxl-8, .col-xxl-7, .col-xxl-6, .col-xxl-5, .col-xxl-4, .col-xxl-3, .col-xxl-2, .col-xxl-1, .col-xl, +.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, +.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, +.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, +.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, +.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { + position: relative; + width: 100%; + padding-right: calc(var(--pgn-spacing-grid-gutter-width) * 0.5); + padding-left: calc(var(--pgn-spacing-grid-gutter-width) * 0.5); +} +.col { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +} +.row-cols-1 > * { + flex: 0 0 100%; + max-width: 100%; +} +.row-cols-2 > * { + flex: 0 0 50%; + max-width: 50%; +} +.row-cols-3 > * { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; +} +.row-cols-4 > * { + flex: 0 0 25%; + max-width: 25%; +} +.row-cols-5 > * { + flex: 0 0 20%; + max-width: 20%; +} +.row-cols-6 > * { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; +} +.col-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; +} +.col-1 { + flex: 0 0 8.33333333%; + max-width: 8.33333333%; +} +.col-2 { + flex: 0 0 16.66666667%; + max-width: 16.66666667%; +} +.col-3 { + flex: 0 0 25%; + max-width: 25%; +} +.col-4 { + flex: 0 0 33.33333333%; + max-width: 33.33333333%; +} +.col-5 { + flex: 0 0 41.66666667%; + max-width: 41.66666667%; +} +.col-6 { + flex: 0 0 50%; + max-width: 50%; +} +.col-7 { + flex: 0 0 58.33333333%; + max-width: 58.33333333%; +} +.col-8 { + flex: 0 0 66.66666667%; + max-width: 66.66666667%; +} +.col-9 { + flex: 0 0 75%; + max-width: 75%; +} +.col-10 { + flex: 0 0 83.33333333%; + max-width: 83.33333333%; +} +.col-11 { + flex: 0 0 91.66666667%; + max-width: 91.66666667%; +} +.col-12 { + flex: 0 0 100%; + max-width: 100%; +} +.order-first { + order: -1; +} +.order-last { + order: 13; +} +.order-0 { + order: 0; +} +.order-1 { + order: 1; +} +.order-2 { + order: 2; +} +.order-3 { + order: 3; +} +.order-4 { + order: 4; +} +.order-5 { + order: 5; +} +.order-6 { + order: 6; +} +.order-7 { + order: 7; +} +.order-8 { + order: 8; +} +.order-9 { + order: 9; +} +.order-10 { + order: 10; +} +.order-11 { + order: 11; +} +.order-12 { + order: 12; +} +.offset-1 { + margin-left: 8.33333333%; +} +.offset-2 { + margin-left: 16.66666667%; +} +.offset-3 { + margin-left: 25%; +} +.offset-4 { + margin-left: 33.33333333%; +} +.offset-5 { + margin-left: 41.66666667%; +} +.offset-6 { + margin-left: 50%; +} +.offset-7 { + margin-left: 58.33333333%; +} +.offset-8 { + margin-left: 66.66666667%; +} +.offset-9 { + margin-left: 75%; +} +.offset-10 { + margin-left: 83.33333333%; +} +.offset-11 { + margin-left: 91.66666667%; +} +@media (min-width: 576px) { + .col-sm { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .row-cols-sm-1 > * { + flex: 0 0 100%; + max-width: 100%; + } + .row-cols-sm-2 > * { + flex: 0 0 50%; + max-width: 50%; + } + .row-cols-sm-3 > * { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .row-cols-sm-4 > * { + flex: 0 0 25%; + max-width: 25%; + } + .row-cols-sm-5 > * { + flex: 0 0 20%; + max-width: 20%; + } + .row-cols-sm-6 > * { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .col-sm-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-sm-1 { + flex: 0 0 8.33333333%; + max-width: 8.33333333%; + } + .col-sm-2 { + flex: 0 0 16.66666667%; + max-width: 16.66666667%; + } + .col-sm-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-sm-4 { + flex: 0 0 33.33333333%; + max-width: 33.33333333%; + } + .col-sm-5 { + flex: 0 0 41.66666667%; + max-width: 41.66666667%; + } + .col-sm-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-sm-7 { + flex: 0 0 58.33333333%; + max-width: 58.33333333%; + } + .col-sm-8 { + flex: 0 0 66.66666667%; + max-width: 66.66666667%; + } + .col-sm-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-sm-10 { + flex: 0 0 83.33333333%; + max-width: 83.33333333%; + } + .col-sm-11 { + flex: 0 0 91.66666667%; + max-width: 91.66666667%; + } + .col-sm-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-sm-first { + order: -1; + } + .order-sm-last { + order: 13; + } + .order-sm-0 { + order: 0; + } + .order-sm-1 { + order: 1; + } + .order-sm-2 { + order: 2; + } + .order-sm-3 { + order: 3; + } + .order-sm-4 { + order: 4; + } + .order-sm-5 { + order: 5; + } + .order-sm-6 { + order: 6; + } + .order-sm-7 { + order: 7; + } + .order-sm-8 { + order: 8; + } + .order-sm-9 { + order: 9; + } + .order-sm-10 { + order: 10; + } + .order-sm-11 { + order: 11; + } + .order-sm-12 { + order: 12; + } + .offset-sm-0 { + margin-left: 0; + } + .offset-sm-1 { + margin-left: 8.33333333%; + } + .offset-sm-2 { + margin-left: 16.66666667%; + } + .offset-sm-3 { + margin-left: 25%; + } + .offset-sm-4 { + margin-left: 33.33333333%; + } + .offset-sm-5 { + margin-left: 41.66666667%; + } + .offset-sm-6 { + margin-left: 50%; + } + .offset-sm-7 { + margin-left: 58.33333333%; + } + .offset-sm-8 { + margin-left: 66.66666667%; + } + .offset-sm-9 { + margin-left: 75%; + } + .offset-sm-10 { + margin-left: 83.33333333%; + } + .offset-sm-11 { + margin-left: 91.66666667%; + } +} +@media (min-width: 768px) { + .col-md { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .row-cols-md-1 > * { + flex: 0 0 100%; + max-width: 100%; + } + .row-cols-md-2 > * { + flex: 0 0 50%; + max-width: 50%; + } + .row-cols-md-3 > * { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .row-cols-md-4 > * { + flex: 0 0 25%; + max-width: 25%; + } + .row-cols-md-5 > * { + flex: 0 0 20%; + max-width: 20%; + } + .row-cols-md-6 > * { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .col-md-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-md-1 { + flex: 0 0 8.33333333%; + max-width: 8.33333333%; + } + .col-md-2 { + flex: 0 0 16.66666667%; + max-width: 16.66666667%; + } + .col-md-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-md-4 { + flex: 0 0 33.33333333%; + max-width: 33.33333333%; + } + .col-md-5 { + flex: 0 0 41.66666667%; + max-width: 41.66666667%; + } + .col-md-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-md-7 { + flex: 0 0 58.33333333%; + max-width: 58.33333333%; + } + .col-md-8 { + flex: 0 0 66.66666667%; + max-width: 66.66666667%; + } + .col-md-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-md-10 { + flex: 0 0 83.33333333%; + max-width: 83.33333333%; + } + .col-md-11 { + flex: 0 0 91.66666667%; + max-width: 91.66666667%; + } + .col-md-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-md-first { + order: -1; + } + .order-md-last { + order: 13; + } + .order-md-0 { + order: 0; + } + .order-md-1 { + order: 1; + } + .order-md-2 { + order: 2; + } + .order-md-3 { + order: 3; + } + .order-md-4 { + order: 4; + } + .order-md-5 { + order: 5; + } + .order-md-6 { + order: 6; + } + .order-md-7 { + order: 7; + } + .order-md-8 { + order: 8; + } + .order-md-9 { + order: 9; + } + .order-md-10 { + order: 10; + } + .order-md-11 { + order: 11; + } + .order-md-12 { + order: 12; + } + .offset-md-0 { + margin-left: 0; + } + .offset-md-1 { + margin-left: 8.33333333%; + } + .offset-md-2 { + margin-left: 16.66666667%; + } + .offset-md-3 { + margin-left: 25%; + } + .offset-md-4 { + margin-left: 33.33333333%; + } + .offset-md-5 { + margin-left: 41.66666667%; + } + .offset-md-6 { + margin-left: 50%; + } + .offset-md-7 { + margin-left: 58.33333333%; + } + .offset-md-8 { + margin-left: 66.66666667%; + } + .offset-md-9 { + margin-left: 75%; + } + .offset-md-10 { + margin-left: 83.33333333%; + } + .offset-md-11 { + margin-left: 91.66666667%; + } +} +@media (min-width: 992px) { + .col-lg { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .row-cols-lg-1 > * { + flex: 0 0 100%; + max-width: 100%; + } + .row-cols-lg-2 > * { + flex: 0 0 50%; + max-width: 50%; + } + .row-cols-lg-3 > * { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .row-cols-lg-4 > * { + flex: 0 0 25%; + max-width: 25%; + } + .row-cols-lg-5 > * { + flex: 0 0 20%; + max-width: 20%; + } + .row-cols-lg-6 > * { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .col-lg-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-lg-1 { + flex: 0 0 8.33333333%; + max-width: 8.33333333%; + } + .col-lg-2 { + flex: 0 0 16.66666667%; + max-width: 16.66666667%; + } + .col-lg-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-lg-4 { + flex: 0 0 33.33333333%; + max-width: 33.33333333%; + } + .col-lg-5 { + flex: 0 0 41.66666667%; + max-width: 41.66666667%; + } + .col-lg-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-lg-7 { + flex: 0 0 58.33333333%; + max-width: 58.33333333%; + } + .col-lg-8 { + flex: 0 0 66.66666667%; + max-width: 66.66666667%; + } + .col-lg-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-lg-10 { + flex: 0 0 83.33333333%; + max-width: 83.33333333%; + } + .col-lg-11 { + flex: 0 0 91.66666667%; + max-width: 91.66666667%; + } + .col-lg-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-lg-first { + order: -1; + } + .order-lg-last { + order: 13; + } + .order-lg-0 { + order: 0; + } + .order-lg-1 { + order: 1; + } + .order-lg-2 { + order: 2; + } + .order-lg-3 { + order: 3; + } + .order-lg-4 { + order: 4; + } + .order-lg-5 { + order: 5; + } + .order-lg-6 { + order: 6; + } + .order-lg-7 { + order: 7; + } + .order-lg-8 { + order: 8; + } + .order-lg-9 { + order: 9; + } + .order-lg-10 { + order: 10; + } + .order-lg-11 { + order: 11; + } + .order-lg-12 { + order: 12; + } + .offset-lg-0 { + margin-left: 0; + } + .offset-lg-1 { + margin-left: 8.33333333%; + } + .offset-lg-2 { + margin-left: 16.66666667%; + } + .offset-lg-3 { + margin-left: 25%; + } + .offset-lg-4 { + margin-left: 33.33333333%; + } + .offset-lg-5 { + margin-left: 41.66666667%; + } + .offset-lg-6 { + margin-left: 50%; + } + .offset-lg-7 { + margin-left: 58.33333333%; + } + .offset-lg-8 { + margin-left: 66.66666667%; + } + .offset-lg-9 { + margin-left: 75%; + } + .offset-lg-10 { + margin-left: 83.33333333%; + } + .offset-lg-11 { + margin-left: 91.66666667%; + } +} +@media (min-width: 1200px) { + .col-xl { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .row-cols-xl-1 > * { + flex: 0 0 100%; + max-width: 100%; + } + .row-cols-xl-2 > * { + flex: 0 0 50%; + max-width: 50%; + } + .row-cols-xl-3 > * { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .row-cols-xl-4 > * { + flex: 0 0 25%; + max-width: 25%; + } + .row-cols-xl-5 > * { + flex: 0 0 20%; + max-width: 20%; + } + .row-cols-xl-6 > * { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .col-xl-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-xl-1 { + flex: 0 0 8.33333333%; + max-width: 8.33333333%; + } + .col-xl-2 { + flex: 0 0 16.66666667%; + max-width: 16.66666667%; + } + .col-xl-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-xl-4 { + flex: 0 0 33.33333333%; + max-width: 33.33333333%; + } + .col-xl-5 { + flex: 0 0 41.66666667%; + max-width: 41.66666667%; + } + .col-xl-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-xl-7 { + flex: 0 0 58.33333333%; + max-width: 58.33333333%; + } + .col-xl-8 { + flex: 0 0 66.66666667%; + max-width: 66.66666667%; + } + .col-xl-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-xl-10 { + flex: 0 0 83.33333333%; + max-width: 83.33333333%; + } + .col-xl-11 { + flex: 0 0 91.66666667%; + max-width: 91.66666667%; + } + .col-xl-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-xl-first { + order: -1; + } + .order-xl-last { + order: 13; + } + .order-xl-0 { + order: 0; + } + .order-xl-1 { + order: 1; + } + .order-xl-2 { + order: 2; + } + .order-xl-3 { + order: 3; + } + .order-xl-4 { + order: 4; + } + .order-xl-5 { + order: 5; + } + .order-xl-6 { + order: 6; + } + .order-xl-7 { + order: 7; + } + .order-xl-8 { + order: 8; + } + .order-xl-9 { + order: 9; + } + .order-xl-10 { + order: 10; + } + .order-xl-11 { + order: 11; + } + .order-xl-12 { + order: 12; + } + .offset-xl-0 { + margin-left: 0; + } + .offset-xl-1 { + margin-left: 8.33333333%; + } + .offset-xl-2 { + margin-left: 16.66666667%; + } + .offset-xl-3 { + margin-left: 25%; + } + .offset-xl-4 { + margin-left: 33.33333333%; + } + .offset-xl-5 { + margin-left: 41.66666667%; + } + .offset-xl-6 { + margin-left: 50%; + } + .offset-xl-7 { + margin-left: 58.33333333%; + } + .offset-xl-8 { + margin-left: 66.66666667%; + } + .offset-xl-9 { + margin-left: 75%; + } + .offset-xl-10 { + margin-left: 83.33333333%; + } + .offset-xl-11 { + margin-left: 91.66666667%; + } +} +@media (min-width: 1400px) { + .col-xxl { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .row-cols-xxl-1 > * { + flex: 0 0 100%; + max-width: 100%; + } + .row-cols-xxl-2 > * { + flex: 0 0 50%; + max-width: 50%; + } + .row-cols-xxl-3 > * { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .row-cols-xxl-4 > * { + flex: 0 0 25%; + max-width: 25%; + } + .row-cols-xxl-5 > * { + flex: 0 0 20%; + max-width: 20%; + } + .row-cols-xxl-6 > * { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .col-xxl-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-xxl-1 { + flex: 0 0 8.33333333%; + max-width: 8.33333333%; + } + .col-xxl-2 { + flex: 0 0 16.66666667%; + max-width: 16.66666667%; + } + .col-xxl-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-xxl-4 { + flex: 0 0 33.33333333%; + max-width: 33.33333333%; + } + .col-xxl-5 { + flex: 0 0 41.66666667%; + max-width: 41.66666667%; + } + .col-xxl-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-xxl-7 { + flex: 0 0 58.33333333%; + max-width: 58.33333333%; + } + .col-xxl-8 { + flex: 0 0 66.66666667%; + max-width: 66.66666667%; + } + .col-xxl-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-xxl-10 { + flex: 0 0 83.33333333%; + max-width: 83.33333333%; + } + .col-xxl-11 { + flex: 0 0 91.66666667%; + max-width: 91.66666667%; + } + .col-xxl-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-xxl-first { + order: -1; + } + .order-xxl-last { + order: 13; + } + .order-xxl-0 { + order: 0; + } + .order-xxl-1 { + order: 1; + } + .order-xxl-2 { + order: 2; + } + .order-xxl-3 { + order: 3; + } + .order-xxl-4 { + order: 4; + } + .order-xxl-5 { + order: 5; + } + .order-xxl-6 { + order: 6; + } + .order-xxl-7 { + order: 7; + } + .order-xxl-8 { + order: 8; + } + .order-xxl-9 { + order: 9; + } + .order-xxl-10 { + order: 10; + } + .order-xxl-11 { + order: 11; + } + .order-xxl-12 { + order: 12; + } + .offset-xxl-0 { + margin-left: 0; + } + .offset-xxl-1 { + margin-left: 8.33333333%; + } + .offset-xxl-2 { + margin-left: 16.66666667%; + } + .offset-xxl-3 { + margin-left: 25%; + } + .offset-xxl-4 { + margin-left: 33.33333333%; + } + .offset-xxl-5 { + margin-left: 41.66666667%; + } + .offset-xxl-6 { + margin-left: 50%; + } + .offset-xxl-7 { + margin-left: 58.33333333%; + } + .offset-xxl-8 { + margin-left: 66.66666667%; + } + .offset-xxl-9 { + margin-left: 75%; + } + .offset-xxl-10 { + margin-left: 83.33333333%; + } + .offset-xxl-11 { + margin-left: 91.66666667%; + } +} +.container-mw-xs { + max-width: calc(var(--pgn-size-container-max-width-xs) + var(--pgn-spacing-grid-gutter-width)) !important; +} +.container-mw-sm { + max-width: calc(var(--pgn-size-container-max-width-sm) + var(--pgn-spacing-grid-gutter-width)) !important; +} +.container-mw-md { + max-width: calc(var(--pgn-size-container-max-width-md) + var(--pgn-spacing-grid-gutter-width)) !important; +} +.container-mw-lg { + max-width: calc(var(--pgn-size-container-max-width-lg) + var(--pgn-spacing-grid-gutter-width)) !important; +} +.container-mw-xl { + max-width: calc(var(--pgn-size-container-max-width-xl) + var(--pgn-spacing-grid-gutter-width)) !important; +} +.fade { + transition: var(--pgn-transition-fade); +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} +.collapse:not(.show) { + display: none; +} +.collapsing { + position: relative; + height: 0; + overflow: hidden; + transition: var(--pgn-transition-collapse-height); +} +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} +.collapsing.width { + width: 0; + height: auto; + transition: var(--pgn-transition-collapse-width); +} +@media (prefers-reduced-motion: reduce) { + .collapsing.width { + transition: none; + } +} +.align-baseline { + vertical-align: baseline !important; +} +.align-top { + vertical-align: top !important; +} +.align-middle { + vertical-align: middle !important; +} +.align-bottom { + vertical-align: bottom !important; +} +.align-text-bottom { + vertical-align: text-bottom !important; +} +.align-text-top { + vertical-align: text-top !important; +} +.clearfix::after { + display: block; + clear: both; + content: ""; +} +.d-none { + display: none !important; +} +.d-inline { + display: inline !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} +.d-table { + display: table !important; +} +.d-table-row { + display: table-row !important; +} +.d-table-cell { + display: table-cell !important; +} +.d-flex { + display: flex !important; +} +.d-inline-flex { + display: inline-flex !important; +} +@media (min-width: 576px) { + .d-sm-none { + display: none !important; + } + .d-sm-inline { + display: inline !important; + } + .d-sm-inline-block { + display: inline-block !important; + } + .d-sm-block { + display: block !important; + } + .d-sm-table { + display: table !important; + } + .d-sm-table-row { + display: table-row !important; + } + .d-sm-table-cell { + display: table-cell !important; + } + .d-sm-flex { + display: flex !important; + } + .d-sm-inline-flex { + display: inline-flex !important; + } +} +@media (min-width: 768px) { + .d-md-none { + display: none !important; + } + .d-md-inline { + display: inline !important; + } + .d-md-inline-block { + display: inline-block !important; + } + .d-md-block { + display: block !important; + } + .d-md-table { + display: table !important; + } + .d-md-table-row { + display: table-row !important; + } + .d-md-table-cell { + display: table-cell !important; + } + .d-md-flex { + display: flex !important; + } + .d-md-inline-flex { + display: inline-flex !important; + } +} +@media (min-width: 992px) { + .d-lg-none { + display: none !important; + } + .d-lg-inline { + display: inline !important; + } + .d-lg-inline-block { + display: inline-block !important; + } + .d-lg-block { + display: block !important; + } + .d-lg-table { + display: table !important; + } + .d-lg-table-row { + display: table-row !important; + } + .d-lg-table-cell { + display: table-cell !important; + } + .d-lg-flex { + display: flex !important; + } + .d-lg-inline-flex { + display: inline-flex !important; + } +} +@media (min-width: 1200px) { + .d-xl-none { + display: none !important; + } + .d-xl-inline { + display: inline !important; + } + .d-xl-inline-block { + display: inline-block !important; + } + .d-xl-block { + display: block !important; + } + .d-xl-table { + display: table !important; + } + .d-xl-table-row { + display: table-row !important; + } + .d-xl-table-cell { + display: table-cell !important; + } + .d-xl-flex { + display: flex !important; + } + .d-xl-inline-flex { + display: inline-flex !important; + } +} +@media (min-width: 1400px) { + .d-xxl-none { + display: none !important; + } + .d-xxl-inline { + display: inline !important; + } + .d-xxl-inline-block { + display: inline-block !important; + } + .d-xxl-block { + display: block !important; + } + .d-xxl-table { + display: table !important; + } + .d-xxl-table-row { + display: table-row !important; + } + .d-xxl-table-cell { + display: table-cell !important; + } + .d-xxl-flex { + display: flex !important; + } + .d-xxl-inline-flex { + display: inline-flex !important; + } +} +@media print { + .d-print-none { + display: none !important; + } + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: flex !important; + } + .d-print-inline-flex { + display: inline-flex !important; + } +} +.embed-responsive { + position: relative; + display: block; + width: 100%; + padding: 0; + overflow: hidden; +} +.embed-responsive::before { + display: block; + content: ""; +} +.embed-responsive .embed-responsive-item, +.embed-responsive iframe, +.embed-responsive embed, +.embed-responsive object, +.embed-responsive video { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; +} +.embed-responsive-21by9::before { + padding-top: 42.85714286%; +} +.embed-responsive-16by9::before { + padding-top: 56.25%; +} +.embed-responsive-4by3::before { + padding-top: 75%; +} +.embed-responsive-1by1::before { + padding-top: 100%; +} +.flex-row { + flex-direction: row !important; +} +.flex-column { + flex-direction: column !important; +} +.flex-row-reverse { + flex-direction: row-reverse !important; +} +.flex-column-reverse { + flex-direction: column-reverse !important; +} +.flex-wrap { + flex-wrap: wrap !important; +} +.flex-nowrap { + flex-wrap: nowrap !important; +} +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} +.flex-fill { + flex: 1 1 auto !important; +} +.flex-grow-0 { + flex-grow: 0 !important; +} +.flex-grow-1 { + flex-grow: 1 !important; +} +.flex-shrink-0 { + flex-shrink: 0 !important; +} +.flex-shrink-1 { + flex-shrink: 1 !important; +} +.justify-content-start { + justify-content: flex-start !important; +} +.justify-content-end { + justify-content: flex-end !important; +} +.justify-content-center { + justify-content: center !important; +} +.justify-content-between { + justify-content: space-between !important; +} +.justify-content-around { + justify-content: space-around !important; +} +.align-items-start { + align-items: flex-start !important; +} +.align-items-end { + align-items: flex-end !important; +} +.align-items-center { + align-items: center !important; +} +.align-items-baseline { + align-items: baseline !important; +} +.align-items-stretch { + align-items: stretch !important; +} +.align-content-start { + align-content: flex-start !important; +} +.align-content-end { + align-content: flex-end !important; +} +.align-content-center { + align-content: center !important; +} +.align-content-between { + align-content: space-between !important; +} +.align-content-around { + align-content: space-around !important; +} +.align-content-stretch { + align-content: stretch !important; +} +.align-self-auto { + align-self: auto !important; +} +.align-self-start { + align-self: flex-start !important; +} +.align-self-end { + align-self: flex-end !important; +} +.align-self-center { + align-self: center !important; +} +.align-self-baseline { + align-self: baseline !important; +} +.align-self-stretch { + align-self: stretch !important; +} +@media (min-width: 576px) { + .flex-sm-row { + flex-direction: row !important; + } + .flex-sm-column { + flex-direction: column !important; + } + .flex-sm-row-reverse { + flex-direction: row-reverse !important; + } + .flex-sm-column-reverse { + flex-direction: column-reverse !important; + } + .flex-sm-wrap { + flex-wrap: wrap !important; + } + .flex-sm-nowrap { + flex-wrap: nowrap !important; + } + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-sm-fill { + flex: 1 1 auto !important; + } + .flex-sm-grow-0 { + flex-grow: 0 !important; + } + .flex-sm-grow-1 { + flex-grow: 1 !important; + } + .flex-sm-shrink-0 { + flex-shrink: 0 !important; + } + .flex-sm-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-sm-start { + justify-content: flex-start !important; + } + .justify-content-sm-end { + justify-content: flex-end !important; + } + .justify-content-sm-center { + justify-content: center !important; + } + .justify-content-sm-between { + justify-content: space-between !important; + } + .justify-content-sm-around { + justify-content: space-around !important; + } + .align-items-sm-start { + align-items: flex-start !important; + } + .align-items-sm-end { + align-items: flex-end !important; + } + .align-items-sm-center { + align-items: center !important; + } + .align-items-sm-baseline { + align-items: baseline !important; + } + .align-items-sm-stretch { + align-items: stretch !important; + } + .align-content-sm-start { + align-content: flex-start !important; + } + .align-content-sm-end { + align-content: flex-end !important; + } + .align-content-sm-center { + align-content: center !important; + } + .align-content-sm-between { + align-content: space-between !important; + } + .align-content-sm-around { + align-content: space-around !important; + } + .align-content-sm-stretch { + align-content: stretch !important; + } + .align-self-sm-auto { + align-self: auto !important; + } + .align-self-sm-start { + align-self: flex-start !important; + } + .align-self-sm-end { + align-self: flex-end !important; + } + .align-self-sm-center { + align-self: center !important; + } + .align-self-sm-baseline { + align-self: baseline !important; + } + .align-self-sm-stretch { + align-self: stretch !important; + } +} +@media (min-width: 768px) { + .flex-md-row { + flex-direction: row !important; + } + .flex-md-column { + flex-direction: column !important; + } + .flex-md-row-reverse { + flex-direction: row-reverse !important; + } + .flex-md-column-reverse { + flex-direction: column-reverse !important; + } + .flex-md-wrap { + flex-wrap: wrap !important; + } + .flex-md-nowrap { + flex-wrap: nowrap !important; + } + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-md-fill { + flex: 1 1 auto !important; + } + .flex-md-grow-0 { + flex-grow: 0 !important; + } + .flex-md-grow-1 { + flex-grow: 1 !important; + } + .flex-md-shrink-0 { + flex-shrink: 0 !important; + } + .flex-md-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-md-start { + justify-content: flex-start !important; + } + .justify-content-md-end { + justify-content: flex-end !important; + } + .justify-content-md-center { + justify-content: center !important; + } + .justify-content-md-between { + justify-content: space-between !important; + } + .justify-content-md-around { + justify-content: space-around !important; + } + .align-items-md-start { + align-items: flex-start !important; + } + .align-items-md-end { + align-items: flex-end !important; + } + .align-items-md-center { + align-items: center !important; + } + .align-items-md-baseline { + align-items: baseline !important; + } + .align-items-md-stretch { + align-items: stretch !important; + } + .align-content-md-start { + align-content: flex-start !important; + } + .align-content-md-end { + align-content: flex-end !important; + } + .align-content-md-center { + align-content: center !important; + } + .align-content-md-between { + align-content: space-between !important; + } + .align-content-md-around { + align-content: space-around !important; + } + .align-content-md-stretch { + align-content: stretch !important; + } + .align-self-md-auto { + align-self: auto !important; + } + .align-self-md-start { + align-self: flex-start !important; + } + .align-self-md-end { + align-self: flex-end !important; + } + .align-self-md-center { + align-self: center !important; + } + .align-self-md-baseline { + align-self: baseline !important; + } + .align-self-md-stretch { + align-self: stretch !important; + } +} +@media (min-width: 992px) { + .flex-lg-row { + flex-direction: row !important; + } + .flex-lg-column { + flex-direction: column !important; + } + .flex-lg-row-reverse { + flex-direction: row-reverse !important; + } + .flex-lg-column-reverse { + flex-direction: column-reverse !important; + } + .flex-lg-wrap { + flex-wrap: wrap !important; + } + .flex-lg-nowrap { + flex-wrap: nowrap !important; + } + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-lg-fill { + flex: 1 1 auto !important; + } + .flex-lg-grow-0 { + flex-grow: 0 !important; + } + .flex-lg-grow-1 { + flex-grow: 1 !important; + } + .flex-lg-shrink-0 { + flex-shrink: 0 !important; + } + .flex-lg-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-lg-start { + justify-content: flex-start !important; + } + .justify-content-lg-end { + justify-content: flex-end !important; + } + .justify-content-lg-center { + justify-content: center !important; + } + .justify-content-lg-between { + justify-content: space-between !important; + } + .justify-content-lg-around { + justify-content: space-around !important; + } + .align-items-lg-start { + align-items: flex-start !important; + } + .align-items-lg-end { + align-items: flex-end !important; + } + .align-items-lg-center { + align-items: center !important; + } + .align-items-lg-baseline { + align-items: baseline !important; + } + .align-items-lg-stretch { + align-items: stretch !important; + } + .align-content-lg-start { + align-content: flex-start !important; + } + .align-content-lg-end { + align-content: flex-end !important; + } + .align-content-lg-center { + align-content: center !important; + } + .align-content-lg-between { + align-content: space-between !important; + } + .align-content-lg-around { + align-content: space-around !important; + } + .align-content-lg-stretch { + align-content: stretch !important; + } + .align-self-lg-auto { + align-self: auto !important; + } + .align-self-lg-start { + align-self: flex-start !important; + } + .align-self-lg-end { + align-self: flex-end !important; + } + .align-self-lg-center { + align-self: center !important; + } + .align-self-lg-baseline { + align-self: baseline !important; + } + .align-self-lg-stretch { + align-self: stretch !important; + } +} +@media (min-width: 1200px) { + .flex-xl-row { + flex-direction: row !important; + } + .flex-xl-column { + flex-direction: column !important; + } + .flex-xl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xl-wrap { + flex-wrap: wrap !important; + } + .flex-xl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-xl-fill { + flex: 1 1 auto !important; + } + .flex-xl-grow-0 { + flex-grow: 0 !important; + } + .flex-xl-grow-1 { + flex-grow: 1 !important; + } + .flex-xl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xl-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-xl-start { + justify-content: flex-start !important; + } + .justify-content-xl-end { + justify-content: flex-end !important; + } + .justify-content-xl-center { + justify-content: center !important; + } + .justify-content-xl-between { + justify-content: space-between !important; + } + .justify-content-xl-around { + justify-content: space-around !important; + } + .align-items-xl-start { + align-items: flex-start !important; + } + .align-items-xl-end { + align-items: flex-end !important; + } + .align-items-xl-center { + align-items: center !important; + } + .align-items-xl-baseline { + align-items: baseline !important; + } + .align-items-xl-stretch { + align-items: stretch !important; + } + .align-content-xl-start { + align-content: flex-start !important; + } + .align-content-xl-end { + align-content: flex-end !important; + } + .align-content-xl-center { + align-content: center !important; + } + .align-content-xl-between { + align-content: space-between !important; + } + .align-content-xl-around { + align-content: space-around !important; + } + .align-content-xl-stretch { + align-content: stretch !important; + } + .align-self-xl-auto { + align-self: auto !important; + } + .align-self-xl-start { + align-self: flex-start !important; + } + .align-self-xl-end { + align-self: flex-end !important; + } + .align-self-xl-center { + align-self: center !important; + } + .align-self-xl-baseline { + align-self: baseline !important; + } + .align-self-xl-stretch { + align-self: stretch !important; + } +} +@media (min-width: 1400px) { + .flex-xxl-row { + flex-direction: row !important; + } + .flex-xxl-column { + flex-direction: column !important; + } + .flex-xxl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xxl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xxl-wrap { + flex-wrap: wrap !important; + } + .flex-xxl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xxl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-xxl-fill { + flex: 1 1 auto !important; + } + .flex-xxl-grow-0 { + flex-grow: 0 !important; + } + .flex-xxl-grow-1 { + flex-grow: 1 !important; + } + .flex-xxl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xxl-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-xxl-start { + justify-content: flex-start !important; + } + .justify-content-xxl-end { + justify-content: flex-end !important; + } + .justify-content-xxl-center { + justify-content: center !important; + } + .justify-content-xxl-between { + justify-content: space-between !important; + } + .justify-content-xxl-around { + justify-content: space-around !important; + } + .align-items-xxl-start { + align-items: flex-start !important; + } + .align-items-xxl-end { + align-items: flex-end !important; + } + .align-items-xxl-center { + align-items: center !important; + } + .align-items-xxl-baseline { + align-items: baseline !important; + } + .align-items-xxl-stretch { + align-items: stretch !important; + } + .align-content-xxl-start { + align-content: flex-start !important; + } + .align-content-xxl-end { + align-content: flex-end !important; + } + .align-content-xxl-center { + align-content: center !important; + } + .align-content-xxl-between { + align-content: space-between !important; + } + .align-content-xxl-around { + align-content: space-around !important; + } + .align-content-xxl-stretch { + align-content: stretch !important; + } + .align-self-xxl-auto { + align-self: auto !important; + } + .align-self-xxl-start { + align-self: flex-start !important; + } + .align-self-xxl-end { + align-self: flex-end !important; + } + .align-self-xxl-center { + align-self: center !important; + } + .align-self-xxl-baseline { + align-self: baseline !important; + } + .align-self-xxl-stretch { + align-self: stretch !important; + } +} +.float-left { + float: left !important; +} +.float-right { + float: right !important; +} +.float-none { + float: none !important; +} +@media (min-width: 576px) { + .float-sm-left { + float: left !important; + } + .float-sm-right { + float: right !important; + } + .float-sm-none { + float: none !important; + } +} +@media (min-width: 768px) { + .float-md-left { + float: left !important; + } + .float-md-right { + float: right !important; + } + .float-md-none { + float: none !important; + } +} +@media (min-width: 992px) { + .float-lg-left { + float: left !important; + } + .float-lg-right { + float: right !important; + } + .float-lg-none { + float: none !important; + } +} +@media (min-width: 1200px) { + .float-xl-left { + float: left !important; + } + .float-xl-right { + float: right !important; + } + .float-xl-none { + float: none !important; + } +} +@media (min-width: 1400px) { + .float-xxl-left { + float: left !important; + } + .float-xxl-right { + float: right !important; + } + .float-xxl-none { + float: none !important; + } +} +.user-select-all { + user-select: all !important; +} +.user-select-auto { + user-select: auto !important; +} +.user-select-none { + user-select: none !important; +} +.overflow-auto { + overflow: auto !important; +} +.overflow-hidden { + overflow: hidden !important; +} +.position-static { + position: static !important; +} +.position-relative { + position: relative !important; +} +.position-absolute { + position: absolute !important; +} +.position-fixed { + position: fixed !important; +} +.position-sticky { + position: sticky !important; +} +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: var(--pgn-elevation-zindex-fixed); +} +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: var(--pgn-elevation-zindex-fixed); +} +@supports (position: sticky) { + .sticky-top { + position: sticky; + top: 0; + z-index: var(--pgn-elevation-zindex-sticky); + } +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; +} +.shadow-sm { + box-shadow: var(--pgn-elevation-box-shadow-sm-offset-x) var(--pgn-elevation-box-shadow-sm-offset-y) var(--pgn-elevation-box-shadow-sm-blur) var(--pgn-elevation-box-shadow-sm-color) !important; +} +.shadow { + box-shadow: var(--pgn-elevation-box-shadow-base-offset-x) var(--pgn-elevation-box-shadow-base-offset-y) var(--pgn-elevation-box-shadow-base-blur) var(--pgn-elevation-box-shadow-base-color) !important; +} +.shadow-lg { + box-shadow: var(--pgn-elevation-box-shadow-lg-offset-x) var(--pgn-elevation-box-shadow-lg-offset-y) var(--pgn-elevation-box-shadow-lg-blur) var(--pgn-elevation-box-shadow-lg-color) !important; +} +.shadow-none { + box-shadow: none !important; +} +.w-25 { + width: 25% !important; +} +.w-50 { + width: 50% !important; +} +.w-75 { + width: 75% !important; +} +.w-100 { + width: 100% !important; +} +.w-auto { + width: auto !important; +} +.h-25 { + height: 25% !important; +} +.h-50 { + height: 50% !important; +} +.h-75 { + height: 75% !important; +} +.h-100 { + height: 100% !important; +} +.h-auto { + height: auto !important; +} +.mw-100 { + max-width: 100% !important; +} +.mh-100 { + max-height: 100% !important; +} +.min-vw-100 { + min-width: 100vw !important; +} +.min-vh-100 { + min-height: 100vh !important; +} +.vw-100 { + width: 100vw !important; +} +.vh-100 { + height: 100vh !important; +} +.stretched-link::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + pointer-events: auto; + content: ""; + background-color: rgba(0, 0, 0, 0); +} +.visible { + visibility: visible !important; +} +.invisible { + visibility: hidden !important; +} +.m-0 { + margin: 0 !important; +} +.mt-0, +.my-0 { + margin-top: 0 !important; +} +.mr-0, +.mx-0 { + margin-right: 0 !important; +} +.mb-0, +.my-0 { + margin-bottom: 0 !important; +} +.ml-0, +.mx-0 { + margin-left: 0 !important; +} +.m-1 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.mt-1, +.my-1 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.mr-1, +.mx-1 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.mb-1, +.my-1 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.ml-1, +.mx-1 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.m-1\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.mt-1\.5, +.my-1\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.mr-1\.5, +.mx-1\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.mb-1\.5, +.my-1\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.ml-1\.5, +.mx-1\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.m-2 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.mt-2, +.my-2 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.mr-2, +.mx-2 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.mb-2, +.my-2 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.ml-2, +.mx-2 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.m-2\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.mt-2\.5, +.my-2\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.mr-2\.5, +.mx-2\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.mb-2\.5, +.my-2\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.ml-2\.5, +.mx-2\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.m-3 { + margin: var(--pgn-spacing-spacer-base) !important; +} +.mt-3, +.my-3 { + margin-top: var(--pgn-spacing-spacer-base) !important; +} +.mr-3, +.mx-3 { + margin-right: var(--pgn-spacing-spacer-base) !important; +} +.mb-3, +.my-3 { + margin-bottom: var(--pgn-spacing-spacer-base) !important; +} +.ml-3, +.mx-3 { + margin-left: var(--pgn-spacing-spacer-base) !important; +} +.m-3\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.mt-3\.5, +.my-3\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.mr-3\.5, +.mx-3\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.mb-3\.5, +.my-3\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.ml-3\.5, +.mx-3\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.m-4 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.mt-4, +.my-4 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.mr-4, +.mx-4 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.mb-4, +.my-4 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.ml-4, +.mx-4 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.m-4\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.mt-4\.5, +.my-4\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.mr-4\.5, +.mx-4\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.mb-4\.5, +.my-4\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.ml-4\.5, +.mx-4\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.m-5 { + margin: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.mt-5, +.my-5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.mr-5, +.mx-5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.mb-5, +.my-5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.ml-5, +.mx-5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.m-5\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.mt-5\.5, +.my-5\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.mr-5\.5, +.mx-5\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.mb-5\.5, +.my-5\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.ml-5\.5, +.mx-5\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.m-6 { + margin: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.mt-6, +.my-6 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.mr-6, +.mx-6 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.mb-6, +.my-6 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.ml-6, +.mx-6 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.p-0 { + padding: 0 !important; +} +.pt-0, +.py-0 { + padding-top: 0 !important; +} +.pr-0, +.px-0 { + padding-right: 0 !important; +} +.pb-0, +.py-0 { + padding-bottom: 0 !important; +} +.pl-0, +.px-0 { + padding-left: 0 !important; +} +.p-1 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.pt-1, +.py-1 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.pr-1, +.px-1 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.pb-1, +.py-1 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.pl-1, +.px-1 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.p-1\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.pt-1\.5, +.py-1\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.pr-1\.5, +.px-1\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.pb-1\.5, +.py-1\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.pl-1\.5, +.px-1\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.p-2 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.pt-2, +.py-2 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.pr-2, +.px-2 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.pb-2, +.py-2 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.pl-2, +.px-2 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.p-2\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.pt-2\.5, +.py-2\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.pr-2\.5, +.px-2\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.pb-2\.5, +.py-2\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.pl-2\.5, +.px-2\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.p-3 { + padding: var(--pgn-spacing-spacer-base) !important; +} +.pt-3, +.py-3 { + padding-top: var(--pgn-spacing-spacer-base) !important; +} +.pr-3, +.px-3 { + padding-right: var(--pgn-spacing-spacer-base) !important; +} +.pb-3, +.py-3 { + padding-bottom: var(--pgn-spacing-spacer-base) !important; +} +.pl-3, +.px-3 { + padding-left: var(--pgn-spacing-spacer-base) !important; +} +.p-3\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.pt-3\.5, +.py-3\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.pr-3\.5, +.px-3\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.pb-3\.5, +.py-3\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.pl-3\.5, +.px-3\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.p-4 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.pt-4, +.py-4 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.pr-4, +.px-4 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.pb-4, +.py-4 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.pl-4, +.px-4 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.p-4\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.pt-4\.5, +.py-4\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.pr-4\.5, +.px-4\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.pb-4\.5, +.py-4\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.pl-4\.5, +.px-4\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.p-5 { + padding: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.pt-5, +.py-5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.pr-5, +.px-5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.pb-5, +.py-5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.pl-5, +.px-5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.p-5\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.pt-5\.5, +.py-5\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.pr-5\.5, +.px-5\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.pb-5\.5, +.py-5\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.pl-5\.5, +.px-5\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.p-6 { + padding: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.pt-6, +.py-6 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.pr-6, +.px-6 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.pb-6, +.py-6 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.pl-6, +.px-6 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.m-n1 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; +} +.mt-n1, +.my-n1 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; +} +.mr-n1, +.mx-n1 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; +} +.mb-n1, +.my-n1 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; +} +.ml-n1, +.mx-n1 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; +} +.m-n1\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; +} +.mt-n1\.5, +.my-n1\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; +} +.mr-n1\.5, +.mx-n1\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; +} +.mb-n1\.5, +.my-n1\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; +} +.ml-n1\.5, +.mx-n1\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; +} +.m-n2 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; +} +.mt-n2, +.my-n2 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; +} +.mr-n2, +.mx-n2 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; +} +.mb-n2, +.my-n2 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; +} +.ml-n2, +.mx-n2 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; +} +.m-n2\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; +} +.mt-n2\.5, +.my-n2\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; +} +.mr-n2\.5, +.mx-n2\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; +} +.mb-n2\.5, +.my-n2\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; +} +.ml-n2\.5, +.mx-n2\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; +} +.m-n3 { + margin: calc(-1 * var(--pgn-spacing-spacer-base)) !important; +} +.mt-n3, +.my-n3 { + margin-top: calc(-1 * var(--pgn-spacing-spacer-base)) !important; +} +.mr-n3, +.mx-n3 { + margin-right: calc(-1 * var(--pgn-spacing-spacer-base)) !important; +} +.mb-n3, +.my-n3 { + margin-bottom: calc(-1 * var(--pgn-spacing-spacer-base)) !important; +} +.ml-n3, +.mx-n3 { + margin-left: calc(-1 * var(--pgn-spacing-spacer-base)) !important; +} +.m-n3\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; +} +.mt-n3\.5, +.my-n3\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; +} +.mr-n3\.5, +.mx-n3\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; +} +.mb-n3\.5, +.my-n3\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; +} +.ml-n3\.5, +.mx-n3\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; +} +.m-n4 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; +} +.mt-n4, +.my-n4 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; +} +.mr-n4, +.mx-n4 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; +} +.mb-n4, +.my-n4 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; +} +.ml-n4, +.mx-n4 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; +} +.m-n4\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; +} +.mt-n4\.5, +.my-n4\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; +} +.mr-n4\.5, +.mx-n4\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; +} +.mb-n4\.5, +.my-n4\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; +} +.ml-n4\.5, +.mx-n4\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; +} +.m-n5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; +} +.mt-n5, +.my-n5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; +} +.mr-n5, +.mx-n5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; +} +.mb-n5, +.my-n5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; +} +.ml-n5, +.mx-n5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; +} +.m-n5\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; +} +.mt-n5\.5, +.my-n5\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; +} +.mr-n5\.5, +.mx-n5\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; +} +.mb-n5\.5, +.my-n5\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; +} +.ml-n5\.5, +.mx-n5\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; +} +.m-n6 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; +} +.mt-n6, +.my-n6 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; +} +.mr-n6, +.mx-n6 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; +} +.mb-n6, +.my-n6 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; +} +.ml-n6, +.mx-n6 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; +} +.m-auto { + margin: auto !important; +} +.mt-auto, +.my-auto { + margin-top: auto !important; +} +.mr-auto, +.mx-auto { + margin-right: auto !important; +} +.mb-auto, +.my-auto { + margin-bottom: auto !important; +} +.ml-auto, +.mx-auto { + margin-left: auto !important; +} +@media (min-width: 576px) { + .m-sm-0 { + margin: 0 !important; + } + .mt-sm-0, + .my-sm-0 { + margin-top: 0 !important; + } + .mr-sm-0, + .mx-sm-0 { + margin-right: 0 !important; + } + .mb-sm-0, + .my-sm-0 { + margin-bottom: 0 !important; + } + .ml-sm-0, + .mx-sm-0 { + margin-left: 0 !important; + } + .m-sm-1 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mt-sm-1, + .my-sm-1 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mr-sm-1, + .mx-sm-1 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mb-sm-1, + .my-sm-1 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .ml-sm-1, + .mx-sm-1 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .m-sm-1\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mt-sm-1\.5, + .my-sm-1\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mr-sm-1\.5, + .mx-sm-1\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mb-sm-1\.5, + .my-sm-1\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .ml-sm-1\.5, + .mx-sm-1\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .m-sm-2 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mt-sm-2, + .my-sm-2 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mr-sm-2, + .mx-sm-2 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mb-sm-2, + .my-sm-2 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .ml-sm-2, + .mx-sm-2 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .m-sm-2\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mt-sm-2\.5, + .my-sm-2\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mr-sm-2\.5, + .mx-sm-2\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mb-sm-2\.5, + .my-sm-2\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .ml-sm-2\.5, + .mx-sm-2\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .m-sm-3 { + margin: var(--pgn-spacing-spacer-base) !important; + } + .mt-sm-3, + .my-sm-3 { + margin-top: var(--pgn-spacing-spacer-base) !important; + } + .mr-sm-3, + .mx-sm-3 { + margin-right: var(--pgn-spacing-spacer-base) !important; + } + .mb-sm-3, + .my-sm-3 { + margin-bottom: var(--pgn-spacing-spacer-base) !important; + } + .ml-sm-3, + .mx-sm-3 { + margin-left: var(--pgn-spacing-spacer-base) !important; + } + .m-sm-3\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mt-sm-3\.5, + .my-sm-3\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mr-sm-3\.5, + .mx-sm-3\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mb-sm-3\.5, + .my-sm-3\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .ml-sm-3\.5, + .mx-sm-3\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .m-sm-4 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mt-sm-4, + .my-sm-4 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mr-sm-4, + .mx-sm-4 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mb-sm-4, + .my-sm-4 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .ml-sm-4, + .mx-sm-4 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .m-sm-4\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mt-sm-4\.5, + .my-sm-4\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mr-sm-4\.5, + .mx-sm-4\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mb-sm-4\.5, + .my-sm-4\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .ml-sm-4\.5, + .mx-sm-4\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .m-sm-5 { + margin: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mt-sm-5, + .my-sm-5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mr-sm-5, + .mx-sm-5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mb-sm-5, + .my-sm-5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .ml-sm-5, + .mx-sm-5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .m-sm-5\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mt-sm-5\.5, + .my-sm-5\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mr-sm-5\.5, + .mx-sm-5\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mb-sm-5\.5, + .my-sm-5\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .ml-sm-5\.5, + .mx-sm-5\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .m-sm-6 { + margin: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mt-sm-6, + .my-sm-6 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mr-sm-6, + .mx-sm-6 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mb-sm-6, + .my-sm-6 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .ml-sm-6, + .mx-sm-6 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .p-sm-0 { + padding: 0 !important; + } + .pt-sm-0, + .py-sm-0 { + padding-top: 0 !important; + } + .pr-sm-0, + .px-sm-0 { + padding-right: 0 !important; + } + .pb-sm-0, + .py-sm-0 { + padding-bottom: 0 !important; + } + .pl-sm-0, + .px-sm-0 { + padding-left: 0 !important; + } + .p-sm-1 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pt-sm-1, + .py-sm-1 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pr-sm-1, + .px-sm-1 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pb-sm-1, + .py-sm-1 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pl-sm-1, + .px-sm-1 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .p-sm-1\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pt-sm-1\.5, + .py-sm-1\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pr-sm-1\.5, + .px-sm-1\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pb-sm-1\.5, + .py-sm-1\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pl-sm-1\.5, + .px-sm-1\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .p-sm-2 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pt-sm-2, + .py-sm-2 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pr-sm-2, + .px-sm-2 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pb-sm-2, + .py-sm-2 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pl-sm-2, + .px-sm-2 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .p-sm-2\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pt-sm-2\.5, + .py-sm-2\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pr-sm-2\.5, + .px-sm-2\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pb-sm-2\.5, + .py-sm-2\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pl-sm-2\.5, + .px-sm-2\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .p-sm-3 { + padding: var(--pgn-spacing-spacer-base) !important; + } + .pt-sm-3, + .py-sm-3 { + padding-top: var(--pgn-spacing-spacer-base) !important; + } + .pr-sm-3, + .px-sm-3 { + padding-right: var(--pgn-spacing-spacer-base) !important; + } + .pb-sm-3, + .py-sm-3 { + padding-bottom: var(--pgn-spacing-spacer-base) !important; + } + .pl-sm-3, + .px-sm-3 { + padding-left: var(--pgn-spacing-spacer-base) !important; + } + .p-sm-3\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pt-sm-3\.5, + .py-sm-3\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pr-sm-3\.5, + .px-sm-3\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pb-sm-3\.5, + .py-sm-3\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pl-sm-3\.5, + .px-sm-3\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .p-sm-4 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pt-sm-4, + .py-sm-4 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pr-sm-4, + .px-sm-4 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pb-sm-4, + .py-sm-4 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pl-sm-4, + .px-sm-4 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .p-sm-4\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pt-sm-4\.5, + .py-sm-4\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pr-sm-4\.5, + .px-sm-4\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pb-sm-4\.5, + .py-sm-4\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pl-sm-4\.5, + .px-sm-4\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .p-sm-5 { + padding: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pt-sm-5, + .py-sm-5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pr-sm-5, + .px-sm-5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pb-sm-5, + .py-sm-5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pl-sm-5, + .px-sm-5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .p-sm-5\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pt-sm-5\.5, + .py-sm-5\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pr-sm-5\.5, + .px-sm-5\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pb-sm-5\.5, + .py-sm-5\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pl-sm-5\.5, + .px-sm-5\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .p-sm-6 { + padding: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pt-sm-6, + .py-sm-6 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pr-sm-6, + .px-sm-6 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pb-sm-6, + .py-sm-6 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pl-sm-6, + .px-sm-6 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .m-sm-n1 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mt-sm-n1, + .my-sm-n1 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mr-sm-n1, + .mx-sm-n1 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mb-sm-n1, + .my-sm-n1 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .ml-sm-n1, + .mx-sm-n1 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .m-sm-n1\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mt-sm-n1\.5, + .my-sm-n1\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mr-sm-n1\.5, + .mx-sm-n1\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mb-sm-n1\.5, + .my-sm-n1\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .ml-sm-n1\.5, + .mx-sm-n1\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .m-sm-n2 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mt-sm-n2, + .my-sm-n2 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mr-sm-n2, + .mx-sm-n2 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mb-sm-n2, + .my-sm-n2 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .ml-sm-n2, + .mx-sm-n2 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .m-sm-n2\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mt-sm-n2\.5, + .my-sm-n2\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mr-sm-n2\.5, + .mx-sm-n2\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mb-sm-n2\.5, + .my-sm-n2\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .ml-sm-n2\.5, + .mx-sm-n2\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .m-sm-n3 { + margin: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mt-sm-n3, + .my-sm-n3 { + margin-top: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mr-sm-n3, + .mx-sm-n3 { + margin-right: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mb-sm-n3, + .my-sm-n3 { + margin-bottom: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .ml-sm-n3, + .mx-sm-n3 { + margin-left: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .m-sm-n3\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mt-sm-n3\.5, + .my-sm-n3\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mr-sm-n3\.5, + .mx-sm-n3\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mb-sm-n3\.5, + .my-sm-n3\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .ml-sm-n3\.5, + .mx-sm-n3\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .m-sm-n4 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mt-sm-n4, + .my-sm-n4 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mr-sm-n4, + .mx-sm-n4 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mb-sm-n4, + .my-sm-n4 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .ml-sm-n4, + .mx-sm-n4 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .m-sm-n4\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mt-sm-n4\.5, + .my-sm-n4\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mr-sm-n4\.5, + .mx-sm-n4\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mb-sm-n4\.5, + .my-sm-n4\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .ml-sm-n4\.5, + .mx-sm-n4\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .m-sm-n5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mt-sm-n5, + .my-sm-n5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mr-sm-n5, + .mx-sm-n5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mb-sm-n5, + .my-sm-n5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .ml-sm-n5, + .mx-sm-n5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .m-sm-n5\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mt-sm-n5\.5, + .my-sm-n5\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mr-sm-n5\.5, + .mx-sm-n5\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mb-sm-n5\.5, + .my-sm-n5\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .ml-sm-n5\.5, + .mx-sm-n5\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .m-sm-n6 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mt-sm-n6, + .my-sm-n6 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mr-sm-n6, + .mx-sm-n6 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mb-sm-n6, + .my-sm-n6 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .ml-sm-n6, + .mx-sm-n6 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .m-sm-auto { + margin: auto !important; + } + .mt-sm-auto, + .my-sm-auto { + margin-top: auto !important; + } + .mr-sm-auto, + .mx-sm-auto { + margin-right: auto !important; + } + .mb-sm-auto, + .my-sm-auto { + margin-bottom: auto !important; + } + .ml-sm-auto, + .mx-sm-auto { + margin-left: auto !important; + } +} +@media (min-width: 768px) { + .m-md-0 { + margin: 0 !important; + } + .mt-md-0, + .my-md-0 { + margin-top: 0 !important; + } + .mr-md-0, + .mx-md-0 { + margin-right: 0 !important; + } + .mb-md-0, + .my-md-0 { + margin-bottom: 0 !important; + } + .ml-md-0, + .mx-md-0 { + margin-left: 0 !important; + } + .m-md-1 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mt-md-1, + .my-md-1 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mr-md-1, + .mx-md-1 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mb-md-1, + .my-md-1 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .ml-md-1, + .mx-md-1 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .m-md-1\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mt-md-1\.5, + .my-md-1\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mr-md-1\.5, + .mx-md-1\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mb-md-1\.5, + .my-md-1\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .ml-md-1\.5, + .mx-md-1\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .m-md-2 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mt-md-2, + .my-md-2 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mr-md-2, + .mx-md-2 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mb-md-2, + .my-md-2 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .ml-md-2, + .mx-md-2 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .m-md-2\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mt-md-2\.5, + .my-md-2\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mr-md-2\.5, + .mx-md-2\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mb-md-2\.5, + .my-md-2\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .ml-md-2\.5, + .mx-md-2\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .m-md-3 { + margin: var(--pgn-spacing-spacer-base) !important; + } + .mt-md-3, + .my-md-3 { + margin-top: var(--pgn-spacing-spacer-base) !important; + } + .mr-md-3, + .mx-md-3 { + margin-right: var(--pgn-spacing-spacer-base) !important; + } + .mb-md-3, + .my-md-3 { + margin-bottom: var(--pgn-spacing-spacer-base) !important; + } + .ml-md-3, + .mx-md-3 { + margin-left: var(--pgn-spacing-spacer-base) !important; + } + .m-md-3\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mt-md-3\.5, + .my-md-3\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mr-md-3\.5, + .mx-md-3\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mb-md-3\.5, + .my-md-3\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .ml-md-3\.5, + .mx-md-3\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .m-md-4 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mt-md-4, + .my-md-4 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mr-md-4, + .mx-md-4 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mb-md-4, + .my-md-4 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .ml-md-4, + .mx-md-4 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .m-md-4\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mt-md-4\.5, + .my-md-4\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mr-md-4\.5, + .mx-md-4\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mb-md-4\.5, + .my-md-4\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .ml-md-4\.5, + .mx-md-4\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .m-md-5 { + margin: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mt-md-5, + .my-md-5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mr-md-5, + .mx-md-5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mb-md-5, + .my-md-5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .ml-md-5, + .mx-md-5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .m-md-5\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mt-md-5\.5, + .my-md-5\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mr-md-5\.5, + .mx-md-5\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mb-md-5\.5, + .my-md-5\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .ml-md-5\.5, + .mx-md-5\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .m-md-6 { + margin: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mt-md-6, + .my-md-6 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mr-md-6, + .mx-md-6 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mb-md-6, + .my-md-6 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .ml-md-6, + .mx-md-6 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .p-md-0 { + padding: 0 !important; + } + .pt-md-0, + .py-md-0 { + padding-top: 0 !important; + } + .pr-md-0, + .px-md-0 { + padding-right: 0 !important; + } + .pb-md-0, + .py-md-0 { + padding-bottom: 0 !important; + } + .pl-md-0, + .px-md-0 { + padding-left: 0 !important; + } + .p-md-1 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pt-md-1, + .py-md-1 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pr-md-1, + .px-md-1 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pb-md-1, + .py-md-1 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pl-md-1, + .px-md-1 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .p-md-1\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pt-md-1\.5, + .py-md-1\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pr-md-1\.5, + .px-md-1\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pb-md-1\.5, + .py-md-1\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pl-md-1\.5, + .px-md-1\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .p-md-2 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pt-md-2, + .py-md-2 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pr-md-2, + .px-md-2 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pb-md-2, + .py-md-2 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pl-md-2, + .px-md-2 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .p-md-2\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pt-md-2\.5, + .py-md-2\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pr-md-2\.5, + .px-md-2\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pb-md-2\.5, + .py-md-2\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pl-md-2\.5, + .px-md-2\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .p-md-3 { + padding: var(--pgn-spacing-spacer-base) !important; + } + .pt-md-3, + .py-md-3 { + padding-top: var(--pgn-spacing-spacer-base) !important; + } + .pr-md-3, + .px-md-3 { + padding-right: var(--pgn-spacing-spacer-base) !important; + } + .pb-md-3, + .py-md-3 { + padding-bottom: var(--pgn-spacing-spacer-base) !important; + } + .pl-md-3, + .px-md-3 { + padding-left: var(--pgn-spacing-spacer-base) !important; + } + .p-md-3\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pt-md-3\.5, + .py-md-3\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pr-md-3\.5, + .px-md-3\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pb-md-3\.5, + .py-md-3\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pl-md-3\.5, + .px-md-3\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .p-md-4 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pt-md-4, + .py-md-4 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pr-md-4, + .px-md-4 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pb-md-4, + .py-md-4 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pl-md-4, + .px-md-4 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .p-md-4\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pt-md-4\.5, + .py-md-4\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pr-md-4\.5, + .px-md-4\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pb-md-4\.5, + .py-md-4\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pl-md-4\.5, + .px-md-4\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .p-md-5 { + padding: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pt-md-5, + .py-md-5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pr-md-5, + .px-md-5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pb-md-5, + .py-md-5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pl-md-5, + .px-md-5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .p-md-5\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pt-md-5\.5, + .py-md-5\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pr-md-5\.5, + .px-md-5\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pb-md-5\.5, + .py-md-5\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pl-md-5\.5, + .px-md-5\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .p-md-6 { + padding: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pt-md-6, + .py-md-6 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pr-md-6, + .px-md-6 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pb-md-6, + .py-md-6 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pl-md-6, + .px-md-6 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .m-md-n1 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mt-md-n1, + .my-md-n1 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mr-md-n1, + .mx-md-n1 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mb-md-n1, + .my-md-n1 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .ml-md-n1, + .mx-md-n1 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .m-md-n1\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mt-md-n1\.5, + .my-md-n1\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mr-md-n1\.5, + .mx-md-n1\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mb-md-n1\.5, + .my-md-n1\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .ml-md-n1\.5, + .mx-md-n1\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .m-md-n2 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mt-md-n2, + .my-md-n2 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mr-md-n2, + .mx-md-n2 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mb-md-n2, + .my-md-n2 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .ml-md-n2, + .mx-md-n2 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .m-md-n2\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mt-md-n2\.5, + .my-md-n2\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mr-md-n2\.5, + .mx-md-n2\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mb-md-n2\.5, + .my-md-n2\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .ml-md-n2\.5, + .mx-md-n2\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .m-md-n3 { + margin: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mt-md-n3, + .my-md-n3 { + margin-top: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mr-md-n3, + .mx-md-n3 { + margin-right: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mb-md-n3, + .my-md-n3 { + margin-bottom: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .ml-md-n3, + .mx-md-n3 { + margin-left: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .m-md-n3\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mt-md-n3\.5, + .my-md-n3\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mr-md-n3\.5, + .mx-md-n3\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mb-md-n3\.5, + .my-md-n3\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .ml-md-n3\.5, + .mx-md-n3\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .m-md-n4 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mt-md-n4, + .my-md-n4 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mr-md-n4, + .mx-md-n4 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mb-md-n4, + .my-md-n4 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .ml-md-n4, + .mx-md-n4 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .m-md-n4\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mt-md-n4\.5, + .my-md-n4\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mr-md-n4\.5, + .mx-md-n4\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mb-md-n4\.5, + .my-md-n4\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .ml-md-n4\.5, + .mx-md-n4\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .m-md-n5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mt-md-n5, + .my-md-n5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mr-md-n5, + .mx-md-n5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mb-md-n5, + .my-md-n5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .ml-md-n5, + .mx-md-n5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .m-md-n5\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mt-md-n5\.5, + .my-md-n5\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mr-md-n5\.5, + .mx-md-n5\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mb-md-n5\.5, + .my-md-n5\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .ml-md-n5\.5, + .mx-md-n5\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .m-md-n6 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mt-md-n6, + .my-md-n6 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mr-md-n6, + .mx-md-n6 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mb-md-n6, + .my-md-n6 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .ml-md-n6, + .mx-md-n6 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .m-md-auto { + margin: auto !important; + } + .mt-md-auto, + .my-md-auto { + margin-top: auto !important; + } + .mr-md-auto, + .mx-md-auto { + margin-right: auto !important; + } + .mb-md-auto, + .my-md-auto { + margin-bottom: auto !important; + } + .ml-md-auto, + .mx-md-auto { + margin-left: auto !important; + } +} +@media (min-width: 992px) { + .m-lg-0 { + margin: 0 !important; + } + .mt-lg-0, + .my-lg-0 { + margin-top: 0 !important; + } + .mr-lg-0, + .mx-lg-0 { + margin-right: 0 !important; + } + .mb-lg-0, + .my-lg-0 { + margin-bottom: 0 !important; + } + .ml-lg-0, + .mx-lg-0 { + margin-left: 0 !important; + } + .m-lg-1 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mt-lg-1, + .my-lg-1 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mr-lg-1, + .mx-lg-1 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mb-lg-1, + .my-lg-1 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .ml-lg-1, + .mx-lg-1 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .m-lg-1\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mt-lg-1\.5, + .my-lg-1\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mr-lg-1\.5, + .mx-lg-1\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mb-lg-1\.5, + .my-lg-1\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .ml-lg-1\.5, + .mx-lg-1\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .m-lg-2 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mt-lg-2, + .my-lg-2 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mr-lg-2, + .mx-lg-2 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mb-lg-2, + .my-lg-2 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .ml-lg-2, + .mx-lg-2 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .m-lg-2\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mt-lg-2\.5, + .my-lg-2\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mr-lg-2\.5, + .mx-lg-2\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mb-lg-2\.5, + .my-lg-2\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .ml-lg-2\.5, + .mx-lg-2\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .m-lg-3 { + margin: var(--pgn-spacing-spacer-base) !important; + } + .mt-lg-3, + .my-lg-3 { + margin-top: var(--pgn-spacing-spacer-base) !important; + } + .mr-lg-3, + .mx-lg-3 { + margin-right: var(--pgn-spacing-spacer-base) !important; + } + .mb-lg-3, + .my-lg-3 { + margin-bottom: var(--pgn-spacing-spacer-base) !important; + } + .ml-lg-3, + .mx-lg-3 { + margin-left: var(--pgn-spacing-spacer-base) !important; + } + .m-lg-3\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mt-lg-3\.5, + .my-lg-3\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mr-lg-3\.5, + .mx-lg-3\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mb-lg-3\.5, + .my-lg-3\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .ml-lg-3\.5, + .mx-lg-3\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .m-lg-4 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mt-lg-4, + .my-lg-4 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mr-lg-4, + .mx-lg-4 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mb-lg-4, + .my-lg-4 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .ml-lg-4, + .mx-lg-4 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .m-lg-4\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mt-lg-4\.5, + .my-lg-4\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mr-lg-4\.5, + .mx-lg-4\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mb-lg-4\.5, + .my-lg-4\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .ml-lg-4\.5, + .mx-lg-4\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .m-lg-5 { + margin: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mt-lg-5, + .my-lg-5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mr-lg-5, + .mx-lg-5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mb-lg-5, + .my-lg-5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .ml-lg-5, + .mx-lg-5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .m-lg-5\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mt-lg-5\.5, + .my-lg-5\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mr-lg-5\.5, + .mx-lg-5\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mb-lg-5\.5, + .my-lg-5\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .ml-lg-5\.5, + .mx-lg-5\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .m-lg-6 { + margin: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mt-lg-6, + .my-lg-6 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mr-lg-6, + .mx-lg-6 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mb-lg-6, + .my-lg-6 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .ml-lg-6, + .mx-lg-6 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .p-lg-0 { + padding: 0 !important; + } + .pt-lg-0, + .py-lg-0 { + padding-top: 0 !important; + } + .pr-lg-0, + .px-lg-0 { + padding-right: 0 !important; + } + .pb-lg-0, + .py-lg-0 { + padding-bottom: 0 !important; + } + .pl-lg-0, + .px-lg-0 { + padding-left: 0 !important; + } + .p-lg-1 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pt-lg-1, + .py-lg-1 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pr-lg-1, + .px-lg-1 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pb-lg-1, + .py-lg-1 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pl-lg-1, + .px-lg-1 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .p-lg-1\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pt-lg-1\.5, + .py-lg-1\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pr-lg-1\.5, + .px-lg-1\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pb-lg-1\.5, + .py-lg-1\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pl-lg-1\.5, + .px-lg-1\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .p-lg-2 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pt-lg-2, + .py-lg-2 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pr-lg-2, + .px-lg-2 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pb-lg-2, + .py-lg-2 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pl-lg-2, + .px-lg-2 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .p-lg-2\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pt-lg-2\.5, + .py-lg-2\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pr-lg-2\.5, + .px-lg-2\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pb-lg-2\.5, + .py-lg-2\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pl-lg-2\.5, + .px-lg-2\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .p-lg-3 { + padding: var(--pgn-spacing-spacer-base) !important; + } + .pt-lg-3, + .py-lg-3 { + padding-top: var(--pgn-spacing-spacer-base) !important; + } + .pr-lg-3, + .px-lg-3 { + padding-right: var(--pgn-spacing-spacer-base) !important; + } + .pb-lg-3, + .py-lg-3 { + padding-bottom: var(--pgn-spacing-spacer-base) !important; + } + .pl-lg-3, + .px-lg-3 { + padding-left: var(--pgn-spacing-spacer-base) !important; + } + .p-lg-3\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pt-lg-3\.5, + .py-lg-3\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pr-lg-3\.5, + .px-lg-3\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pb-lg-3\.5, + .py-lg-3\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pl-lg-3\.5, + .px-lg-3\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .p-lg-4 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pt-lg-4, + .py-lg-4 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pr-lg-4, + .px-lg-4 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pb-lg-4, + .py-lg-4 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pl-lg-4, + .px-lg-4 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .p-lg-4\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pt-lg-4\.5, + .py-lg-4\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pr-lg-4\.5, + .px-lg-4\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pb-lg-4\.5, + .py-lg-4\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pl-lg-4\.5, + .px-lg-4\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .p-lg-5 { + padding: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pt-lg-5, + .py-lg-5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pr-lg-5, + .px-lg-5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pb-lg-5, + .py-lg-5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pl-lg-5, + .px-lg-5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .p-lg-5\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pt-lg-5\.5, + .py-lg-5\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pr-lg-5\.5, + .px-lg-5\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pb-lg-5\.5, + .py-lg-5\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pl-lg-5\.5, + .px-lg-5\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .p-lg-6 { + padding: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pt-lg-6, + .py-lg-6 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pr-lg-6, + .px-lg-6 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pb-lg-6, + .py-lg-6 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pl-lg-6, + .px-lg-6 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .m-lg-n1 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mt-lg-n1, + .my-lg-n1 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mr-lg-n1, + .mx-lg-n1 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mb-lg-n1, + .my-lg-n1 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .ml-lg-n1, + .mx-lg-n1 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .m-lg-n1\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mt-lg-n1\.5, + .my-lg-n1\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mr-lg-n1\.5, + .mx-lg-n1\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mb-lg-n1\.5, + .my-lg-n1\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .ml-lg-n1\.5, + .mx-lg-n1\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .m-lg-n2 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mt-lg-n2, + .my-lg-n2 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mr-lg-n2, + .mx-lg-n2 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mb-lg-n2, + .my-lg-n2 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .ml-lg-n2, + .mx-lg-n2 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .m-lg-n2\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mt-lg-n2\.5, + .my-lg-n2\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mr-lg-n2\.5, + .mx-lg-n2\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mb-lg-n2\.5, + .my-lg-n2\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .ml-lg-n2\.5, + .mx-lg-n2\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .m-lg-n3 { + margin: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mt-lg-n3, + .my-lg-n3 { + margin-top: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mr-lg-n3, + .mx-lg-n3 { + margin-right: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mb-lg-n3, + .my-lg-n3 { + margin-bottom: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .ml-lg-n3, + .mx-lg-n3 { + margin-left: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .m-lg-n3\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mt-lg-n3\.5, + .my-lg-n3\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mr-lg-n3\.5, + .mx-lg-n3\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mb-lg-n3\.5, + .my-lg-n3\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .ml-lg-n3\.5, + .mx-lg-n3\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .m-lg-n4 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mt-lg-n4, + .my-lg-n4 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mr-lg-n4, + .mx-lg-n4 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mb-lg-n4, + .my-lg-n4 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .ml-lg-n4, + .mx-lg-n4 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .m-lg-n4\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mt-lg-n4\.5, + .my-lg-n4\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mr-lg-n4\.5, + .mx-lg-n4\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mb-lg-n4\.5, + .my-lg-n4\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .ml-lg-n4\.5, + .mx-lg-n4\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .m-lg-n5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mt-lg-n5, + .my-lg-n5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mr-lg-n5, + .mx-lg-n5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mb-lg-n5, + .my-lg-n5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .ml-lg-n5, + .mx-lg-n5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .m-lg-n5\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mt-lg-n5\.5, + .my-lg-n5\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mr-lg-n5\.5, + .mx-lg-n5\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mb-lg-n5\.5, + .my-lg-n5\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .ml-lg-n5\.5, + .mx-lg-n5\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .m-lg-n6 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mt-lg-n6, + .my-lg-n6 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mr-lg-n6, + .mx-lg-n6 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mb-lg-n6, + .my-lg-n6 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .ml-lg-n6, + .mx-lg-n6 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .m-lg-auto { + margin: auto !important; + } + .mt-lg-auto, + .my-lg-auto { + margin-top: auto !important; + } + .mr-lg-auto, + .mx-lg-auto { + margin-right: auto !important; + } + .mb-lg-auto, + .my-lg-auto { + margin-bottom: auto !important; + } + .ml-lg-auto, + .mx-lg-auto { + margin-left: auto !important; + } +} +@media (min-width: 1200px) { + .m-xl-0 { + margin: 0 !important; + } + .mt-xl-0, + .my-xl-0 { + margin-top: 0 !important; + } + .mr-xl-0, + .mx-xl-0 { + margin-right: 0 !important; + } + .mb-xl-0, + .my-xl-0 { + margin-bottom: 0 !important; + } + .ml-xl-0, + .mx-xl-0 { + margin-left: 0 !important; + } + .m-xl-1 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mt-xl-1, + .my-xl-1 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mr-xl-1, + .mx-xl-1 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mb-xl-1, + .my-xl-1 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .ml-xl-1, + .mx-xl-1 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .m-xl-1\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mt-xl-1\.5, + .my-xl-1\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mr-xl-1\.5, + .mx-xl-1\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mb-xl-1\.5, + .my-xl-1\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .ml-xl-1\.5, + .mx-xl-1\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .m-xl-2 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mt-xl-2, + .my-xl-2 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mr-xl-2, + .mx-xl-2 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mb-xl-2, + .my-xl-2 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .ml-xl-2, + .mx-xl-2 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .m-xl-2\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mt-xl-2\.5, + .my-xl-2\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mr-xl-2\.5, + .mx-xl-2\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mb-xl-2\.5, + .my-xl-2\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .ml-xl-2\.5, + .mx-xl-2\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .m-xl-3 { + margin: var(--pgn-spacing-spacer-base) !important; + } + .mt-xl-3, + .my-xl-3 { + margin-top: var(--pgn-spacing-spacer-base) !important; + } + .mr-xl-3, + .mx-xl-3 { + margin-right: var(--pgn-spacing-spacer-base) !important; + } + .mb-xl-3, + .my-xl-3 { + margin-bottom: var(--pgn-spacing-spacer-base) !important; + } + .ml-xl-3, + .mx-xl-3 { + margin-left: var(--pgn-spacing-spacer-base) !important; + } + .m-xl-3\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mt-xl-3\.5, + .my-xl-3\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mr-xl-3\.5, + .mx-xl-3\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mb-xl-3\.5, + .my-xl-3\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .ml-xl-3\.5, + .mx-xl-3\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .m-xl-4 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mt-xl-4, + .my-xl-4 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mr-xl-4, + .mx-xl-4 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mb-xl-4, + .my-xl-4 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .ml-xl-4, + .mx-xl-4 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .m-xl-4\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mt-xl-4\.5, + .my-xl-4\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mr-xl-4\.5, + .mx-xl-4\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mb-xl-4\.5, + .my-xl-4\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .ml-xl-4\.5, + .mx-xl-4\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .m-xl-5 { + margin: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mt-xl-5, + .my-xl-5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mr-xl-5, + .mx-xl-5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mb-xl-5, + .my-xl-5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .ml-xl-5, + .mx-xl-5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .m-xl-5\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mt-xl-5\.5, + .my-xl-5\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mr-xl-5\.5, + .mx-xl-5\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mb-xl-5\.5, + .my-xl-5\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .ml-xl-5\.5, + .mx-xl-5\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .m-xl-6 { + margin: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mt-xl-6, + .my-xl-6 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mr-xl-6, + .mx-xl-6 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mb-xl-6, + .my-xl-6 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .ml-xl-6, + .mx-xl-6 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .p-xl-0 { + padding: 0 !important; + } + .pt-xl-0, + .py-xl-0 { + padding-top: 0 !important; + } + .pr-xl-0, + .px-xl-0 { + padding-right: 0 !important; + } + .pb-xl-0, + .py-xl-0 { + padding-bottom: 0 !important; + } + .pl-xl-0, + .px-xl-0 { + padding-left: 0 !important; + } + .p-xl-1 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pt-xl-1, + .py-xl-1 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pr-xl-1, + .px-xl-1 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pb-xl-1, + .py-xl-1 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pl-xl-1, + .px-xl-1 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .p-xl-1\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pt-xl-1\.5, + .py-xl-1\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pr-xl-1\.5, + .px-xl-1\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pb-xl-1\.5, + .py-xl-1\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pl-xl-1\.5, + .px-xl-1\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .p-xl-2 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pt-xl-2, + .py-xl-2 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pr-xl-2, + .px-xl-2 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pb-xl-2, + .py-xl-2 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pl-xl-2, + .px-xl-2 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .p-xl-2\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pt-xl-2\.5, + .py-xl-2\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pr-xl-2\.5, + .px-xl-2\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pb-xl-2\.5, + .py-xl-2\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pl-xl-2\.5, + .px-xl-2\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .p-xl-3 { + padding: var(--pgn-spacing-spacer-base) !important; + } + .pt-xl-3, + .py-xl-3 { + padding-top: var(--pgn-spacing-spacer-base) !important; + } + .pr-xl-3, + .px-xl-3 { + padding-right: var(--pgn-spacing-spacer-base) !important; + } + .pb-xl-3, + .py-xl-3 { + padding-bottom: var(--pgn-spacing-spacer-base) !important; + } + .pl-xl-3, + .px-xl-3 { + padding-left: var(--pgn-spacing-spacer-base) !important; + } + .p-xl-3\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pt-xl-3\.5, + .py-xl-3\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pr-xl-3\.5, + .px-xl-3\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pb-xl-3\.5, + .py-xl-3\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pl-xl-3\.5, + .px-xl-3\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .p-xl-4 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pt-xl-4, + .py-xl-4 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pr-xl-4, + .px-xl-4 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pb-xl-4, + .py-xl-4 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pl-xl-4, + .px-xl-4 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .p-xl-4\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pt-xl-4\.5, + .py-xl-4\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pr-xl-4\.5, + .px-xl-4\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pb-xl-4\.5, + .py-xl-4\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pl-xl-4\.5, + .px-xl-4\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .p-xl-5 { + padding: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pt-xl-5, + .py-xl-5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pr-xl-5, + .px-xl-5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pb-xl-5, + .py-xl-5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pl-xl-5, + .px-xl-5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .p-xl-5\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pt-xl-5\.5, + .py-xl-5\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pr-xl-5\.5, + .px-xl-5\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pb-xl-5\.5, + .py-xl-5\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pl-xl-5\.5, + .px-xl-5\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .p-xl-6 { + padding: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pt-xl-6, + .py-xl-6 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pr-xl-6, + .px-xl-6 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pb-xl-6, + .py-xl-6 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pl-xl-6, + .px-xl-6 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .m-xl-n1 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mt-xl-n1, + .my-xl-n1 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mr-xl-n1, + .mx-xl-n1 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mb-xl-n1, + .my-xl-n1 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .ml-xl-n1, + .mx-xl-n1 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .m-xl-n1\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mt-xl-n1\.5, + .my-xl-n1\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mr-xl-n1\.5, + .mx-xl-n1\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mb-xl-n1\.5, + .my-xl-n1\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .ml-xl-n1\.5, + .mx-xl-n1\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .m-xl-n2 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mt-xl-n2, + .my-xl-n2 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mr-xl-n2, + .mx-xl-n2 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mb-xl-n2, + .my-xl-n2 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .ml-xl-n2, + .mx-xl-n2 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .m-xl-n2\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mt-xl-n2\.5, + .my-xl-n2\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mr-xl-n2\.5, + .mx-xl-n2\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mb-xl-n2\.5, + .my-xl-n2\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .ml-xl-n2\.5, + .mx-xl-n2\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .m-xl-n3 { + margin: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mt-xl-n3, + .my-xl-n3 { + margin-top: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mr-xl-n3, + .mx-xl-n3 { + margin-right: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mb-xl-n3, + .my-xl-n3 { + margin-bottom: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .ml-xl-n3, + .mx-xl-n3 { + margin-left: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .m-xl-n3\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mt-xl-n3\.5, + .my-xl-n3\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mr-xl-n3\.5, + .mx-xl-n3\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mb-xl-n3\.5, + .my-xl-n3\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .ml-xl-n3\.5, + .mx-xl-n3\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .m-xl-n4 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mt-xl-n4, + .my-xl-n4 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mr-xl-n4, + .mx-xl-n4 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mb-xl-n4, + .my-xl-n4 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .ml-xl-n4, + .mx-xl-n4 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .m-xl-n4\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mt-xl-n4\.5, + .my-xl-n4\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mr-xl-n4\.5, + .mx-xl-n4\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mb-xl-n4\.5, + .my-xl-n4\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .ml-xl-n4\.5, + .mx-xl-n4\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .m-xl-n5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mt-xl-n5, + .my-xl-n5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mr-xl-n5, + .mx-xl-n5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mb-xl-n5, + .my-xl-n5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .ml-xl-n5, + .mx-xl-n5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .m-xl-n5\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mt-xl-n5\.5, + .my-xl-n5\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mr-xl-n5\.5, + .mx-xl-n5\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mb-xl-n5\.5, + .my-xl-n5\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .ml-xl-n5\.5, + .mx-xl-n5\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .m-xl-n6 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mt-xl-n6, + .my-xl-n6 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mr-xl-n6, + .mx-xl-n6 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mb-xl-n6, + .my-xl-n6 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .ml-xl-n6, + .mx-xl-n6 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .m-xl-auto { + margin: auto !important; + } + .mt-xl-auto, + .my-xl-auto { + margin-top: auto !important; + } + .mr-xl-auto, + .mx-xl-auto { + margin-right: auto !important; + } + .mb-xl-auto, + .my-xl-auto { + margin-bottom: auto !important; + } + .ml-xl-auto, + .mx-xl-auto { + margin-left: auto !important; + } +} +@media (min-width: 1400px) { + .m-xxl-0 { + margin: 0 !important; + } + .mt-xxl-0, + .my-xxl-0 { + margin-top: 0 !important; + } + .mr-xxl-0, + .mx-xxl-0 { + margin-right: 0 !important; + } + .mb-xxl-0, + .my-xxl-0 { + margin-bottom: 0 !important; + } + .ml-xxl-0, + .mx-xxl-0 { + margin-left: 0 !important; + } + .m-xxl-1 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mt-xxl-1, + .my-xxl-1 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mr-xxl-1, + .mx-xxl-1 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .mb-xxl-1, + .my-xxl-1 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .ml-xxl-1, + .mx-xxl-1 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .m-xxl-1\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mt-xxl-1\.5, + .my-xxl-1\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mr-xxl-1\.5, + .mx-xxl-1\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .mb-xxl-1\.5, + .my-xxl-1\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .ml-xxl-1\.5, + .mx-xxl-1\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .m-xxl-2 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mt-xxl-2, + .my-xxl-2 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mr-xxl-2, + .mx-xxl-2 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .mb-xxl-2, + .my-xxl-2 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .ml-xxl-2, + .mx-xxl-2 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .m-xxl-2\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mt-xxl-2\.5, + .my-xxl-2\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mr-xxl-2\.5, + .mx-xxl-2\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .mb-xxl-2\.5, + .my-xxl-2\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .ml-xxl-2\.5, + .mx-xxl-2\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .m-xxl-3 { + margin: var(--pgn-spacing-spacer-base) !important; + } + .mt-xxl-3, + .my-xxl-3 { + margin-top: var(--pgn-spacing-spacer-base) !important; + } + .mr-xxl-3, + .mx-xxl-3 { + margin-right: var(--pgn-spacing-spacer-base) !important; + } + .mb-xxl-3, + .my-xxl-3 { + margin-bottom: var(--pgn-spacing-spacer-base) !important; + } + .ml-xxl-3, + .mx-xxl-3 { + margin-left: var(--pgn-spacing-spacer-base) !important; + } + .m-xxl-3\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mt-xxl-3\.5, + .my-xxl-3\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mr-xxl-3\.5, + .mx-xxl-3\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .mb-xxl-3\.5, + .my-xxl-3\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .ml-xxl-3\.5, + .mx-xxl-3\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .m-xxl-4 { + margin: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mt-xxl-4, + .my-xxl-4 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mr-xxl-4, + .mx-xxl-4 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .mb-xxl-4, + .my-xxl-4 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .ml-xxl-4, + .mx-xxl-4 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .m-xxl-4\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mt-xxl-4\.5, + .my-xxl-4\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mr-xxl-4\.5, + .mx-xxl-4\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .mb-xxl-4\.5, + .my-xxl-4\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .ml-xxl-4\.5, + .mx-xxl-4\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .m-xxl-5 { + margin: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mt-xxl-5, + .my-xxl-5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mr-xxl-5, + .mx-xxl-5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .mb-xxl-5, + .my-xxl-5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .ml-xxl-5, + .mx-xxl-5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .m-xxl-5\.5 { + margin: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mt-xxl-5\.5, + .my-xxl-5\.5 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mr-xxl-5\.5, + .mx-xxl-5\.5 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .mb-xxl-5\.5, + .my-xxl-5\.5 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .ml-xxl-5\.5, + .mx-xxl-5\.5 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .m-xxl-6 { + margin: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mt-xxl-6, + .my-xxl-6 { + margin-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mr-xxl-6, + .mx-xxl-6 { + margin-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .mb-xxl-6, + .my-xxl-6 { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .ml-xxl-6, + .mx-xxl-6 { + margin-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .p-xxl-0 { + padding: 0 !important; + } + .pt-xxl-0, + .py-xxl-0 { + padding-top: 0 !important; + } + .pr-xxl-0, + .px-xxl-0 { + padding-right: 0 !important; + } + .pb-xxl-0, + .py-xxl-0 { + padding-bottom: 0 !important; + } + .pl-xxl-0, + .px-xxl-0 { + padding-left: 0 !important; + } + .p-xxl-1 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pt-xxl-1, + .py-xxl-1 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pr-xxl-1, + .px-xxl-1 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pb-xxl-1, + .py-xxl-1 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .pl-xxl-1, + .px-xxl-1 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; + } + .p-xxl-1\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pt-xxl-1\.5, + .py-xxl-1\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pr-xxl-1\.5, + .px-xxl-1\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pb-xxl-1\.5, + .py-xxl-1\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .pl-xxl-1\.5, + .px-xxl-1\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; + } + .p-xxl-2 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pt-xxl-2, + .py-xxl-2 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pr-xxl-2, + .px-xxl-2 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pb-xxl-2, + .py-xxl-2 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .pl-xxl-2, + .px-xxl-2 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; + } + .p-xxl-2\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pt-xxl-2\.5, + .py-xxl-2\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pr-xxl-2\.5, + .px-xxl-2\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pb-xxl-2\.5, + .py-xxl-2\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .pl-xxl-2\.5, + .px-xxl-2\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; + } + .p-xxl-3 { + padding: var(--pgn-spacing-spacer-base) !important; + } + .pt-xxl-3, + .py-xxl-3 { + padding-top: var(--pgn-spacing-spacer-base) !important; + } + .pr-xxl-3, + .px-xxl-3 { + padding-right: var(--pgn-spacing-spacer-base) !important; + } + .pb-xxl-3, + .py-xxl-3 { + padding-bottom: var(--pgn-spacing-spacer-base) !important; + } + .pl-xxl-3, + .px-xxl-3 { + padding-left: var(--pgn-spacing-spacer-base) !important; + } + .p-xxl-3\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pt-xxl-3\.5, + .py-xxl-3\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pr-xxl-3\.5, + .px-xxl-3\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pb-xxl-3\.5, + .py-xxl-3\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .pl-xxl-3\.5, + .px-xxl-3\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; + } + .p-xxl-4 { + padding: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pt-xxl-4, + .py-xxl-4 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pr-xxl-4, + .px-xxl-4 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pb-xxl-4, + .py-xxl-4 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .pl-xxl-4, + .px-xxl-4 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; + } + .p-xxl-4\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pt-xxl-4\.5, + .py-xxl-4\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pr-xxl-4\.5, + .px-xxl-4\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pb-xxl-4\.5, + .py-xxl-4\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .pl-xxl-4\.5, + .px-xxl-4\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 2) !important; + } + .p-xxl-5 { + padding: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pt-xxl-5, + .py-xxl-5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pr-xxl-5, + .px-xxl-5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pb-xxl-5, + .py-xxl-5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .pl-xxl-5, + .px-xxl-5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 3) !important; + } + .p-xxl-5\.5 { + padding: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pt-xxl-5\.5, + .py-xxl-5\.5 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pr-xxl-5\.5, + .px-xxl-5\.5 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pb-xxl-5\.5, + .py-xxl-5\.5 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .pl-xxl-5\.5, + .px-xxl-5\.5 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 4) !important; + } + .p-xxl-6 { + padding: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pt-xxl-6, + .py-xxl-6 { + padding-top: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pr-xxl-6, + .px-xxl-6 { + padding-right: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pb-xxl-6, + .py-xxl-6 { + padding-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .pl-xxl-6, + .px-xxl-6 { + padding-left: calc(var(--pgn-spacing-spacer-base) * 5) !important; + } + .m-xxl-n1 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mt-xxl-n1, + .my-xxl-n1 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mr-xxl-n1, + .mx-xxl-n1 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .mb-xxl-n1, + .my-xxl-n1 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .ml-xxl-n1, + .mx-xxl-n1 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.25)) !important; + } + .m-xxl-n1\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mt-xxl-n1\.5, + .my-xxl-n1\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mr-xxl-n1\.5, + .mx-xxl-n1\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .mb-xxl-n1\.5, + .my-xxl-n1\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .ml-xxl-n1\.5, + .mx-xxl-n1\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.375)) !important; + } + .m-xxl-n2 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mt-xxl-n2, + .my-xxl-n2 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mr-xxl-n2, + .mx-xxl-n2 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .mb-xxl-n2, + .my-xxl-n2 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .ml-xxl-n2, + .mx-xxl-n2 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.5)) !important; + } + .m-xxl-n2\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mt-xxl-n2\.5, + .my-xxl-n2\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mr-xxl-n2\.5, + .mx-xxl-n2\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .mb-xxl-n2\.5, + .my-xxl-n2\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .ml-xxl-n2\.5, + .mx-xxl-n2\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 0.75)) !important; + } + .m-xxl-n3 { + margin: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mt-xxl-n3, + .my-xxl-n3 { + margin-top: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mr-xxl-n3, + .mx-xxl-n3 { + margin-right: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .mb-xxl-n3, + .my-xxl-n3 { + margin-bottom: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .ml-xxl-n3, + .mx-xxl-n3 { + margin-left: calc(-1 * var(--pgn-spacing-spacer-base)) !important; + } + .m-xxl-n3\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mt-xxl-n3\.5, + .my-xxl-n3\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mr-xxl-n3\.5, + .mx-xxl-n3\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .mb-xxl-n3\.5, + .my-xxl-n3\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .ml-xxl-n3\.5, + .mx-xxl-n3\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important; + } + .m-xxl-n4 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mt-xxl-n4, + .my-xxl-n4 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mr-xxl-n4, + .mx-xxl-n4 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .mb-xxl-n4, + .my-xxl-n4 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .ml-xxl-n4, + .mx-xxl-n4 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important; + } + .m-xxl-n4\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mt-xxl-n4\.5, + .my-xxl-n4\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mr-xxl-n4\.5, + .mx-xxl-n4\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .mb-xxl-n4\.5, + .my-xxl-n4\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .ml-xxl-n4\.5, + .mx-xxl-n4\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important; + } + .m-xxl-n5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mt-xxl-n5, + .my-xxl-n5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mr-xxl-n5, + .mx-xxl-n5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .mb-xxl-n5, + .my-xxl-n5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .ml-xxl-n5, + .mx-xxl-n5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important; + } + .m-xxl-n5\.5 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mt-xxl-n5\.5, + .my-xxl-n5\.5 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mr-xxl-n5\.5, + .mx-xxl-n5\.5 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .mb-xxl-n5\.5, + .my-xxl-n5\.5 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .ml-xxl-n5\.5, + .mx-xxl-n5\.5 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important; + } + .m-xxl-n6 { + margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mt-xxl-n6, + .my-xxl-n6 { + margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mr-xxl-n6, + .mx-xxl-n6 { + margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .mb-xxl-n6, + .my-xxl-n6 { + margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .ml-xxl-n6, + .mx-xxl-n6 { + margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important; + } + .m-xxl-auto { + margin: auto !important; + } + .mt-xxl-auto, + .my-xxl-auto { + margin-top: auto !important; + } + .mr-xxl-auto, + .mx-xxl-auto { + margin-right: auto !important; + } + .mb-xxl-auto, + .my-xxl-auto { + margin-bottom: auto !important; + } + .ml-xxl-auto, + .mx-xxl-auto { + margin-left: auto !important; + } +} +.text-monospace { + font-family: var(--pgn-typography-font-family-monospace) !important; +} +.text-justify { + text-align: justify !important; +} +.text-wrap { + white-space: normal !important; +} +.text-nowrap { + white-space: nowrap !important; +} +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.text-left { + text-align: left !important; +} +.text-right { + text-align: right !important; +} +.text-center { + text-align: center !important; +} +@media (min-width: 576px) { + .text-sm-left { + text-align: left !important; + } + .text-sm-right { + text-align: right !important; + } + .text-sm-center { + text-align: center !important; + } +} +@media (min-width: 768px) { + .text-md-left { + text-align: left !important; + } + .text-md-right { + text-align: right !important; + } + .text-md-center { + text-align: center !important; + } +} +@media (min-width: 992px) { + .text-lg-left { + text-align: left !important; + } + .text-lg-right { + text-align: right !important; + } + .text-lg-center { + text-align: center !important; + } +} +@media (min-width: 1200px) { + .text-xl-left { + text-align: left !important; + } + .text-xl-right { + text-align: right !important; + } + .text-xl-center { + text-align: center !important; + } +} +@media (min-width: 1400px) { + .text-xxl-left { + text-align: left !important; + } + .text-xxl-right { + text-align: right !important; + } + .text-xxl-center { + text-align: center !important; + } +} +.text-lowercase { + text-transform: lowercase !important; +} +.text-uppercase { + text-transform: uppercase !important; +} +.text-capitalize { + text-transform: capitalize !important; +} +.font-weight-light { + font-weight: var(--pgn-typography-font-weight-light) !important; +} +.font-weight-lighter { + font-weight: var(--pgn-typography-font-weight-lighter) !important; +} +.font-weight-normal { + font-weight: var(--pgn-typography-font-weight-normal) !important; +} +.font-weight-semi-bold { + font-weight: var(--pgn-typography-font-weight-semi-bold) !important; +} +.font-weight-bold { + font-weight: var(--pgn-typography-font-weight-bold) !important; +} +.font-weight-bolder { + font-weight: var(--pgn-typography-font-weight-bolder) !important; +} +.font-italic { + font-style: italic !important; +} +.text-white { + color: var(--pgn-color-white) !important; +} +.text-body { + color: var(--pgn-color-body-base) !important; +} +.text-muted { + color: var(--pgn-color-text-muted) !important; +} +.text-black-50 { + color: var(--pgn-color-text-50-black) !important; +} +.text-white-50 { + color: var(--pgn-color-text-50-white) !important; +} +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} +.text-decoration-none { + text-decoration: none !important; +} +.text-break { + word-break: break-word !important; + word-wrap: break-word !important; +} +.text-reset { + color: inherit !important; +} +.bg-white { + background-color: var(--pgn-color-white) !important; +} +.bg-transparent { + background-color: transparent !important; +} +.border { + border: var(--pgn-size-border-width) solid var(--pgn-color-border) !important; +} +.border-top { + border-top: var(--pgn-size-border-width) solid var(--pgn-color-border) !important; +} +.border-right { + border-right: var(--pgn-size-border-width) solid var(--pgn-color-border) !important; +} +.border-bottom { + border-bottom: var(--pgn-size-border-width) solid var(--pgn-color-border) !important; +} +.border-left { + border-left: var(--pgn-size-border-width) solid var(--pgn-color-border) !important; +} +.border-0 { + border: 0 !important; +} +.border-top-0 { + border-top: 0 !important; +} +.border-right-0 { + border-right: 0 !important; +} +.border-bottom-0 { + border-bottom: 0 !important; +} +.border-left-0 { + border-left: 0 !important; +} +.border-white { + border-color: var(--pgn-color-white) !important; +} +.rounded-sm { + border-radius: var(--pgn-size-border-radius-sm) !important; +} +.rounded { + border-radius: var(--pgn-size-border-radius-base) !important; +} +.rounded-top { + border-top-left-radius: var(--pgn-size-border-radius-base) !important; + border-top-right-radius: var(--pgn-size-border-radius-base) !important; +} +.rounded-right { + border-top-right-radius: var(--pgn-size-border-radius-base) !important; + border-bottom-right-radius: var(--pgn-size-border-radius-base) !important; +} +.rounded-bottom { + border-bottom-right-radius: var(--pgn-size-border-radius-base) !important; + border-bottom-left-radius: var(--pgn-size-border-radius-base) !important; +} +.rounded-left { + border-top-left-radius: var(--pgn-size-border-radius-base) !important; + border-bottom-left-radius: var(--pgn-size-border-radius-base) !important; +} +.rounded-lg { + border-radius: var(--pgn-size-border-radius-lg) !important; +} +.rounded-circle { + border-radius: 50% !important; +} +.rounded-pill { + border-radius: var(--pgn-size-rounded-pill) !important; +} +.rounded-0 { + border-radius: 0 !important; +} +.x-small { + font-size: var(--pgn-typography-font-size-xs) !important; +} +.micro { + font-size: var(--pgn-typography-font-size-micro) !important; + font-weight: normal; + line-height: var(--pgn-typography-line-height-micro) !important; +} +.font-size-normal { + font-size: var(--pgn-typography-font-size-base) !important; +} +.mw-xs { + max-width: var(--pgn-size-container-max-width-xs) !important; +} +.mw-sm { + max-width: var(--pgn-size-container-max-width-sm) !important; +} +.mw-md { + max-width: var(--pgn-size-container-max-width-md) !important; +} +.mw-lg { + max-width: var(--pgn-size-container-max-width-lg) !important; +} +.mw-xl { + max-width: var(--pgn-size-container-max-width-xl) !important; +} +.icon-spin { + animation: spinner-border 0.75s linear infinite; + -webkit-animation: spinner-border 0.75s linear infinite; +} +@media (min-width: 0) { + .w-xs-25 { + width: 25% !important; + } +} +@media (min-width: 0) { + .w-xs-50 { + width: 50% !important; + } +} +@media (min-width: 0) { + .w-xs-75 { + width: 75% !important; + } +} +@media (min-width: 0) { + .w-xs-100 { + width: 100% !important; + } +} +@media (min-width: 0) { + .w-xs-auto { + width: auto !important; + } +} +@media (min-width: 576px) { + .w-sm-25 { + width: 25% !important; + } +} +@media (min-width: 576px) { + .w-sm-50 { + width: 50% !important; + } +} +@media (min-width: 576px) { + .w-sm-75 { + width: 75% !important; + } +} +@media (min-width: 576px) { + .w-sm-100 { + width: 100% !important; + } +} +@media (min-width: 576px) { + .w-sm-auto { + width: auto !important; + } +} +@media (min-width: 768px) { + .w-md-25 { + width: 25% !important; + } +} +@media (min-width: 768px) { + .w-md-50 { + width: 50% !important; + } +} +@media (min-width: 768px) { + .w-md-75 { + width: 75% !important; + } +} +@media (min-width: 768px) { + .w-md-100 { + width: 100% !important; + } +} +@media (min-width: 768px) { + .w-md-auto { + width: auto !important; + } +} +@media (min-width: 992px) { + .w-lg-25 { + width: 25% !important; + } +} +@media (min-width: 992px) { + .w-lg-50 { + width: 50% !important; + } +} +@media (min-width: 992px) { + .w-lg-75 { + width: 75% !important; + } +} +@media (min-width: 992px) { + .w-lg-100 { + width: 100% !important; + } +} +@media (min-width: 992px) { + .w-lg-auto { + width: auto !important; + } +} +@media (min-width: 1200px) { + .w-xl-25 { + width: 25% !important; + } +} +@media (min-width: 1200px) { + .w-xl-50 { + width: 50% !important; + } +} +@media (min-width: 1200px) { + .w-xl-75 { + width: 75% !important; + } +} +@media (min-width: 1200px) { + .w-xl-100 { + width: 100% !important; + } +} +@media (min-width: 1200px) { + .w-xl-auto { + width: auto !important; + } +} +@media (min-width: 1400px) { + .w-xxl-25 { + width: 25% !important; + } +} +@media (min-width: 1400px) { + .w-xxl-50 { + width: 50% !important; + } +} +@media (min-width: 1400px) { + .w-xxl-75 { + width: 75% !important; + } +} +@media (min-width: 1400px) { + .w-xxl-100 { + width: 100% !important; + } +} +@media (min-width: 1400px) { + .w-xxl-auto { + width: auto !important; + } +} +.mis-0 { + margin-inline-start: 0 !important; +} +.mie-0 { + margin-inline-end: 0 !important; +} +.mis-1 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.mie-1 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 0.25) !important; +} +.mis-1\.5 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.mie-1\.5 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 0.375) !important; +} +.mis-2 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.mie-2 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 0.5) !important; +} +.mis-2\.5 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.mie-2\.5 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 0.75) !important; +} +.mis-3 { + margin-inline-start: var(--pgn-spacing-spacer-base) !important; +} +.mie-3 { + margin-inline-end: var(--pgn-spacing-spacer-base) !important; +} +.mis-3\.5 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.mie-3\.5 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 1.25) !important; +} +.mis-4 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.mie-4 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; +} +.mis-4\.5 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.mie-4\.5 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 2) !important; +} +.mis-5 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.mie-5 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 3) !important; +} +.mis-5\.5 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.mie-5\.5 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 4) !important; +} +.mis-6 { + margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.mie-6 { + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 5) !important; +} +.mis-auto { + margin-inline-start: auto !important; +} +.mie-auto { + margin-inline-end: auto !important; +} +.zindex-0 { + z-index: 0 !important; +} +.zindex-1 { + z-index: 200 !important; +} +.zindex-2 { + z-index: 400 !important; +} +.zindex-3 { + z-index: 600 !important; +} +.zindex-4 { + z-index: 800 !important; +} +.zindex-5 { + z-index: 1000 !important; +} +.zindex-6 { + z-index: 1200 !important; +} +.zindex-7 { + z-index: 1400 !important; +} +.zindex-8 { + z-index: 1600 !important; +} +.zindex-9 { + z-index: 1800 !important; +} +.zindex-10 { + z-index: 2000 !important; +} +.box-shadow-down-1 { + box-shadow: var(--pgn-elevation-box-shadow-down-1); +} +.box-shadow-up-1 { + box-shadow: var(--pgn-elevation-box-shadow-up-1); +} +.box-shadow-right-1 { + box-shadow: var(--pgn-elevation-box-shadow-right-1); +} +.box-shadow-left-1 { + box-shadow: var(--pgn-elevation-box-shadow-left-1); +} +.box-shadow-centered-1 { + box-shadow: var(--pgn-elevation-box-shadow-centered-1); +} +.box-shadow-down-2 { + box-shadow: var(--pgn-elevation-box-shadow-down-2); +} +.box-shadow-up-2 { + box-shadow: var(--pgn-elevation-box-shadow-up-2); +} +.box-shadow-right-2 { + box-shadow: var(--pgn-elevation-box-shadow-right-2); +} +.box-shadow-left-2 { + box-shadow: var(--pgn-elevation-box-shadow-left-2); +} +.box-shadow-centered-2 { + box-shadow: var(--pgn-elevation-box-shadow-centered-2); +} +.box-shadow-down-3 { + box-shadow: var(--pgn-elevation-box-shadow-down-3); +} +.box-shadow-up-3 { + box-shadow: var(--pgn-elevation-box-shadow-up-3); +} +.box-shadow-right-3 { + box-shadow: var(--pgn-elevation-box-shadow-right-3); +} +.box-shadow-left-3 { + box-shadow: var(--pgn-elevation-box-shadow-left-3); +} +.box-shadow-centered-3 { + box-shadow: var(--pgn-elevation-box-shadow-centered-3); +} +.box-shadow-down-4 { + box-shadow: var(--pgn-elevation-box-shadow-down-4); +} +.box-shadow-up-4 { + box-shadow: var(--pgn-elevation-box-shadow-up-4); +} +.box-shadow-right-4 { + box-shadow: var(--pgn-elevation-box-shadow-right-4); +} +.box-shadow-left-4 { + box-shadow: var(--pgn-elevation-box-shadow-left-4); +} +.box-shadow-centered-4 { + box-shadow: var(--pgn-elevation-box-shadow-centered-4); +} +.box-shadow-down-5 { + box-shadow: var(--pgn-elevation-box-shadow-down-5); +} +.box-shadow-up-5 { + box-shadow: var(--pgn-elevation-box-shadow-up-5); +} +.box-shadow-right-5 { + box-shadow: var(--pgn-elevation-box-shadow-right-5); +} +.box-shadow-left-5 { + box-shadow: var(--pgn-elevation-box-shadow-left-5); +} +.box-shadow-centered-5 { + box-shadow: var(--pgn-elevation-box-shadow-centered-5); +} +.dvh-100 { + height: 100vh !important; + height: 100dvh !important; +} +.min-dvh-100 { + min-height: 100vh !important; + min-height: 100dvh !important; +} +.media { + display: flex; + align-items: flex-start; +} +.media-body { + flex: 1; +} +.list-group { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + border-radius: var(--pgn-size-list-group-border-radius); +} +.list-group-item-action { + width: 100%; + color: var(--pgn-color-list-group-action-base); + text-align: inherit; +} +.list-group-item-action:hover, .list-group-item-action:focus { + z-index: 1; + color: var(--pgn-color-list-group-action-hover); + text-decoration: none; + background-color: var(--pgn-color-list-group-bg-hover); +} +.list-group-item-action:active { + color: var(--pgn-color-list-group-action-active-base); + background-color: var(--pgn-color-list-group-action-active-bg); +} +.list-group-item { + position: relative; + display: block; + padding: var(--pgn-spacing-list-group-item-padding-y) var(--pgn-spacing-list-group-item-padding-x); + color: var(--pgn-color-list-group-base); + text-decoration: none; + background-color: var(--pgn-color-list-group-bg-base); + border: var(--pgn-size-list-group-border-width) solid var(--pgn-color-list-group-border); +} +.list-group-item:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} +.list-group-item:last-child { + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} +.list-group-item.disabled, .list-group-item:disabled { + color: var(--pgn-color-list-group-disabled-base); + pointer-events: none; + background-color: var(--pgn-color-list-group-disabled-bg); +} +.list-group-item.active { + z-index: 2; + color: var(--pgn-color-list-group-active-base); + background-color: var(--pgn-color-list-group-active-bg); + border-color: var(--pgn-color-list-group-active-border); +} +.list-group-item + .list-group-item { + border-top-width: 0; +} +.list-group-item + .list-group-item.active { + margin-top: -var(--pgn-size-list-group-border-width); + border-top-width: var(--pgn-size-list-group-border-width); +} +.list-group-horizontal { + flex-direction: row; +} +.list-group-horizontal > .list-group-item:first-child { + border-bottom-left-radius: var(--pgn-size-list-group-border-radius); + border-top-right-radius: 0; +} +.list-group-horizontal > .list-group-item:last-child { + border-top-right-radius: var(--pgn-size-list-group-border-radius); + border-bottom-left-radius: 0; +} +.list-group-horizontal > .list-group-item.active { + margin-top: 0; +} +.list-group-horizontal > .list-group-item + .list-group-item { + border-top-width: var(--pgn-size-list-group-border-width); + border-left-width: 0; +} +.list-group-horizontal > .list-group-item + .list-group-item.active { + margin-left: -var(--pgn-size-list-group-border-width); + border-left-width: var(--pgn-size-list-group-border-width); +} +@media (min-width: 576px) { + .list-group-horizontal-sm { + flex-direction: row; + } + .list-group-horizontal-sm > .list-group-item:first-child { + border-bottom-left-radius: var(--pgn-size-list-group-border-radius); + border-top-right-radius: 0; + } + .list-group-horizontal-sm > .list-group-item:last-child { + border-top-right-radius: var(--pgn-size-list-group-border-radius); + border-bottom-left-radius: 0; + } + .list-group-horizontal-sm > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-sm > .list-group-item + .list-group-item { + border-top-width: var(--pgn-size-list-group-border-width); + border-left-width: 0; + } + .list-group-horizontal-sm > .list-group-item + .list-group-item.active { + margin-left: -var(--pgn-size-list-group-border-width); + border-left-width: var(--pgn-size-list-group-border-width); + } +} +@media (min-width: 768px) { + .list-group-horizontal-md { + flex-direction: row; + } + .list-group-horizontal-md > .list-group-item:first-child { + border-bottom-left-radius: var(--pgn-size-list-group-border-radius); + border-top-right-radius: 0; + } + .list-group-horizontal-md > .list-group-item:last-child { + border-top-right-radius: var(--pgn-size-list-group-border-radius); + border-bottom-left-radius: 0; + } + .list-group-horizontal-md > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-md > .list-group-item + .list-group-item { + border-top-width: var(--pgn-size-list-group-border-width); + border-left-width: 0; + } + .list-group-horizontal-md > .list-group-item + .list-group-item.active { + margin-left: -var(--pgn-size-list-group-border-width); + border-left-width: var(--pgn-size-list-group-border-width); + } +} +@media (min-width: 992px) { + .list-group-horizontal-lg { + flex-direction: row; + } + .list-group-horizontal-lg > .list-group-item:first-child { + border-bottom-left-radius: var(--pgn-size-list-group-border-radius); + border-top-right-radius: 0; + } + .list-group-horizontal-lg > .list-group-item:last-child { + border-top-right-radius: var(--pgn-size-list-group-border-radius); + border-bottom-left-radius: 0; + } + .list-group-horizontal-lg > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-lg > .list-group-item + .list-group-item { + border-top-width: var(--pgn-size-list-group-border-width); + border-left-width: 0; + } + .list-group-horizontal-lg > .list-group-item + .list-group-item.active { + margin-left: -var(--pgn-size-list-group-border-width); + border-left-width: var(--pgn-size-list-group-border-width); + } +} +@media (min-width: 1200px) { + .list-group-horizontal-xl { + flex-direction: row; + } + .list-group-horizontal-xl > .list-group-item:first-child { + border-bottom-left-radius: var(--pgn-size-list-group-border-radius); + border-top-right-radius: 0; + } + .list-group-horizontal-xl > .list-group-item:last-child { + border-top-right-radius: var(--pgn-size-list-group-border-radius); + border-bottom-left-radius: 0; + } + .list-group-horizontal-xl > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-xl > .list-group-item + .list-group-item { + border-top-width: var(--pgn-size-list-group-border-width); + border-left-width: 0; + } + .list-group-horizontal-xl > .list-group-item + .list-group-item.active { + margin-left: -var(--pgn-size-list-group-border-width); + border-left-width: var(--pgn-size-list-group-border-width); + } +} +@media (min-width: 1400px) { + .list-group-horizontal-xxl { + flex-direction: row; + } + .list-group-horizontal-xxl > .list-group-item:first-child { + border-bottom-left-radius: var(--pgn-size-list-group-border-radius); + border-top-right-radius: 0; + } + .list-group-horizontal-xxl > .list-group-item:last-child { + border-top-right-radius: var(--pgn-size-list-group-border-radius); + border-bottom-left-radius: 0; + } + .list-group-horizontal-xxl > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-xxl > .list-group-item + .list-group-item { + border-top-width: var(--pgn-size-list-group-border-width); + border-left-width: 0; + } + .list-group-horizontal-xxl > .list-group-item + .list-group-item.active { + margin-left: -var(--pgn-size-list-group-border-width); + border-left-width: var(--pgn-size-list-group-border-width); + } +} +.list-group-flush { + border-radius: 0; +} +.list-group-flush > .list-group-item { + border-width: 0 0 var(--pgn-size-list-group-border-width); +} +.list-group-flush > .list-group-item:last-child { + border-bottom-width: 0; +} +.list-group-item-primary { + color: theme-color-level("primary", 6); + background-color: theme-color-level("primary", -9); +} +.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { + color: theme-color-level("primary", 6); + background-color: theme-color-level("primary", -9); + filter: opacity(0.9); +} +.list-group-item-primary.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("primary", 6); + border-color: theme-color-level("primary", 6); +} +.list-group-item-secondary { + color: theme-color-level("secondary", 6); + background-color: theme-color-level("secondary", -9); +} +.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { + color: theme-color-level("secondary", 6); + background-color: theme-color-level("secondary", -9); + filter: opacity(0.9); +} +.list-group-item-secondary.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("secondary", 6); + border-color: theme-color-level("secondary", 6); +} +.list-group-item-brand { + color: theme-color-level("brand", 6); + background-color: theme-color-level("brand", -9); +} +.list-group-item-brand.list-group-item-action:hover, .list-group-item-brand.list-group-item-action:focus { + color: theme-color-level("brand", 6); + background-color: theme-color-level("brand", -9); + filter: opacity(0.9); +} +.list-group-item-brand.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("brand", 6); + border-color: theme-color-level("brand", 6); +} +.list-group-item-success { + color: theme-color-level("success", 6); + background-color: theme-color-level("success", -9); +} +.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { + color: theme-color-level("success", 6); + background-color: theme-color-level("success", -9); + filter: opacity(0.9); +} +.list-group-item-success.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("success", 6); + border-color: theme-color-level("success", 6); +} +.list-group-item-info { + color: theme-color-level("info", 6); + background-color: theme-color-level("info", -9); +} +.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { + color: theme-color-level("info", 6); + background-color: theme-color-level("info", -9); + filter: opacity(0.9); +} +.list-group-item-info.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("info", 6); + border-color: theme-color-level("info", 6); +} +.list-group-item-warning { + color: theme-color-level("warning", 6); + background-color: theme-color-level("warning", -9); +} +.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { + color: theme-color-level("warning", 6); + background-color: theme-color-level("warning", -9); + filter: opacity(0.9); +} +.list-group-item-warning.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("warning", 6); + border-color: theme-color-level("warning", 6); +} +.list-group-item-danger { + color: theme-color-level("danger", 6); + background-color: theme-color-level("danger", -9); +} +.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { + color: theme-color-level("danger", 6); + background-color: theme-color-level("danger", -9); + filter: opacity(0.9); +} +.list-group-item-danger.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("danger", 6); + border-color: theme-color-level("danger", 6); +} +.list-group-item-light { + color: theme-color-level("light", 6); + background-color: theme-color-level("light", -9); +} +.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { + color: theme-color-level("light", 6); + background-color: theme-color-level("light", -9); + filter: opacity(0.9); +} +.list-group-item-light.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("light", 6); + border-color: theme-color-level("light", 6); +} +.list-group-item-dark { + color: theme-color-level("dark", 6); + background-color: theme-color-level("dark", -9); +} +.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { + color: theme-color-level("dark", 6); + background-color: theme-color-level("dark", -9); + filter: opacity(0.9); +} +.list-group-item-dark.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("dark", 6); + border-color: theme-color-level("dark", 6); +} +.list-group-item-gray { + color: theme-color-level("gray", 6); + background-color: theme-color-level("gray", -9); +} +.list-group-item-gray.list-group-item-action:hover, .list-group-item-gray.list-group-item-action:focus { + color: theme-color-level("gray", 6); + background-color: theme-color-level("gray", -9); + filter: opacity(0.9); +} +.list-group-item-gray.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("gray", 6); + border-color: theme-color-level("gray", 6); +} +.list-group-item-accent-a { + color: theme-color-level("accent-a", 6); + background-color: theme-color-level("accent-a", -9); +} +.list-group-item-accent-a.list-group-item-action:hover, .list-group-item-accent-a.list-group-item-action:focus { + color: theme-color-level("accent-a", 6); + background-color: theme-color-level("accent-a", -9); + filter: opacity(0.9); +} +.list-group-item-accent-a.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("accent-a", 6); + border-color: theme-color-level("accent-a", 6); +} +.list-group-item-accent-b { + color: theme-color-level("accent-b", 6); + background-color: theme-color-level("accent-b", -9); +} +.list-group-item-accent-b.list-group-item-action:hover, .list-group-item-accent-b.list-group-item-action:focus { + color: theme-color-level("accent-b", 6); + background-color: theme-color-level("accent-b", -9); + filter: opacity(0.9); +} +.list-group-item-accent-b.list-group-item-action.active { + color: var(--pgn-color-white); + background-color: theme-color-level("accent-b", 6); + border-color: theme-color-level("accent-b", 6); +} +@media print { + *, + *::before, + *::after { + text-shadow: none !important; + box-shadow: none !important; + } + a:not(.btn) { + text-decoration: underline; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } + pre { + white-space: pre-wrap !important; + } + pre, + blockquote { + border: var(--pgn-size-border-width) solid var(--pgn-color-gray-500); + page-break-inside: avoid; + } + tr, + img { + page-break-inside: avoid; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } + @page { + size: var(--pgn-print-page-size); + } + body { + min-width: 992px !important; + } + .container { + min-width: 992px !important; + } + .navbar { + display: none; + } + .badge { + border: var(--pgn-size-border-width) solid var(--pgn-color-black); + } + .table { + border-collapse: collapse !important; + } + .table td, + .table th { + background-color: var(--pgn-color-white) !important; + } + .table-bordered th, + .table-bordered td { + border: 1px solid var(--pgn-color-gray-300) !important; + } + .table-dark { + color: inherit; + } + .table-dark th, + .table-dark td, + .table-dark thead th, + .table-dark tbody + tbody { + border-color: var(--pgn-color-table-border); + } + .table .thead-dark th { + color: inherit; + border-color: var(--pgn-color-table-border); + } +} +/** + * Do not edit directly, this file was auto-generated. + * See /tokens/README.md for more details. + */ +/** + * Do not edit directly, this file was auto-generated. + * See /tokens/README.md for more details. + */ +@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0px); +@custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px); +@custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px); +@custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px); +@custom-media --pgn-size-breakpoint-min-width-md (min-width: 768px); +@custom-media --pgn-size-breakpoint-max-width-md (max-width: 992px); +@custom-media --pgn-size-breakpoint-min-width-lg (min-width: 992px); +@custom-media --pgn-size-breakpoint-max-width-lg (max-width: 1200px); +@custom-media --pgn-size-breakpoint-min-width-xl (min-width: 1200px); +@custom-media --pgn-size-breakpoint-max-width-xl (max-width: 1400px); +@custom-media --pgn-size-breakpoint-min-width-xxl (min-width: 1400px); +.pgn__action-row { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: flex-end; +} +.pgn__action-row > * { + margin: 0; +} +.pgn__action-row > * + * { + margin-inline-start: var(--pgn-spacing-action-row-gap-x); +} +.pgn__action-row-stacked { + display: flex; + flex-grow: 1; + align-items: center; + flex-direction: column-reverse; + justify-content: center; +} +.pgn__action-row-stacked > * { + margin: 0; +} +.pgn__action-row-stacked > * + * { + margin-bottom: var(--pgn-spacing-action-row-gap-y); +} +.pgn__action-row-spacer { + flex-grow: 1; +} +.alert { + position: relative; + padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x); + margin-bottom: var(--pgn-spacing-alert-margin-bottom); + border: var(--pgn-size-alert-border-width) solid var(--pgn-alert-border-color, transparent); + color: inherit; + background-color: var(--pgn-alert-bg, transparent); + align-items: center; + border-radius: var(--pgn-size-alert-border-radius); + box-shadow: var(--pgn-elevation-box-shadow-down-1); +} +.alert:has(.alert-heading:not(:only-child)) { + align-items: start; +} +.alert .alert-message-content > :last-child { + margin-bottom: 0; +} +.alert .alert-icon { + color: var(--pgn-alert-icon-color, inherit); + float: left; + margin-inline-end: var(--pgn-spacing-alert-icon-space); + width: 1.5rem; + height: 1.5rem; + flex-shrink: 0; +} +.alert-heading { + color: var(--pgn-color-alert-title); + display: flex; +} +.alert-content { + display: flex; + font-size: var(--pgn-typography-alert-font-size); + line-height: var(--pgn-typography-alert-line-height); + color: var(--pgn-color-alert-content); + text-align: start; +} +.alert-content div { + flex-grow: 1; +} +.alert-link { + font-weight: var(--pgn-typography-alert-font-weight-link); + text-decoration: underline; +} +.alert-link:hover { + text-decoration: none; +} +.alert-dismissible { + padding-right: calc(var(--pgn-typography-font-size-base) * 1.5 + var(--pgn-spacing-alert-padding-x) * 2); +} +.alert-dismissible .close { + position: absolute; + top: 0; + right: 0; + padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x); + color: inherit; +} +.pgn__alert-message-wrapper { + display: flex; + align-items: center; +} +.pgn__alert-message-wrapper .pgn__alert-actions { + margin-inline-start: var(--pgn-spacing-alert-actions-gap); +} +.pgn__alert-message-wrapper-stacked .pgn__alert-actions { + margin-top: var(--pgn-spacing-alert-actions-gap); +} +.alert-success { + --pgn-alert-bg: var(--pgn-color-alert-bg-success); + --pgn-alert-border-color: var(--pgn-color-alert-border-success); + --pgn-alert-icon-color: var(--pgn-color-alert-icon-success); +} +.alert-info { + --pgn-alert-bg: var(--pgn-color-alert-bg-info); + --pgn-alert-border-color: var(--pgn-color-alert-border-info); + --pgn-alert-icon-color: var(--pgn-color-alert-icon-info); +} +.alert-danger { + --pgn-alert-bg: var(--pgn-color-alert-bg-danger); + --pgn-alert-border-color: var(--pgn-color-alert-border-danger); + --pgn-alert-icon-color: var(--pgn-color-alert-icon-danger); +} +.alert-warning { + --pgn-alert-bg: var(--pgn-color-alert-bg-warning); + --pgn-alert-border-color: var(--pgn-color-alert-border-warning); + --pgn-alert-icon-color: var(--pgn-color-alert-icon-warning); +} +.pgn__annotation { + padding: var(--pgn-spacing-annotation-padding); + border-radius: var(--pgn-size-annotation-border-radius); + max-width: var(--pgn-size-annotation-max-width); + filter: var(--pgn-elevation-annotation-box-shadow); + word-wrap: break-word; + position: relative; + display: inline-block; + font-size: var(--pgn-typography-annotation-font-size); + line-height: var(--pgn-typography-annotation-line-height); + text-align: center; +} +.pgn__annotation-success-top { + background-color: var(--pgn-color-annotation-bg-success); + color: var(--pgn-color-annotation-text-success); + margin-top: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-success-top::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-bottom-color: var(--pgn-color-annotation-bg-success); + border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + right: 0; + left: 0; + top: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-success-bottom { + background-color: var(--pgn-color-annotation-bg-success); + color: var(--pgn-color-annotation-text-success); + margin-bottom: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-success-bottom::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-top-color: var(--pgn-color-annotation-bg-success); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + right: 0; + left: 0; + bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-success-right { + background-color: var(--pgn-color-annotation-bg-success); + color: var(--pgn-color-annotation-text-success); + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-success-right { + margin-right: 0; + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-success-right::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-left-color: var(--pgn-color-annotation-bg-success); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + top: 0; + bottom: 0; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-success-right::after { + right: initial; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + border-right-color: var(--pgn-color-annotation-bg-success); +} +.pgn__annotation-success-left { + background-color: var(--pgn-color-annotation-bg-success); + color: var(--pgn-color-annotation-text-success); + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-success-left { + margin-left: 0; + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-success-left::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-right-color: var(--pgn-color-annotation-bg-success); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + top: 0; + bottom: 0; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-success-left::after { + left: initial; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + border-left-color: var(--pgn-color-annotation-bg-success); +} +.pgn__annotation-warning-top { + background-color: var(--pgn-color-annotation-bg-warning); + color: var(--pgn-color-annotation-text-warning); + margin-top: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-warning-top::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-bottom-color: var(--pgn-color-annotation-bg-warning); + border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + right: 0; + left: 0; + top: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-warning-bottom { + background-color: var(--pgn-color-annotation-bg-warning); + color: var(--pgn-color-annotation-text-warning); + margin-bottom: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-warning-bottom::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-top-color: var(--pgn-color-annotation-bg-warning); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + right: 0; + left: 0; + bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-warning-right { + background-color: var(--pgn-color-annotation-bg-warning); + color: var(--pgn-color-annotation-text-warning); + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-warning-right { + margin-right: 0; + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-warning-right::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-left-color: var(--pgn-color-annotation-bg-warning); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + top: 0; + bottom: 0; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-warning-right::after { + right: initial; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + border-right-color: var(--pgn-color-annotation-bg-warning); +} +.pgn__annotation-warning-left { + background-color: var(--pgn-color-annotation-bg-warning); + color: var(--pgn-color-annotation-text-warning); + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-warning-left { + margin-left: 0; + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-warning-left::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-right-color: var(--pgn-color-annotation-bg-warning); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + top: 0; + bottom: 0; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-warning-left::after { + left: initial; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + border-left-color: var(--pgn-color-annotation-bg-warning); +} +.pgn__annotation-error-top { + background-color: var(--pgn-color-annotation-bg-error); + color: var(--pgn-color-annotation-text-error); + margin-top: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-error-top::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-bottom-color: var(--pgn-color-annotation-bg-error); + border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + right: 0; + left: 0; + top: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-error-bottom { + background-color: var(--pgn-color-annotation-bg-error); + color: var(--pgn-color-annotation-text-error); + margin-bottom: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-error-bottom::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-top-color: var(--pgn-color-annotation-bg-error); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + right: 0; + left: 0; + bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-error-right { + background-color: var(--pgn-color-annotation-bg-error); + color: var(--pgn-color-annotation-text-error); + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-error-right { + margin-right: 0; + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-error-right::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-left-color: var(--pgn-color-annotation-bg-error); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + top: 0; + bottom: 0; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-error-right::after { + right: initial; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + border-right-color: var(--pgn-color-annotation-bg-error); +} +.pgn__annotation-error-left { + background-color: var(--pgn-color-annotation-bg-error); + color: var(--pgn-color-annotation-text-error); + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-error-left { + margin-left: 0; + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-error-left::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-right-color: var(--pgn-color-annotation-bg-error); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + top: 0; + bottom: 0; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-error-left::after { + left: initial; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + border-left-color: var(--pgn-color-annotation-bg-error); +} +.pgn__annotation-dark-top { + background-color: var(--pgn-color-annotation-bg-dark); + color: var(--pgn-color-annotation-text-dark); + margin-top: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-dark-top::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-bottom-color: var(--pgn-color-annotation-bg-dark); + border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + right: 0; + left: 0; + top: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-dark-bottom { + background-color: var(--pgn-color-annotation-bg-dark); + color: var(--pgn-color-annotation-text-dark); + margin-bottom: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-dark-bottom::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-top-color: var(--pgn-color-annotation-bg-dark); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + right: 0; + left: 0; + bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-dark-right { + background-color: var(--pgn-color-annotation-bg-dark); + color: var(--pgn-color-annotation-text-dark); + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-dark-right { + margin-right: 0; + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-dark-right::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-left-color: var(--pgn-color-annotation-bg-dark); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + top: 0; + bottom: 0; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-dark-right::after { + right: initial; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + border-right-color: var(--pgn-color-annotation-bg-dark); +} +.pgn__annotation-dark-left { + background-color: var(--pgn-color-annotation-bg-dark); + color: var(--pgn-color-annotation-text-dark); + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-dark-left { + margin-left: 0; + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-dark-left::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-right-color: var(--pgn-color-annotation-bg-dark); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + top: 0; + bottom: 0; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-dark-left::after { + left: initial; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + border-left-color: var(--pgn-color-annotation-bg-dark); +} +.pgn__annotation-light-top { + background-color: var(--pgn-color-annotation-bg-light); + color: var(--pgn-color-annotation-text-light); + margin-top: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-light-top::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-bottom-color: var(--pgn-color-annotation-bg-light); + border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + right: 0; + left: 0; + top: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-light-bottom { + background-color: var(--pgn-color-annotation-bg-light); + color: var(--pgn-color-annotation-text-light); + margin-bottom: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-light-bottom::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-top-color: var(--pgn-color-annotation-bg-light); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + right: 0; + left: 0; + bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; +} +.pgn__annotation-light-right { + background-color: var(--pgn-color-annotation-bg-light); + color: var(--pgn-color-annotation-text-light); + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-light-right { + margin-right: 0; + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-light-right::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-left-color: var(--pgn-color-annotation-bg-light); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + top: 0; + bottom: 0; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-light-right::after { + right: initial; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + border-right-color: var(--pgn-color-annotation-bg-light); +} +.pgn__annotation-light-left { + background-color: var(--pgn-color-annotation-bg-light); + color: var(--pgn-color-annotation-text-light); + margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +[dir=rtl] .pgn__annotation-light-left { + margin-left: 0; + margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); +} +.pgn__annotation-light-left::after { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + border-right-color: var(--pgn-color-annotation-bg-light); + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + top: 0; + bottom: 0; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; +} +[dir=rtl] .pgn__annotation-light-left::after { + left: initial; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + border-left-color: var(--pgn-color-annotation-bg-light); +} +.pgn__avatar { + border-radius: var(--pgn-size-avatar-border-radius); + border: solid var(--pgn-size-avatar-border-base) var(--pgn-color-avatar-border); + display: inline-block; + height: var(--pgn-size-avatar-base); + overflow: hidden; + width: var(--pgn-size-avatar-base); + object-fit: cover; +} +.pgn__avatar.pgn__avatar-xs { + height: var(--pgn-size-avatar-xs); + width: var(--pgn-size-avatar-xs); +} +.pgn__avatar.pgn__avatar-sm { + height: var(--pgn-size-avatar-sm); + width: var(--pgn-size-avatar-sm); +} +.pgn__avatar.pgn__avatar-md { + height: var(--pgn-size-avatar-base); + width: var(--pgn-size-avatar-base); +} +.pgn__avatar.pgn__avatar-lg { + height: var(--pgn-size-avatar-lg); + width: var(--pgn-size-avatar-lg); +} +.pgn__avatar.pgn__avatar-xl { + height: var(--pgn-size-avatar-xl); + width: var(--pgn-size-avatar-xl); +} +.pgn__avatar.pgn__avatar-xxl { + height: var(--pgn-size-avatar-xxl); + width: var(--pgn-size-avatar-xxl); +} +.pgn__avatar.pgn__avatar-huge { + height: var(--pgn-size-avatar-huge); + width: var(--pgn-size-avatar-huge); +} +.btn.pgn__avatar-button-avatar { + padding-left: var(--pgn-spacing-avatar-button-padding-left-base); +} +.btn.pgn__avatar-button-avatar.pgn__avatar-button-avatar-sm { + padding-left: var(--pgn-spacing-avatar-button-padding-left-sm); +} +.btn.pgn__avatar-button-avatar.pgn__avatar-button-avatar-lg { + padding-left: var(--pgn-spacing-avatar-button-padding-left-lg); +} +.btn.pgn__avatar-button-avatar .pgn__avatar { + margin-top: -0.5em; + margin-bottom: -0.5em; + margin-inline-end: 0.5em; +} +.btn.pgn__avatar-button-avatar.pgn__avatar-button-hide-label { + padding-left: 4px; +} +.btn.pgn__avatar-button-avatar.pgn__avatar-button-hide-label:not(.dropdown-toggle) { + padding-right: 4px; +} +.btn.pgn__avatar-button-avatar.pgn__avatar-button-hide-label .pgn__avatar { + margin-inline-end: 0; +} +.badge { + display: inline-block; + padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base); + color: var(--pgn-badge-color, inherit); + background-color: var(--pgn-badge-bg, transparent); + font-size: var(--pgn-typography-badge-font-size); + font-weight: var(--pgn-typography-badge-font-weight); + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + transition: var(--pgn-transition-badge); + border-radius: var(--pgn-size-badge-border-radius-base); +} +a.badge:hover, a.badge:focus { + text-decoration: none; + color: var(--pgn-badge-focus-color, inherit); + background-color: var(--pgn-badge-focus-bg, transparent); +} +a.badge:focus, a.badge.focus { + outline: 0; + box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, 0.15)); +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.badge-pill { + padding-right: var(--pgn-spacing-badge-padding-x-pill); + padding-left: var(--pgn-spacing-badge-padding-x-pill); + border-radius: var(--pgn-size-badge-border-radius-pill); +} +.badge-primary { + --pgn-badge-color: var(--pgn-color-badge-text-primary); + --pgn-badge-bg: var(--pgn-color-badge-bg-primary); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-primary); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary); +} +.badge-secondary { + --pgn-badge-color: var(--pgn-color-badge-text-secondary); + --pgn-badge-bg: var(--pgn-color-badge-bg-secondary); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary); +} +.badge-success { + --pgn-badge-color: var(--pgn-color-badge-text-success); + --pgn-badge-bg: var(--pgn-color-badge-bg-success); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-success); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success); +} +.badge-danger { + --pgn-badge-color: var(--pgn-color-badge-text-danger); + --pgn-badge-bg: var(--pgn-color-badge-bg-danger); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-danger); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger); +} +.badge-warning { + --pgn-badge-color: var(--pgn-color-badge-text-warning); + --pgn-badge-bg: var(--pgn-color-badge-bg-warning); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-warning); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning); +} +.badge-info { + --pgn-badge-color: var(--pgn-color-badge-text-info); + --pgn-badge-bg: var(--pgn-color-badge-bg-info); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-info); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info); +} +.badge-light { + --pgn-badge-color: var(--pgn-color-badge-text-light); + --pgn-badge-bg: var(--pgn-color-badge-bg-light); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-light); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light); +} +.badge-dark { + --pgn-badge-color: var(--pgn-color-badge-text-dark); + --pgn-badge-bg: var(--pgn-color-badge-bg-dark); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-dark); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark); +} +.pgn__breadcrumb .list-inline-item.active { + color: var(--pgn-color-breadcrumb-active); +} +.pgn__breadcrumb .list-inline-item a.link-muted { + color: var(--pgn-color-breadcrumb-base); +} +.pgn__breadcrumb .list-inline-item a.link-muted:focus { + position: relative; + outline: none; + box-shadow: none; + text-decoration: none; +} +.pgn__breadcrumb .list-inline-item a.link-muted:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1); + right: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1); + bottom: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1); + left: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1); + border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-base); + border-radius: var(--pgn-size-breadcrumb-border-radius-focus); +} +[dir=rtl] .pgn__breadcrumb .list-inline-item { + margin-right: 0; + margin-left: var(--pgn-spacing-breadcrumb-margin-left); +} +[dir=rtl] .pgn__breadcrumb .list-inline-item .pgn__icon { + transform: scale(-1); +} +.pgn__breadcrumb-dark .list-inline-item.active { + color: var(--pgn-color-breadcrumb-inverse-active); +} +.pgn__breadcrumb-dark .list-inline-item a.link-muted { + color: var(--pgn-color-breadcrumb-inverse-base); +} +.pgn__breadcrumb-dark .list-inline-item a.link-muted:focus::before { + border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-inverse-base); +} +.pgn__breadcrumb-dark .pgn__icon, +.pgn__breadcrumb-dark .custom-spacer { + color: var(--pgn-color-breadcrumb-inverse-spacer); +} +.pgn__breadcrumb ol { + display: flex; + align-items: center; +} +.pgn__breadcrumb ol.is-mobile { + flex-direction: row-reverse; + justify-content: flex-end; +} +.pgn__breadcrumb ol.is-mobile .list-inline-item:not(:last-child) { + margin-right: 0; + margin-left: var(--pgn-spacing-breadcrumb-margin-left); +} +.pgn__breadcrumb ol.is-mobile .pgn__icon { + transform: scale(-1); +} +[dir=rtl] .pgn__breadcrumb ol.is-mobile .pgn__icon { + transform: scale(1); +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-flex; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + flex: 1 1 auto; +} +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover { + z-index: 1; +} +.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { + z-index: 2; +} +.btn-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} +.btn-toolbar .input-group { + width: auto; +} +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) { + margin-left: calc(var(--pgn-size-btn-border-width) * -1); +} +.btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child), +.btn-group > .btn:not(:last-child, .dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled):focus, .btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled):focus::before, +.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled):focus, +.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled):focus::before, +.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled):focus, +.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled):focus::before { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled):active, .btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled):active::before, +.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled):active, +.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled):active::before, +.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled):active, +.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled):active::before { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled).active, .btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled).active::before, +.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled).active, +.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled).active::before, +.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled).active, +.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled).active::before { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:not(:first-child, .dropdown-toggle), +.btn-group > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled):focus, .btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled):focus::before, +.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled):focus, +.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled):focus::before { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled):active, .btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled):active::before, +.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled):active, +.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled):active::before { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled).active, .btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled).active::before, +.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled).active, +.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled).active::before { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +.dropdown-toggle-split { + padding-right: calc(var(--pgn-spacing-btn-padding-x-base) * 0.75); + padding-left: calc(var(--pgn-spacing-btn-padding-x-base) * 0.75); +} +.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after { + margin-left: 0; +} +.dropleft .dropdown-toggle-split::before { + margin-right: 0; +} +.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { + padding-right: calc(var(--pgn-spacing-btn-padding-x-sm) * 0.75); + padding-left: calc(var(--pgn-spacing-btn-padding-x-sm) * 0.75); +} +.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { + padding-right: calc(var(--pgn-spacing-btn-padding-x-lg) * 0.75); + padding-left: calc(var(--pgn-spacing-btn-padding-x-lg) * 0.75); +} +.btn-group.show .dropdown-toggle { + box-shadow: var(--pgn-elevation-btn-box-shadow-active); +} +.btn-group.show .dropdown-toggle.btn-link { + box-shadow: none; +} +.btn-group-vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group { + width: 100%; +} +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { + margin-top: calc(var(--pgn-size-btn-border-width) * -1); +} +.btn-group-vertical > .btn:not(:last-child, .dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.btn-group-toggle > .btn, +.btn-group-toggle > .btn-group > .btn { + margin-bottom: 0; +} +.btn-group-toggle > .btn input[type=radio], +.btn-group-toggle > .btn input[type=checkbox], +.btn-group-toggle > .btn-group > .btn input[type=radio], +.btn-group-toggle > .btn-group > .btn input[type=checkbox] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + font-family: var(--pgn-typography-btn-font-family); + font-weight: var(--pgn-typography-btn-font-weight); + text-align: center; + vertical-align: middle; + user-select: none; + border: var(--pgn-size-btn-border-width) solid var(--pgn-btn-border-color, transparent); + color: var(--pgn-btn-color, var(--pgn-color-body-base)); + background-color: var(--pgn-btn-bg, transparent); + transition: var(--pgn-transition-btn); + padding: var(--pgn-spacing-btn-padding-y-base) var(--pgn-spacing-btn-padding-x-base); + font-size: var(--pgn-typography-btn-font-size-base); + line-height: var(--pgn-typography-btn-line-height-base); + border-radius: var(--pgn-size-btn-border-radius-base); +} +.btn:not(:disabled, .disabled, .btn-link).focus, .btn:not(:disabled, .disabled, .btn-link):focus { + position: relative; + outline: 0; + box-shadow: none; + background: var(--pgn-btn-focus-bg, transparent); + border-color: var(--pgn-btn-focus-border-color, transparent); + color: var(--pgn-btn-focus-color, var(--pgn-color-body-base)); +} +.btn:not(:disabled, .disabled, .btn-link).focus::before, .btn:not(:disabled, .disabled, .btn-link):focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1); + right: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1); + bottom: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1); + left: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1); + border: solid var(--pgn-size-btn-focus-width) var(--pgn-btn-focus-outline-color, var(--pgn-color-body-base)); + border-radius: var(--pgn-size-btn-focus-border-radius-base); +} +.btn:not(:disabled, .disabled, .btn-link).focus.btn-lg::before, .btn-group-lg > .btn:not(:disabled, .disabled, .btn-link).focus::before, .btn:not(:disabled, .disabled, .btn-link):focus.btn-lg::before, .btn-group-lg > .btn:not(:disabled, .disabled, .btn-link):focus::before { + border-radius: var(--pgn-size-btn-focus-border-radius-lg); +} +.btn:not(:disabled, .disabled, .btn-link).focus.btn-sm::before, .btn-group-sm > .btn:not(:disabled, .disabled, .btn-link).focus::before, .btn:not(:disabled, .disabled, .btn-link):focus.btn-sm::before, .btn-group-sm > .btn:not(:disabled, .disabled, .btn-link):focus::before { + border-radius: var(--pgn-size-btn-focus-border-radius-sm); +} +.btn:not(:disabled, .disabled, .btn-link).focus:active::before, .btn:not(:disabled, .disabled, .btn-link).focus.active::before, .btn:not(:disabled, .disabled, .btn-link):focus:active::before, .btn:not(:disabled, .disabled, .btn-link):focus.active::before { + opacity: 0.75; +} +.btn:not(:disabled, .disabled, .btn-link).focus:disabled::before, .btn:not(:disabled, .disabled, .btn-link).focus.disabled::before, .btn:not(:disabled, .disabled, .btn-link):focus:disabled::before, .btn:not(:disabled, .disabled, .btn-link):focus.disabled::before { + display: none; +} +.btn:not(:disabled, .disabled, .btn-link):hover { + color: var(--pgn-btn-hover-color, var(--pgn-color-body-base)); + background-color: var(--pgn-btn-hover-bg, transparent); + border-color: var(--pgn-btn-hover-border-color, transparent); + text-decoration: none; +} +.btn:not(:disabled, .disabled, .btn-link):active, .btn:not(:disabled, .disabled, .btn-link).active, .show > .btn:not(:disabled, .disabled, .btn-link).dropdown-toggle { + color: var(--pgn-btn-active-color, inherit); + background-color: var(--pgn-btn-active-bg, inherit); + border-color: var(--pgn-btn-active-border-color, transparent); +} +.btn.disabled, .btn:disabled { + color: var(--pgn-btn-disabled-color, inherit); + background-color: var(--pgn-btn-disabled-bg, inherit); + border-color: var(--pgn-btn-disabled-border-color, transparent); + opacity: var(--pgn-other-btn-disabled-opacity); +} +.btn .btn-icon-before { + margin-inline-end: 0.5rem; + margin-left: -0.25em; +} +[dir=rtl] .btn .btn-icon-before { + margin-right: -0.25em; + margin-left: 0.5rem; +} +.btn .btn-icon-after { + margin-inline-start: 0.5rem; + margin-right: -0.25em; +} +[dir=rtl] .btn .btn-icon-after { + margin-right: 0.5rem; + margin-left: -0.25em; +} +a.btn.disabled, +fieldset:disabled a.btn { + pointer-events: none; +} +.btn-link { + font-weight: var(--pgn-typography-font-weight-normal); + color: var(--pgn-color-link-base); + text-decoration: var(--pgn-typography-link-decoration-base); +} +.btn-link:hover { + color: var(--pgn-color-link-hover); + text-decoration: var(--pgn-typography-link-decoration-hover); +} +.btn-link:focus, .btn-link.focus { + text-decoration: var(--pgn-typography-link-decoration-hover); + box-shadow: none; +} +.btn-link:disabled, .btn-link.disabled { + color: var(--pgn-color-btn-disabled-link); + pointer-events: none; +} +.btn-lg, .btn-group-lg > .btn { + padding: var(--pgn-spacing-btn-padding-y-lg) var(--pgn-spacing-btn-padding-x-lg); + font-size: var(--pgn-typography-btn-font-size-lg); + line-height: var(--pgn-typography-btn-line-height-lg); + border-radius: var(--pgn-size-btn-border-radius-lg); +} +.btn-sm, .btn-group-sm > .btn { + padding: var(--pgn-spacing-btn-padding-y-sm) var(--pgn-spacing-btn-padding-x-sm); + font-size: var(--pgn-typography-btn-font-size-sm); + line-height: var(--pgn-typography-btn-line-height-sm); + border-radius: var(--pgn-size-btn-border-radius-sm); +} +.btn-block { + display: flex; + width: 100%; +} +.btn-block + .btn-block { + margin-top: var(--pgn-spacing-btn-block-spacing-y); +} +.btn-inline { + line-height: calc(var(--pgn-typography-line-height-base) * 1em - 2 * var(--pgn-size-btn-border-width)); + font-size: inherit; + vertical-align: bottom; + padding: 0 0.25em; +} +input[type=submit].btn-block, +input[type=reset].btn-block, +input[type=button].btn-block { + width: 100%; +} +[dir=rtl] .btn-group > .btn:not(:last-child, .dropdown-toggle), +[dir=rtl] .btn-group > .btn-group:not(:last-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +[dir=rtl] .btn-group > .btn:not(:first-child), +[dir=rtl] .btn-group > .btn-group:not(:first-child) > .btn { + border-radius: var(--pgn-size-btn-border-radius-base) 0 0 var(--pgn-size-btn-border-radius-base); +} +[dir=rtl] .btn-group > .btn:first-child, +[dir=rtl] .btn-group > .btn-group:first-child > .btn { + border-top-right-radius: var(--pgn-size-btn-border-radius-base); + border-bottom-right-radius: var(--pgn-size-btn-border-radius-base); +} +.btn-primary { + --pgn-btn-color: var(--pgn-color-btn-text-primary); + --pgn-btn-bg: var(--pgn-color-btn-bg-primary); + --pgn-btn-border-color: var(--pgn-color-btn-border-primary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-primary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-primary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-primary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-primary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-primary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-primary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-primary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-primary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-primary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-primary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-primary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-primary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-primary); +} +.btn-outline-primary { + --pgn-btn-color: var(--pgn-color-btn-text-outline-primary); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-primary); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-primary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-primary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-primary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-primary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-primary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-primary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-primary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-primary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-primary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-primary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-primary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-primary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-primary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-primary); +} +.btn-inverse-primary { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-primary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-primary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-primary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-primary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-primary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-primary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-primary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-primary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-primary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-primary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-primary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-primary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-primary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-primary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-primary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-primary); +} +.btn-inverse-outline-primary { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-primary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-primary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-primary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-primary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-primary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-primary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-primary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-primary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-primary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-primary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-primary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-primary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-primary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-primary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-primary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-primary); +} +.btn-secondary { + --pgn-btn-color: var(--pgn-color-btn-text-secondary); + --pgn-btn-bg: var(--pgn-color-btn-bg-secondary); + --pgn-btn-border-color: var(--pgn-color-btn-border-secondary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-secondary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-secondary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-secondary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-secondary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-secondary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-secondary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-secondary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-secondary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-secondary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-secondary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-secondary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-secondary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-secondary); +} +.btn-outline-secondary { + --pgn-btn-color: var(--pgn-color-btn-text-outline-secondary); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-secondary); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-secondary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-secondary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-secondary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-secondary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-secondary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-secondary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-secondary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-secondary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-secondary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-secondary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-secondary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-secondary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-secondary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-secondary); +} +.btn-inverse-secondary { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-secondary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-secondary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-secondary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-secondary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-secondary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-secondary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-secondary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-secondary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-secondary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-secondary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-secondary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-secondary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-secondary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-secondary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-secondary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-secondary); +} +.btn-inverse-outline-secondary { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-secondary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-secondary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-secondary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-secondary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-secondary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-secondary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-secondary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-secondary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-secondary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-secondary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-secondary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-secondary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-secondary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-secondary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-secondary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-secondary); +} +.btn-brand { + --pgn-btn-color: var(--pgn-color-btn-text-brand); + --pgn-btn-bg: var(--pgn-color-btn-bg-brand); + --pgn-btn-border-color: var(--pgn-color-btn-border-brand); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-brand); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-brand); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-brand); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-brand); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-brand); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-brand); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-brand); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-brand); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-brand); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-brand); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-brand); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-brand); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-brand); +} +.btn-outline-brand { + --pgn-btn-color: var(--pgn-color-btn-text-outline-brand); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-brand); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-brand); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-brand); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-brand); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-brand); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-brand); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-brand); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-brand); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-brand); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-brand); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-brand); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-brand); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-brand); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-brand); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-brand); +} +.btn-inverse-brand { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-brand); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-brand); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-brand); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-brand); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-brand); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-brand); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-brand); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-brand); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-brand); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-brand); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-brand); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-brand); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-brand); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-brand); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-brand); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-brand); +} +.btn-inverse-outline-brand { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-brand); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-brand); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-brand); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-brand); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-brand); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-brand); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-brand); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-brand); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-brand); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-brand); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-brand); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-brand); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-brand); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-brand); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-brand); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-brand); +} +.btn-danger { + --pgn-btn-color: var(--pgn-color-btn-text-danger); + --pgn-btn-bg: var(--pgn-color-btn-bg-danger); + --pgn-btn-border-color: var(--pgn-color-btn-border-danger); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-danger); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-danger); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-danger); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-danger); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-danger); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-danger); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-danger); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-danger); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-danger); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-danger); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-danger); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-danger); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-danger); +} +.btn-outline-danger { + --pgn-btn-color: var(--pgn-color-btn-text-outline-danger); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-danger); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-danger); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-danger); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-danger); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-danger); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-danger); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-danger); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-danger); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-danger); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-danger); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-danger); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-danger); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-danger); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-danger); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-danger); +} +.btn-inverse-danger { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-danger); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-danger); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-danger); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-danger); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-danger); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-danger); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-danger); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-danger); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-danger); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-danger); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-danger); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-danger); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-danger); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-danger); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-danger); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-danger); +} +.btn-inverse-outline-danger { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-danger); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-danger); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-danger); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-danger); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-danger); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-danger); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-danger); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-danger); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-danger); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-danger); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-danger); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-danger); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-danger); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-danger); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-danger); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-danger); +} +.btn-dark { + --pgn-btn-color: var(--pgn-color-btn-text-dark); + --pgn-btn-bg: var(--pgn-color-btn-bg-dark); + --pgn-btn-border-color: var(--pgn-color-btn-border-dark); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-dark); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-dark); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-dark); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-dark); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-dark); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-dark); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-dark); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-dark); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-dark); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-dark); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-dark); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-dark); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-dark); +} +.btn-outline-dark { + --pgn-btn-color: var(--pgn-color-btn-text-outline-dark); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-dark); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-dark); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-dark); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-dark); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-dark); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-dark); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-dark); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-dark); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-dark); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-dark); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-dark); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-dark); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-dark); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-dark); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-dark); +} +.btn-inverse-dark { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-dark); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-dark); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-dark); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-dark); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-dark); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-dark); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-dark); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-dark); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-dark); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-dark); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-dark); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-dark); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-dark); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-dark); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-dark); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-dark); +} +.btn-inverse-outline-dark { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-dark); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-dark); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-dark); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-dark); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-dark); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-dark); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-dark); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-dark); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-dark); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-dark); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-dark); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-dark); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-dark); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-dark); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-dark); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-dark); +} +.btn-info { + --pgn-btn-color: var(--pgn-color-btn-text-info); + --pgn-btn-bg: var(--pgn-color-btn-bg-info); + --pgn-btn-border-color: var(--pgn-color-btn-border-info); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-info); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-info); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-info); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-info); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-info); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-info); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-info); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-info); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-info); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-info); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-info); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-info); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-info); +} +.btn-outline-info { + --pgn-btn-color: var(--pgn-color-btn-text-outline-info); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-info); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-info); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-info); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-info); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-info); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-info); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-info); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-info); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-info); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-info); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-info); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-info); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-info); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-info); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-info); +} +.btn-inverse-info { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-info); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-info); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-info); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-info); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-info); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-info); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-info); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-info); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-info); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-info); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-info); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-info); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-info); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-info); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-info); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-info); +} +.btn-inverse-outline-info { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-info); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-info); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-info); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-info); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-info); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-info); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-info); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-info); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-info); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-info); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-info); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-info); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-info); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-info); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-info); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-info); +} +.btn-light { + --pgn-btn-color: var(--pgn-color-btn-text-light); + --pgn-btn-bg: var(--pgn-color-btn-bg-light); + --pgn-btn-border-color: var(--pgn-color-btn-border-light); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-light); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-light); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-light); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-light); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-light); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-light); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-light); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-light); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-light); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-light); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-light); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-light); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-light); +} +.btn-outline-light { + --pgn-btn-color: var(--pgn-color-btn-text-outline-light); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-light); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-light); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-light); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-light); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-light); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-light); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-light); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-light); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-light); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-light); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-light); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-light); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-light); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-light); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-light); +} +.btn-inverse-light { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-light); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-light); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-light); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-light); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-light); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-light); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-light); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-light); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-light); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-light); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-light); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-light); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-light); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-light); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-light); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-light); +} +.btn-inverse-outline-light { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-light); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-light); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-light); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-light); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-light); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-light); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-light); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-light); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-light); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-light); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-light); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-light); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-light); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-light); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-light); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-light); +} +.btn-success { + --pgn-btn-color: var(--pgn-color-btn-text-success); + --pgn-btn-bg: var(--pgn-color-btn-bg-success); + --pgn-btn-border-color: var(--pgn-color-btn-border-success); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-success); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-success); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-success); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-success); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-success); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-success); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-success); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-success); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-success); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-success); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-success); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-success); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-success); +} +.btn-outline-success { + --pgn-btn-color: var(--pgn-color-btn-text-outline-success); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-success); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-success); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-success); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-success); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-success); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-success); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-success); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-success); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-success); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-success); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-success); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-success); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-success); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-success); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-success); +} +.btn-inverse-success { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-success); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-success); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-success); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-success); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-success); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-success); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-success); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-success); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-success); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-success); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-success); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-success); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-success); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-success); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-success); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-success); +} +.btn-inverse-outline-success { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-success); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-success); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-success); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-success); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-success); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-success); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-success); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-success); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-success); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-success); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-success); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-success); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-success); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-success); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-success); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-success); +} +.btn-warning { + --pgn-btn-color: var(--pgn-color-btn-text-warning); + --pgn-btn-bg: var(--pgn-color-btn-bg-warning); + --pgn-btn-border-color: var(--pgn-color-btn-border-warning); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-warning); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-warning); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-warning); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-warning); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-warning); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-warning); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-warning); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-warning); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-warning); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-warning); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-warning); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-warning); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-warning); +} +.btn-outline-warning { + --pgn-btn-color: var(--pgn-color-btn-text-outline-warning); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-warning); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-warning); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-warning); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-warning); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-warning); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-warning); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-warning); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-warning); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-warning); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-warning); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-warning); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-warning); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-warning); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-warning); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-warning); +} +.btn-inverse-warning { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-warning); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-warning); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-warning); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-warning); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-warning); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-warning); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-warning); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-warning); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-warning); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-warning); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-warning); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-warning); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-warning); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-warning); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-warning); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-warning); +} +.btn-inverse-outline-warning { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-warning); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-warning); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-warning); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-warning); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-warning); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-warning); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-warning); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-warning); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-warning); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-warning); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-warning); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-warning); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-warning); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-warning); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-warning); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-warning); +} +.btn-tertiary { + --pgn-btn-color: var(--pgn-color-btn-text-tertiary); + --pgn-btn-bg: var(--pgn-color-btn-bg-tertiary); + --pgn-btn-border-color: var(--pgn-color-btn-border-tertiary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-tertiary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-tertiary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-tertiary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-tertiary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-tertiary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-tertiary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-tertiary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-tertiary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-tertiary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-tertiary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-tertiary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-tertiary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-tertiary); +} +.btn-inverse-tertiary { + --pgn-btn-color: var(--pgn-color-btn-text-inverse-tertiary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-tertiary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-tertiary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-tertiary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-tertiary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-tertiary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-tertiary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-tertiary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-tertiary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-tertiary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-tertiary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-tertiary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-tertiary); +} +.card, .collapsible-card, .collapsible-card-lg { + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: var(--pgn-color-card-bg-base); + background-clip: border-box; + border: var(--pgn-size-card-border-width) solid var(--pgn-color-card-border-base); + position: relative; + border-radius: 12px !important; +} +.card > hr, .collapsible-card > hr, .collapsible-card-lg > hr { + margin-right: 0; + margin-left: 0; +} +.card > .list-group, .collapsible-card > .list-group, .collapsible-card-lg > .list-group { + border-top: inherit; + border-bottom: inherit; +} +.card > .list-group:first-child, .collapsible-card > .list-group:first-child, .collapsible-card-lg > .list-group:first-child { + border-top-width: 0; + border-top-left-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + border-top-right-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); +} +.card > .list-group:last-child, .collapsible-card > .list-group:last-child, .collapsible-card-lg > .list-group:last-child { + border-bottom-width: 0; + border-bottom-right-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + border-bottom-left-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); +} +.card > .card-header + .list-group, .collapsible-card > .card-header + .list-group, .collapsible-card-lg > .card-header + .list-group, +.card > .list-group + .card-footer, +.collapsible-card > .list-group + .card-footer, +.collapsible-card-lg > .list-group + .card-footer { + border-top: 0; +} +.card-body, .collapsible-card .collapsible-body, .collapsible-card-lg .collapsible-body { + flex: 1 1 auto; + min-height: 1px; + padding: var(--pgn-spacing-card-spacer-x); + color: var(--pgn-color-card-base); +} +.card-deck .card, .card-deck .collapsible-card, .card-deck .collapsible-card-lg { + margin-bottom: var(--pgn-spacing-card-margin-deck); +} +@media (min-width: 576px) { + .card-deck { + display: flex; + flex-flow: row wrap; + margin-right: calc(var(--pgn-spacing-card-margin-deck) * -1); + margin-left: calc(var(--pgn-spacing-card-margin-deck) * -1); + } + .card-deck .card, .card-deck .collapsible-card, .card-deck .collapsible-card-lg { + flex: 1 0 0%; + margin-right: var(--pgn-spacing-card-margin-deck); + margin-bottom: 0; + margin-left: var(--pgn-spacing-card-margin-deck); + } +} +.card-group > .card, .card-group > .collapsible-card, .card-group > .collapsible-card-lg { + margin-bottom: var(--pgn-spacing-card-margin-group); +} +@media (min-width: 576px) { + .card-group { + display: flex; + flex-flow: row wrap; + } + .card-group > .card, .card-group > .collapsible-card, .card-group > .collapsible-card-lg { + flex: 1 0 0%; + margin-bottom: 0; + } + .card-group > .card + .card, .card-group > .collapsible-card + .card, .card-group > .collapsible-card-lg + .card, .card-group > .card + .collapsible-card, .card-group > .card + .collapsible-card-lg, .card-group > .collapsible-card + .collapsible-card, .card-group > .collapsible-card-lg + .collapsible-card, .card-group > .collapsible-card + .collapsible-card-lg, .card-group > .collapsible-card-lg + .collapsible-card-lg { + margin-left: 0; + border-left: 0; + } + .card-group > .card:not(:last-child), .card-group > .collapsible-card:not(:last-child), .card-group > .collapsible-card-lg:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-top, .card-group > .collapsible-card:not(:last-child) .card-img-top, .card-group > .collapsible-card-lg:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header, + .card-group > .collapsible-card:not(:last-child) .card-header, + .card-group > .collapsible-card-lg:not(:last-child) .card-header { + border-top-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-bottom, .card-group > .collapsible-card:not(:last-child) .card-img-bottom, .card-group > .collapsible-card-lg:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer, + .card-group > .collapsible-card:not(:last-child) .card-footer, + .card-group > .collapsible-card-lg:not(:last-child) .card-footer { + border-bottom-right-radius: 0; + } + .card-group > .card:not(:first-child), .card-group > .collapsible-card:not(:first-child), .card-group > .collapsible-card-lg:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-top, .card-group > .collapsible-card:not(:first-child) .card-img-top, .card-group > .collapsible-card-lg:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header, + .card-group > .collapsible-card:not(:first-child) .card-header, + .card-group > .collapsible-card-lg:not(:first-child) .card-header { + border-top-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-bottom, .card-group > .collapsible-card:not(:first-child) .card-img-bottom, .card-group > .collapsible-card-lg:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer, + .card-group > .collapsible-card:not(:first-child) .card-footer, + .card-group > .collapsible-card-lg:not(:first-child) .card-footer { + border-bottom-left-radius: 0; + } +} +.card-columns .card, .card-columns .collapsible-card, .card-columns .collapsible-card-lg { + margin-bottom: var(--pgn-spacing-card-columns-margin); +} +@media (min-width: 576px) { + .card-columns { + column-count: var(--pgn-spacing-card-columns-count); + column-gap: var(--pgn-spacing-card-columns-gap); + orphans: 1; + widows: 1; + } + .card-columns .card, .card-columns .collapsible-card, .card-columns .collapsible-card-lg { + display: inline-block; + width: 100%; + } +} +.accordion { + overflow-anchor: none; +} +.accordion > .card, .accordion > .collapsible-card, .accordion > .collapsible-card-lg { + overflow: hidden; +} +.accordion > .card:not(:last-of-type), .accordion > .collapsible-card:not(:last-of-type), .accordion > .collapsible-card-lg:not(:last-of-type) { + border-bottom: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.accordion > .card:not(:first-of-type), .accordion > .collapsible-card:not(:first-of-type), .accordion > .collapsible-card-lg:not(:first-of-type) { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.accordion > .card > .card-header, .accordion > .collapsible-card > .card-header, .accordion > .collapsible-card-lg > .card-header { + border-radius: 0; + margin-bottom: calc(var(--pgn-size-card-border-width) * -1); +} +a .pgn__card, +a.pgn__card { + color: var(--pgn-color-gray-700); + display: inline-block; + text-decoration: none; +} +.pgn__card-grid .row > div[class*=col-] { + margin-bottom: var(--pgn-spacing-card-margin-grid-bottom); +} +.pgn__card-grid .row > div[class*=col-], +.pgn__card-deck .row > div[class*=col-] { + display: flex; + flex: 1 0 auto; +} +.pgn__card-grid .row > div[class*=col-].pgn__card__disable-equal-column-heights, +.pgn__card-deck .row > div[class*=col-].pgn__card__disable-equal-column-heights { + display: block; +} +.pgn__card-deck { + position: relative; + margin-bottom: var(--pgn-spacing-card-margin-deck-bottom); +} +.pgn__card-deck.pgn__card-deck-has-horizontal-scroll .pgn__card-deck-row { + overflow-x: scroll; +} +.pgn__card-deck .pgn__card-deck-row { + overflow: hidden; + flex-wrap: nowrap; + padding-top: var(--pgn-spacing-card-focus-border-offset); + padding-bottom: var(--pgn-spacing-card-focus-border-offset); +} +.pgn__card-deck .pgn__card-deck-row:focus-visible { + outline: var(--pgn-size-card-focus-border-width) solid var(--pgn-color-card-border-focus-base); + border-radius: var(--pgn-size-card-focus-border-radius); +} +.pgn__card-carousel .pgn__card-carousel-title { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5); +} +.pgn__card-carousel .pgn__card-carousel-subtitle { + font-size: var(--pgn-typography-font-size-sm); + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5); +} +.pgn__card-carousel .pgn__card-carousel-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.25); +} +.pgn__data-table__selectable-card.is-selected > :first-child, .pgn__card.clickable:focus, .pgn__card.clickable.focus { + outline: none; +} +.pgn__data-table__selectable-card.is-selected > :first-child::before, .pgn__card.clickable:focus::before, .pgn__card.clickable.focus::before { + content: ""; + position: absolute; + top: calc(-1 * var(--pgn-spacing-card-focus-border-offset)); + right: calc(-1 * var(--pgn-spacing-card-focus-border-offset)); + bottom: calc(-1 * var(--pgn-spacing-card-focus-border-offset)); + left: calc(-1 * var(--pgn-spacing-card-focus-border-offset)); + border: solid var(--pgn-size-card-focus-border-width) var(--pgn-color-card-border-focus-base); + border-radius: var(--pgn-size-card-focus-border-radius); +} +.pgn__data-table__selectable-card.is-selected > .pgn__card-dark:first-child::before, .pgn__card-dark.pgn__card.clickable:focus::before, .pgn__card-dark.pgn__card.clickable.focus::before { + border: solid var(--pgn-size-card-focus-border-width) var(--pgn-color-card-border-focus-dark); +} +.pgn__card { + outline: none; + box-shadow: var(--pgn-elevation-box-shadow-down-1); +} +.pgn__card.clickable:hover, .pgn__card.clickable:focus, .pgn__card.clickable.focus { + cursor: pointer; + box-shadow: var(--pgn-elevation-box-shadow-down-2); +} +.pgn__card.horizontal { + flex-direction: row; +} +.pgn__card .pgn__card-header { + padding: 0 var(--pgn-spacing-card-spacer-x); + display: flex; + justify-content: space-between; +} +.pgn__card .pgn__card-header .pgn__card-header-content { + display: flex; + flex-direction: column; + margin-top: calc(var(--pgn-spacing-spacer-base) * 2); + overflow: auto; + text-align: start; + width: 100%; +} +.pgn__card .pgn__card-header .pgn__card-header-title, +.pgn__card .pgn__card-header .pgn__card-header-title-sm, +.pgn__card .pgn__card-header .pgn__card-header-title-md { + color: var(--pgn-color-black); + font-weight: var(--pgn-typography-font-weight-bold); + text-align: start; +} +.pgn__card .pgn__card-header .pgn__card-header-title-sm { + font-size: var(--pgn-typography-font-size-h4-base); +} +.pgn__card .pgn__card-header .pgn__card-header-title-md { + font-size: var(--pgn-typography-font-size-h3-base); +} +.pgn__card .pgn__card-header .pgn__card-header-subtitle, +.pgn__card .pgn__card-header .pgn__card-header-subtitle-sm, +.pgn__card .pgn__card-header .pgn__card-header-subtitle-md { + color: var(--pgn-color-gray-700); + margin-top: calc(var(--pgn-spacing-spacer-base) * 0.25); +} +.pgn__card .pgn__card-header .pgn__card-header-subtitle-sm { + font-size: var(--pgn-typography-font-size-h5-base); +} +.pgn__card .pgn__card-header .pgn__card-header-subtitle-md { + font-size: var(--pgn-typography-font-size-h4-base); +} +.pgn__card .pgn__card-header .pgn__card-header-actions { + margin-top: var(--pgn-spacing-spacer-base); + margin-inline-start: var(--pgn-spacing-spacer-base); + flex-shrink: 0; +} +.pgn__card .pgn__card-header .pgn__card-header-loader { + width: 100%; +} +.pgn__card .pgn__card-header .pgn__card-header-loader .react-loading-skeleton { + margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5); +} +.pgn__card .pgn__card-footer { + width: 100%; + padding: var(--pgn-spacing-card-spacer-x); + display: flex; + align-items: center; + justify-content: center; +} +.pgn__card .pgn__card-footer.vertical { + justify-content: flex-end; + padding-top: 0; +} +.pgn__card .pgn__card-footer.vertical > * + * { + margin-inline-start: var(--pgn-spacing-card-footer-action-gap); +} +.pgn__card .pgn__card-footer .pgn__card-footer-loader { + width: 100%; + margin-inline-start: 0; +} +.pgn__card .pgn__card-footer.vertical-stacked { + flex-direction: column-reverse; + padding-top: var(--pgn-spacing-card-spacer-x)-var(--pgn-spacing-card-footer-action-gap); +} +.pgn__card .pgn__card-footer.vertical-stacked > * { + width: 100%; + margin-top: var(--pgn-spacing-card-footer-action-gap); +} +.pgn__card .pgn__card-footer.horizontal { + flex-wrap: wrap; +} +.pgn__card .pgn__card-footer.horizontal > :not(:last-child) { + margin-inline-end: var(--pgn-spacing-card-footer-action-gap); +} +.pgn__card .pgn__card-footer.horizontal-stacked { + flex-direction: column-reverse; + padding-top: var(--pgn-spacing-card-spacer-x)-var(--pgn-spacing-card-footer-action-gap); +} +.pgn__card .pgn__card-footer.horizontal-stacked > * { + margin-top: var(--pgn-spacing-card-footer-action-gap); +} +.pgn__card .pgn__card-footer .pgn__card-footer-text { + color: var(--pgn-color-gray-700); + order: 1; + font-size: var(--pgn-typography-footer-text-font-size); +} +.pgn__card .pgn__card-footer .pgn__card-footer-text.vertical { + margin-inline-end: auto; + order: -1; +} +.pgn__card .pgn__card-footer .pgn__card-footer-text.vertical-stacked { + margin-right: auto; +} +.pgn__card .pgn__card-footer .pgn__card-footer-text.horizontal { + margin-top: var(--pgn-spacing-card-spacer-x); + width: 100%; + text-align: center; +} +.pgn__card .pgn__card-footer .pgn__card-footer-text.horizontal-stacked { + margin-top: var(--pgn-spacing-card-spacer-x); + width: 100%; + text-align: center; + order: -1; +} +.pgn__card .pgn__card-divider { + border-top: 1px solid var(--pgn-color-card-divider-bg); + height: 0; +} +.pgn__card .pgn__card-section { + padding: var(--pgn-spacing-card-spacer-x); + flex-grow: 1; + text-align: start; +} +.pgn__card .pgn__card-section.is-muted { + background-color: var(--pgn-color-light-200); +} +.pgn__card .pgn__card-section .pgn__card-section-title { + color: var(--pgn-color-black); + font-weight: var(--pgn-typography-font-weight-bold); + font-size: var(--pgn-typography-font-size-h5-base); + margin-bottom: var(--pgn-spacing-card-spacer-y); +} +.pgn__card .pgn__card-section .pgn__card-section-actions { + display: flex; + justify-content: flex-end; + margin-top: var(--pgn-spacing-card-spacer-y); +} +[dir=rtl] .pgn__card .pgn__card-section dd { + margin-right: 0; + margin-left: 40px; +} +.pgn__card .pgn__card-image-cap { + object-fit: cover; + max-height: inherit; + width: 100%; + border-top-left-radius: var(--pgn-size-card-image-border-radius); + border-top-right-radius: var(--pgn-size-card-image-border-radius); + display: none; +} +.pgn__card .pgn__card-image-cap.show { + display: block; +} +.pgn__card .pgn__card-wrapper-image-cap { + position: relative; +} +.pgn__card .pgn__card-wrapper-image-cap.horizontal { + max-width: var(--pgn-size-card-image-horizontal-width-max); + min-width: var(--pgn-size-card-image-horizontal-width-min); + overflow: hidden; +} +.pgn__card .pgn__card-wrapper-image-cap.horizontal .pgn__card-image-cap { + height: 100%; + max-width: inherit; + border-radius: var(--pgn-size-card-image-border-radius) 0 0 var(--pgn-size-card-image-border-radius); + width: auto; + object-fit: cover; +} +.pgn__card .pgn__card-wrapper-image-cap.horizontal .pgn__card-logo-cap { + inset-inline-start: var(--pgn-spacing-card-logo-left-offset-horizontal); + bottom: var(--pgn-spacing-card-logo-bottom-offset-horizontal); +} +.pgn__card .pgn__card-wrapper-image-cap.horizontal .pgn__card-image-cap-loader .react-loading-skeleton { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.pgn__card .pgn__card-wrapper-image-cap.vertical { + max-height: var(--pgn-size-card-image-vertical-max-height); +} +.pgn__card .pgn__card-wrapper-image-cap .pgn__card-image-cap-loader .react-loading-skeleton { + margin-bottom: calc(-1 * var(--pgn-spacing-card-loading-skeleton-spacer)); + position: relative; + top: calc(-1 * var(--pgn-spacing-card-loading-skeleton-spacer)); + height: 100%; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.pgn__card .pgn__card-wrapper-image-cap .pgn__card-logo-cap { + position: absolute; + inset-inline-start: var(--pgn-spacing-card-logo-left-offset-base); + bottom: calc(-1 * var(--pgn-spacing-card-logo-bottom-offset-base)); + width: var(--pgn-size-card-logo-width); + height: var(--pgn-size-card-logo-height); + object-fit: scale-down; + object-position: center center; + border-radius: var(--pgn-size-card-border-radius-logo); + box-shadow: var(--pgn-elevation-box-shadow-level-1); + padding: calc(var(--pgn-spacing-spacer-base) * 0.5); + background-color: var(--pgn-color-white); + display: none; +} +.pgn__card .pgn__card-wrapper-image-cap .pgn__card-logo-cap.show { + display: block; +} +.pgn__card .pgn__card-status { + box-shadow: none; + margin-bottom: 0; + font-size: var(--pgn-typography-font-size-sm); + line-height: 1.5rem; + text-align: start; + position: relative; + padding: var(--pgn-spacing-card-spacer-y) var(--pgn-spacing-card-spacer-x); + border: 0 solid transparent; + border-radius: 0 0 var(--pgn-size-card-border-radius-base) var(--pgn-size-card-border-radius-base); +} +.pgn__card .pgn__card-status .pgn__card-status__content { + display: flex; +} +.pgn__card .pgn__card-status .pgn__card-status__message-content { + flex-grow: 1; +} +.pgn__card .pgn__card-status .pgn__card-status__message-content > :last-child { + margin-bottom: 0; +} +.pgn__card .pgn__card-status .pgn__card-status__actions { + margin-top: var(--pgn-spacing-spacer-base); +} +.pgn__card .pgn__card-status .pgn__card-status__heading { + font-size: var(--pgn-typography-font-size-h4-base); + color: var(--pgn-color-black); + display: flex; + font-weight: var(--pgn-typography-font-weight-bold); + line-height: 1.5rem; + margin-bottom: 0.5rem; +} +.pgn__card .pgn__card-status .pgn__card-status__content-icon { + margin-inline-end: 0.8rem; + width: 1.5rem; + height: 1.5rem; + flex-shrink: 0; +} +.pgn__card .pgn__card-status.pgn__card-status__primary { + color: inherit; + background-color: var(--pgn-color-primary-100); + border-color: var(--pgn-color-primary-200); + color: var(--pgn-color-white); + background-color: var(--pgn-color-primary-500); + border-color: var(--pgn-color-primary-500); + box-shadow: 0 0 0 1px var(--pgn-color-primary-500); +} +.pgn__card .pgn__card-status.pgn__card-status__primary .pgn__card-status__content-icon { + color: var(--pgn-color-primary-500); + color: var(--pgn-color-white); +} +.pgn__card .pgn__card-status.pgn__card-status__secondary { + color: inherit; + background-color: var(--pgn-color-secondary-100); + border-color: var(--pgn-color-secondary-200); +} +.pgn__card .pgn__card-status.pgn__card-status__secondary .pgn__card-status__content-icon { + color: var(--pgn-color-secondary-500); +} +.pgn__card .pgn__card-status.pgn__card-status__brand { + color: inherit; + background-color: var(--pgn-color-brand-100); + border-color: var(--pgn-color-brand-200); +} +.pgn__card .pgn__card-status.pgn__card-status__brand .pgn__card-status__content-icon { + color: var(--pgn-color-brand-500); +} +.pgn__card .pgn__card-status.pgn__card-status__success { + color: inherit; + background-color: var(--pgn-color-success-100); + border-color: var(--pgn-color-success-200); +} +.pgn__card .pgn__card-status.pgn__card-status__success .pgn__card-status__content-icon { + color: var(--pgn-color-success-500); +} +.pgn__card .pgn__card-status.pgn__card-status__info { + color: inherit; + background-color: var(--pgn-color-info-100); + border-color: var(--pgn-color-info-200); +} +.pgn__card .pgn__card-status.pgn__card-status__info .pgn__card-status__content-icon { + color: var(--pgn-color-info-500); +} +.pgn__card .pgn__card-status.pgn__card-status__warning { + color: inherit; + background-color: var(--pgn-color-warning-100); + border-color: var(--pgn-color-warning-200); +} +.pgn__card .pgn__card-status.pgn__card-status__warning .pgn__card-status__content-icon { + color: var(--pgn-color-warning-500); +} +.pgn__card .pgn__card-status.pgn__card-status__danger { + color: inherit; + background-color: var(--pgn-color-danger-100); + border-color: var(--pgn-color-danger-200); +} +.pgn__card .pgn__card-status.pgn__card-status__danger .pgn__card-status__content-icon { + color: var(--pgn-color-danger-500); +} +.pgn__card .pgn__card-status.pgn__card-status__light { + color: inherit; + background-color: var(--pgn-color-light-100); + border-color: var(--pgn-color-light-200); +} +.pgn__card .pgn__card-status.pgn__card-status__light .pgn__card-status__content-icon { + color: var(--pgn-color-light-500); +} +.pgn__card .pgn__card-status.pgn__card-status__dark { + color: inherit; + background-color: var(--pgn-color-dark-100); + border-color: var(--pgn-color-dark-200); +} +.pgn__card .pgn__card-status.pgn__card-status__dark .pgn__card-status__content-icon { + color: var(--pgn-color-dark-500); +} +.pgn__card .pgn__card-status.pgn__card-status__gray { + color: inherit; + background-color: var(--pgn-color-gray-100); + border-color: var(--pgn-color-gray-200); +} +.pgn__card .pgn__card-status.pgn__card-status__gray .pgn__card-status__content-icon { + color: var(--pgn-color-gray-500); +} +.pgn__card .pgn__card-status.pgn__card-status__accent-a { + color: inherit; + background-color: var(--pgn-color-accent-a); + border-color: var(--pgn-color-accent-a); +} +.pgn__card .pgn__card-status.pgn__card-status__accent-a .pgn__card-status__content-icon { + color: var(--pgn-color-accent-a); +} +.pgn__card .pgn__card-status.pgn__card-status__accent-b { + color: inherit; + background-color: var(--pgn-color-accent-b); + border-color: var(--pgn-color-accent-b); +} +.pgn__card .pgn__card-status.pgn__card-status__accent-b .pgn__card-status__content-icon { + color: var(--pgn-color-accent-b); +} +.pgn__card, +.pgn__card-body { + width: 100%; + border: 0; +} +.pgn__card.pgn__card-dark .pgn__card-footer, +.pgn__card.pgn__card-dark .pgn__card-footer-text, .pgn__card.pgn__card-dark .pgn__card-section .pgn__card-section-title, .pgn__card.pgn__card-dark .pgn__card-section, .pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-title, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-title-sm, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-title-md, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle-sm, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle-md, .pgn__card.pgn__card-dark .pgn__card-header, .pgn__card .pgn__card.pgn__card-dark, +.pgn__card .pgn__card-body.pgn__card-dark, +.pgn__card-body.pgn__card-dark .pgn__card-footer, +.pgn__card-body.pgn__card-dark .pgn__card-footer-text, +.pgn__card-body.pgn__card-dark .pgn__card-section .pgn__card-section-title, +.pgn__card-body.pgn__card-dark .pgn__card-section, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-title, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-title-sm, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-title-md, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle-sm, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle-md, +.pgn__card-body.pgn__card-dark .pgn__card-header, +.pgn__card-body .pgn__card.pgn__card-dark, +.pgn__card-body .pgn__card-body.pgn__card-dark { + color: var(--pgn-color-white); +} +.pgn__card.pgn__card-dark .pgn__card-footer a, +.pgn__card.pgn__card-dark .pgn__card-footer-text a, .pgn__card.pgn__card-dark .pgn__card-section .pgn__card-section-title a, .pgn__card.pgn__card-dark .pgn__card-section a, .pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-title a, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-title-sm a, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-title-md a, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle a, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle-sm a, +.pgn__card.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle-md a, .pgn__card.pgn__card-dark .pgn__card-header a, .pgn__card .pgn__card.pgn__card-dark a, +.pgn__card .pgn__card-body.pgn__card-dark a, +.pgn__card-body.pgn__card-dark .pgn__card-footer a, +.pgn__card-body.pgn__card-dark .pgn__card-footer-text a, +.pgn__card-body.pgn__card-dark .pgn__card-section .pgn__card-section-title a, +.pgn__card-body.pgn__card-dark .pgn__card-section a, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-title a, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-title-sm a, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-title-md a, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle a, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle-sm a, +.pgn__card-body.pgn__card-dark .pgn__card-header .pgn__card-header-subtitle-md a, +.pgn__card-body.pgn__card-dark .pgn__card-header a, +.pgn__card-body .pgn__card.pgn__card-dark a, +.pgn__card-body .pgn__card-body.pgn__card-dark a { + color: var(--pgn-color-white); +} +.pgn__card.pgn__card-dark, +.pgn__card-body.pgn__card-dark { + background-color: var(--pgn-color-card-bg-dark); +} +.pgn__card.pgn__card-muted, +.pgn__card-body.pgn__card-muted { + background-color: var(--pgn-color-card-bg-muted); +} +@media (max-width: 576px) { + .pgn__card-footer.horizontal > :not(:last-child) { + margin-inline-end: 0; + } + .pgn__card-footer .btn { + width: 100%; + margin: 0.625rem 0 0; + margin-inline-end: 0; + } + .pgn__action-row .btn:not(:last-child) { + margin-bottom: 0.3125rem; + } + .pgn__action-row > * + * { + margin-inline-start: 0; + } + .pgn__action-row-stacked .btn, + .pgn__card-section .btn { + width: 100%; + } +} +@media (--pgn-size-breakpoint-max-width-xs) { + .pgn__card-footer.horizontal > :not(:last-child) { + margin-inline-end: 0; + } + .pgn__card-footer .btn { + width: 100%; + margin: 0.625rem 0 0; + margin-inline-end: 0; + } + .pgn__action-row .btn:not(:last-child) { + margin-bottom: 0.3125rem; + } + .pgn__action-row > * + * { + margin-inline-start: 0; + } + .pgn__action-row-stacked .btn, + .pgn__card-section .btn { + width: 100%; + } +} +.carousel { + position: relative; +} +.carousel.pointer-event { + touch-action: pan-y; +} +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} +.carousel-inner::after { + display: block; + clear: both; + content: ""; +} +.carousel-item { + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + backface-visibility: hidden; + transition: var(--pgn-transition-carousel-base); +} +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; +} +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + transform: translateX(100%); +} +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + transform: translateX(-100%); +} +.carousel-fade .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; +} +.carousel-fade .carousel-item.active, +.carousel-fade .carousel-item-next.carousel-item-left, +.carousel-fade .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; +} +.carousel-fade .active.carousel-item-left, +.carousel-fade .active.carousel-item-right { + z-index: 0; + opacity: 0; + transition: var(--pgn-transition-carousel-base); +} +.carousel-control-prev, +.carousel-control-next { + position: absolute; + top: 0; + bottom: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: var(--pgn-size-carousel-control-width-base); + padding: 0; + color: var(--pgn-color-carousel-control-base); + text-align: center; + background: none; + border: 0; + opacity: var(--pgn-other-carousel-control-opacity-base); + transition: var(--pgn-transition-carousel-control); +} +.carousel-control-prev:hover, .carousel-control-prev:focus, +.carousel-control-next:hover, +.carousel-control-next:focus { + color: var(--pgn-carousel-control-color); + text-decoration: none; + outline: 0; + opacity: var(--pgn-other-carousel-control-opacity-hover); +} +.carousel-control-prev { + left: 0; +} +.carousel-control-next { + right: 0; +} +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: var(--pgn-size-carousel-control-width-icon); + height: var(--pgn-size-carousel-control-width-icon); + background: 50%/100% 100% no-repeat; +} +.carousel-control-prev-icon { + background-image: var(--pgn-content-carousel-control-bg-prev-icon); +} +.carousel-control-next-icon { + background-image: var(--pgn-content-carousel-control-bg-next-icon); +} +.carousel-indicators { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 15; + display: flex; + justify-content: center; + padding-left: 0; + margin-right: var(--pgn-size-carousel-control-width-base); + margin-left: var(--pgn-size-carousel-control-width-base); + list-style: none; +} +.carousel-indicators li { + box-sizing: content-box; + flex: 0 1 auto; + width: var(--pgn-size-carousel-indicator-width); + height: var(--pgn-size-carousel-indicator-height-base); + margin-right: var(--pgn-spacing-carousel-indicator-spacer); + margin-left: var(--pgn-spacing-carousel-indicator-spacer); + text-indent: -999px; + cursor: pointer; + background-color: var(--pgn-color-carousel-indicator-active-bg); + background-clip: padding-box; + border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent; + border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent; + opacity: 0.5; + transition: var(--pgn-transition-carousel-indicator); +} +.carousel-indicators .active { + opacity: 1; +} +.carousel-caption { + position: absolute; + right: calc((100% - var(--pgn-size-carousel-caption-width)) * 0.5); + bottom: 20px; + left: calc((100% - var(--pgn-size-carousel-caption-width)) * 0.5); + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: var(--pgn-color-carousel-caption); + text-align: center; +} +.collapsible-card, .collapsible-card-lg { + border-radius: 0; +} +.collapsible-card .collapsible-trigger, .collapsible-card-lg .collapsible-trigger { + padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base); + border-radius: var(--pgn-size-card-border-radius-inner); + border-bottom: var(--pgn-size-card-border-width) solid transparent; + transition: border-color 100ms ease 150ms; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + text-align: start; +} +.collapsible-card .collapsible-trigger > *, .collapsible-card-lg .collapsible-trigger > * { + margin-bottom: 0; + margin-top: 0; +} +.collapsible-card .collapsible-trigger[aria-expanded=true], .collapsible-card-lg .collapsible-trigger[aria-expanded=true] { + border-radius: var(--pgn-size-card-border-radius-inner) var(--pgn-size-card-border-radius-inner) 0 0; + border-color: var(--pgn-color-card-border-base); + transition: none; + text-align: start; +} +.collapsible-card .collapsible-body, .collapsible-card-lg .collapsible-body { + padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base); + padding-left: var(--pgn-spacing-collapsible-card-spacer-left-body); + text-align: start; +} +.collapsible-card .collapsible-body > *:last-child, .collapsible-card-lg .collapsible-body > *:last-child { + margin-bottom: 0; +} +.collapsible-card .collapsible-icon, .collapsible-card-lg .collapsible-icon { + margin-inline-start: var(--pgn-spacing-collapsible-card-spacer-icon); +} +.collapsible-card-lg .collapsible-trigger { + padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg); +} +.collapsible-card-lg .collapsible-body { + padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg); +} +.collapsible-basic .collapsible-trigger { + display: flex; + cursor: pointer; + align-items: center; + text-decoration: underline; + color: var(--pgn-color-primary-500); + padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x); +} +.collapsible-basic .collapsible-body { + padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x); + text-align: start; +} +.collapsible-basic .collapsible-body.collapsing { + transition: height 300ms ease; +} +.collapsible-basic .collapsible-icon { + margin-left: var(--pgn-spacing-collapsible-card-spacer-basic-icon); +} +.close { + float: right; + font-weight: var(--pgn-typography-close-button-font-weight); + line-height: 1; + color: var(--pgn-color-close-button); + text-shadow: var(--pgn-elevation-close-button-text-shadow); + opacity: 0.5; + font-size: var(--pgn-typography-close-button-font-size); +} +.close:hover { + color: var(--pgn-color-close-button); + text-decoration: none; +} +.close:not(:disabled, .disabled):hover, .close:not(:disabled, .disabled):focus { + opacity: 0.75; +} +button.close { + padding: 0; + background-color: transparent; + border: 0; +} +a.close.disabled { + pointer-events: none; +} +.pgn__chip { + border-radius: var(--pgn-size-chip-border-radius); + display: inline-flex; + justify-content: space-between; + align-items: center; + margin: var(--pgn-spacing-chip-margin-base); + border: 1px solid var(--pgn-color-chip-border-base); + padding: var(--pgn-spacing-chip-padding-y) var(--pgn-spacing-chip-padding-x); + position: relative; + outline: none; + transition: all 0.3s; +} +.pgn__chip .pgn__chip__label { + font-size: var(--pgn-typography-font-size-xs); + line-height: 1.5rem; + font-weight: var(--pgn-typography-font-weight-bold); + color: var(--pgn-color-chip-label-base); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +[dir=rtl] .pgn__chip .pgn__chip__label { + margin-left: var(--pgn-spacing-chip-margin-icon); +} +.pgn__chip .pgn__chip__icon-before { + margin-right: var(--pgn-spacing-chip-margin-icon); +} +[dir=rtl] .pgn__chip .pgn__chip__icon-before { + margin-right: 0; + margin-left: 0.25rem; +} +.pgn__chip .pgn__chip__icon-after { + margin-left: var(--pgn-spacing-chip-margin-icon); +} +[dir=rtl] .pgn__chip .pgn__chip__icon-after { + margin-left: 0; +} +.pgn__chip .pgn__chip__icon-before.btn-icon, +.pgn__chip .pgn__chip__icon-after.btn-icon { + width: var(--pgn-size-chip-icon); + height: var(--pgn-size-chip-icon); +} +.pgn__chip.pgn__chip-light { + background-color: var(--pgn-color-chip-bg-light); +} +.pgn__chip.pgn__chip-light.selected::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1); + right: calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1); + bottom: calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1); + left: calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1); + border: solid var(--pgn-spacing-chip-outline-selected-distance-light) var(--pgn-color-chip-outline-light); + border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)); +} +.pgn__chip.pgn__chip-light.selected:focus { + border: 1px solid var(--pgn-color-chip-border-focus-selected-light); +} +.pgn__chip.pgn__chip-light .pgn__chip__icon-before.pgn__icon, +.pgn__chip.pgn__chip-light .pgn__chip__icon-after.pgn__icon { + color: var(--pgn-color-chip-label-base); +} +.pgn__chip.pgn__chip-light.interactive { + cursor: pointer; +} +.pgn__chip.pgn__chip-light.interactive:hover { + background-color: var(--pgn-color-dark-500); + border-color: var(--pgn-color-dark-500); +} +.pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__label { + color: var(--pgn-color-white); +} +.pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__icon-before.pgn__icon, .pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__icon-before.btn-icon, +.pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__icon-after.pgn__icon, +.pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__icon-after.btn-icon { + color: var(--pgn-color-white); +} +.pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__icon-before.btn-icon:hover, +.pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__icon-after.btn-icon:hover { + background-color: var(--pgn-color-white); + color: var(--pgn-color-dark-500); +} +.pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__icon-before.btn-icon:focus, +.pgn__chip.pgn__chip-light.interactive:hover .pgn__chip__icon-after.btn-icon:focus { + color: var(--pgn-color-white); + border: 2px solid var(--pgn-color-white); + background-color: var(--pgn-color-dark-500); +} +.pgn__chip.pgn__chip-light.interactive:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1); + right: calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1); + bottom: calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1); + left: calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1); + border: solid 0.125rem var(--pgn-color-chip-border-focus-selected-light); + border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)); +} +.pgn__chip.pgn__chip-dark { + background-color: var(--pgn-color-chip-bg-dark); +} +.pgn__chip.pgn__chip-dark.selected::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1); + right: calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1); + bottom: calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1); + left: calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1); + border: solid var(--pgn-spacing-chip-outline-selected-distance-dark) var(--pgn-color-chip-outline-dark); + border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)); +} +.pgn__chip.pgn__chip-dark.selected:focus { + border: 1px solid var(--pgn-color-chip-border-focus-selected-dark); +} +.pgn__chip.pgn__chip-dark .pgn__chip__label { + color: var(--pgn-color-chip-label-dark); +} +.pgn__chip.pgn__chip-dark .pgn__chip__icon-before.pgn__icon, +.pgn__chip.pgn__chip-dark .pgn__chip__icon-after.pgn__icon { + color: var(--pgn-color-chip-outline-dark); +} +.pgn__chip.pgn__chip-dark.interactive { + cursor: pointer; +} +.pgn__chip.pgn__chip-dark.interactive:hover { + background-color: var(--pgn-color-white); + border-color: var(--pgn-color-white); +} +.pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__label { + color: var(--pgn-color-primary-500); +} +.pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__icon-before.pgn__icon, .pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__icon-before.btn-icon, +.pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__icon-after.pgn__icon, +.pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__icon-after.btn-icon { + color: var(--pgn-color-primary-500); +} +.pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__icon-before.btn-icon:hover, +.pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__icon-after.btn-icon:hover { + background-color: var(--pgn-color-primary-500); + color: var(--pgn-color-white); +} +.pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__icon-before.btn-icon:focus, +.pgn__chip.pgn__chip-dark.interactive:hover .pgn__chip__icon-after.btn-icon:focus { + color: var(--pgn-color-primary-500); + border: 2px solid var(--pgn-color-primary-500); + background-color: var(--pgn-color-white); +} +.pgn__chip.pgn__chip-dark.interactive:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1); + right: calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1); + bottom: calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1); + left: calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1); + border: solid 0.125rem var(--pgn-color-chip-outline-dark); + border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)); +} +.pgn__chip.disabled, .pgn__chip:disabled { + opacity: var(--pgn-other-chip-opacity-disabled); + pointer-events: none; + user-select: none; +} +.pgn__chip.disabled::before, .pgn__chip:disabled::before { + display: none; +} +.pgn__chip-light { + --pgn-chip-color: var(--pgn-color-chip-text-light); + --pgn-chip-bg: var(--pgn-color-chip-bg-light); +} +.pgn__chip-dark { + --pgn-chip-color: var(--pgn-color-chip-text-dark); + --pgn-chip-bg: var(--pgn-color-chip-bg-dark); +} +.pgn__chip-carousel { + position: relative; +} +.pgn__chip-carousel .pgn__overflow-scroll-overflow-container { + --pgn-overflow-scroll-opacity-mask-transparent: rgba(0, 0, 0, 0); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__0 .pgn__overflow-scroll-overflow-container { + column-gap: 0; + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__1 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 0.25); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__1\.5 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 0.375); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__2 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 0.5); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__2\.5 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 0.75); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__3 .pgn__overflow-scroll-overflow-container { + column-gap: var(--pgn-spacing-spacer-base); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__3\.5 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 1.25); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__4 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 1.5); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__4\.5 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 2); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__5 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 3); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__5\.5 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 4); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel.pgn__chip-carousel-gap__6 .pgn__overflow-scroll-overflow-container { + column-gap: calc(var(--pgn-spacing-spacer-base) * 5); + padding: var(--pgn-spacing-chip-carousel-container-padding-x) var(--pgn-spacing-chip-carousel-container-padding-y); +} +.pgn__chip-carousel .pgn__chip-carousel__right-control, +.pgn__chip-carousel .pgn__chip-carousel__left-control { + position: absolute; + z-index: 2; + top: var(--pgn-spacing-chip-carousel-controls-top-offset); +} +.pgn__chip-carousel .pgn__chip-carousel__right-control { + right: 0; +} +.pgn__chip-carousel .pgn__chip-carousel__left-control { + left: 0; +} +code { + color: var(--pgn-color-code-base); + word-wrap: break-word; + font-size: var(--pgn-typography-code-font-size); +} +a > code { + color: inherit; +} +kbd { + padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x); + color: var(--pgn-color-code-kbd-base); + background-color: var(--pgn-color-code-kbd-bg); + box-shadow: var(--pgn-elevation-code-kbd-box-shadow); + font-size: var(--pgn-typography-code-kbd-font-size); + border-radius: var(--pgn-size-border-radius-sm); +} +kbd kbd { + padding: 0; + font-weight: var(--pgn-typography-code-kbd-nested-font-weight); + box-shadow: none; + font-size: 100%; +} +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} +.pre-scrollable { + max-height: var(--pgn-size-code-pre-scrollable-max-height); + overflow-y: scroll; +} +.dropup, +.dropright, +.dropdown, +.dropleft { + position: relative; +} +.dropdown-toggle { + white-space: nowrap; +} +.dropdown-toggle::after { + display: inline-block; + margin-left: var(--pgn-spacing-caret-base); + vertical-align: var(--pgn-spacing-caret-vertical-align); + border-top: var(--pgn-size-caret-width) solid; + border-right: var(--pgn-size-caret-width) solid transparent; + border-bottom: 0; + border-left: var(--pgn-size-caret-width) solid transparent; + content: ""; + border: 0; + border-style: solid; + border-width: 0.15rem 0.15rem 0 0; + height: 0.45rem; + margin-inline-start: 0.5em; + position: relative; + top: -0.05rem; + transform: rotate(135deg); + width: 0.45rem; +} +.dropdown-toggle:empty::after { + margin-left: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: var(--pgn-elevation-dropdown-zindex); + display: none; + float: left; + min-width: var(--pgn-size-dropdown-min-width); + padding: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-base); + margin: var(--pgn-spacing-dropdown-spacer) 0 0; + color: var(--pgn-color-dropdown-text); + text-align: left; + list-style: none; + background-color: var(--pgn-color-dropdown-bg); + background-clip: padding-box; + border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border); + box-shadow: var(--pgn-elevation-dropdown-box-shadow); + font-size: var(--pgn-typography-dropdown-font-size); + border-radius: var(--pgn-size-dropdown-border-radius-base); +} +.dropdown-menu[x-placement^=top], .dropdown-menu[x-placement^=right], .dropdown-menu[x-placement^=bottom], .dropdown-menu[x-placement^=left] { + right: auto; + bottom: auto; +} +.dropdown-menu-left { + right: auto; + left: 0; +} +.dropdown-menu-right { + right: 0; + left: auto; +} +@media (min-width: 576px) { + .dropdown-menu-sm-left { + right: auto; + left: 0; + } + .dropdown-menu-sm-right { + right: 0; + left: auto; + } +} +@media (min-width: 768px) { + .dropdown-menu-md-left { + right: auto; + left: 0; + } + .dropdown-menu-md-right { + right: 0; + left: auto; + } +} +@media (min-width: 992px) { + .dropdown-menu-lg-left { + right: auto; + left: 0; + } + .dropdown-menu-lg-right { + right: 0; + left: auto; + } +} +@media (min-width: 1200px) { + .dropdown-menu-xl-left { + right: auto; + left: 0; + } + .dropdown-menu-xl-right { + right: 0; + left: auto; + } +} +@media (min-width: 1400px) { + .dropdown-menu-xxl-left { + right: auto; + left: 0; + } + .dropdown-menu-xxl-right { + right: 0; + left: auto; + } +} +.dropup .dropdown-menu { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: var(--pgn-spacing-dropdown-spacer); +} +.dropup .dropdown-toggle::after { + display: inline-block; + margin-left: var(--pgn-spacing-caret-base); + vertical-align: var(--pgn-spacing-caret-vertical-align); + content: ""; + border-top: 0; + border-right: var(--pgn-size-caret-width) solid transparent; + border-bottom: var(--pgn-size-caret-width) solid; + border-left: var(--pgn-size-caret-width) solid transparent; +} +.dropup .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropright .dropdown-menu { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + margin-left: var(--pgn-spacing-dropdown-spacer); +} +.dropright .dropdown-toggle::after { + display: inline-block; + margin-left: var(--pgn-spacing-caret-base); + vertical-align: var(--pgn-spacing-caret-vertical-align); + content: ""; + border-top: var(--pgn-size-caret-width) solid transparent; + border-right: 0; + border-bottom: var(--pgn-size-caret-width) solid transparent; + border-left: var(--pgn-size-caret-width) solid; + vertical-align: 0; +} +.dropright .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropleft .dropdown-menu { + top: 0; + right: 100%; + left: auto; + margin-top: 0; + margin-right: var(--pgn-spacing-dropdown-spacer); +} +.dropleft .dropdown-toggle::after { + display: inline-block; + margin-left: var(--pgn-spacing-caret-base); + vertical-align: var(--pgn-spacing-caret-vertical-align); + content: ""; + display: none; +} +.dropleft .dropdown-toggle::before { + display: inline-block; + margin-right: var(--pgn-spacing-caret-base); + vertical-align: var(--pgn-spacing-caret-vertical-align); + content: ""; + border-top: var(--pgn-size-caret-width) solid transparent; + border-right: var(--pgn-size-caret-width) solid; + border-bottom: var(--pgn-size-caret-width) solid transparent; + vertical-align: 0; +} +.dropleft .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropdown-divider { + height: 0; + margin: var(--pgn-spacing-dropdown-divider-margin-y) 0; + overflow: hidden; + border-top: 1px solid var(--pgn-color-dropdown-divider-bg); +} +.dropdown-item { + display: block; + width: 100%; + padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item); + clear: both; + font-weight: var(--pgn-typography-font-weight-normal); + color: var(--pgn-color-dropdown-link-base); + text-align: inherit; + text-decoration: var(--pgn-typography-dropdown-item-text-decoration); + white-space: nowrap; + background-color: transparent; + border: 0; +} +.dropdown-item:hover, .dropdown-item:focus { + color: var(--pgn-color-dropdown-link-hover-base); + text-decoration: none; + background-color: var(--pgn-color-dropdown-link-hover-bg); +} +.dropdown-item.active, .dropdown-item:active { + color: var(--pgn-color-dropdown-link-active-base); + text-decoration: none; + background-color: var(--pgn-color-dropdown-link-active-bg); +} +.dropdown-item.disabled, .dropdown-item:disabled { + color: var(--pgn-color-dropdown-link-disabled); + pointer-events: none; + background-color: transparent; +} +.dropdown-menu.show { + display: block; +} +.dropdown-header { + display: block; + padding: var(--pgn-spacing-dropdown-padding-header); + margin-bottom: 0; + color: var(--pgn-color-dropdown-header); + white-space: nowrap; + font-size: var(--pgn-typography-font-size-sm); +} +.dropdown-item-text { + display: block; + padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item); + color: var(--pgn-color-dropdown-link-base); +} +.pgn__dropdown-dark .dropdown-menu { + background-color: var(--pgn-color-dark-300); + color: var(--pgn-color-white); +} +.pgn__dropdown-dark .dropdown-menu .pgn__dropdown-item { + color: var(--pgn-color-white); + font-weight: 400; +} +.pgn__dropdown-dark .dropdown-menu .pgn__dropdown-item:hover { + background-color: var(--pgn-color-dark-200); +} +.pgn__dropdown-dark .dropdown-menu .pgn__dropdown-item.active { + background-color: var(--pgn-color-light-300); + color: var(--pgn-color-primary-700); + font-weight: 700; +} +.pgn__dropdown-dark .dropdown-menu .pgn__dropdown-item:focus { + border: 2px solid var(--pgn-color-white); + background-color: inherit; +} +.pgn__dropdown-dark .dropdown-menu .dropdown-header { + color: var(--pgn-color-light-700); +} +.pgn__dropdown-dark .dropdown-menu .dropdown-divider { + border-color: var(--pgn-color-dark-200); +} +[dir=rtl] .dropdown-item { + text-align: right; +} +.pgn__dropdown-toggle-iconbutton { + white-space: nowrap; +} +.pgn__dropdown-item { + display: flex; + align-items: center; +} +.pgn__dropdown-item .pgn__dropdown-item__icon-before { + margin-inline-end: 0.5rem; + margin-left: -0.25em; +} +[dir=rtl] .pgn__dropdown-item .pgn__dropdown-item__icon-before { + margin-right: -0.25em; + margin-left: 0.5rem; +} +.pgn__dropdown-item .pgn__dropdown-item__icon-after { + margin-inline-start: 0.5rem; + margin-right: -0.25em; +} +[dir=rtl] .pgn__dropdown-item .pgn__dropdown-item__icon-after { + margin-right: 0.5rem; + margin-left: -0.25em; +} +.figure { + text-align: start; + display: inline-block; +} +.form-control { + display: block; + width: 100%; + height: var(--pgn-size-form-input-height-base); + padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base); + font-family: var(--pgn-typography-form-input-font-family); + font-size: var(--pgn-typography-form-input-font-size-base); + font-weight: var(--pgn-typography-form-input-font-weight); + line-height: var(--pgn-typography-form-input-line-height-base); + color: var(--pgn-color-form-input-base); + background-color: var(--pgn-color-form-input-bg-base); + background-clip: padding-box; + border: var(--pgn-size-form-input-width-border) solid var(--pgn-color-form-input-border); + transition: var(--pgn-transition-form-input); + box-shadow: var(--pgn-elevation-form-input-base); + border-radius: var(--pgn-size-form-input-radius-border-base); +} +.form-control::-ms-expand { + background-color: transparent; + border: 0; +} +.form-control:focus { + color: var(--pgn-color-form-input-focus-base); + background-color: var(--pgn-color-form-input-focus-bg); + border-color: var(--pgn-color-form-input-focus-border); + outline: 0; + box-shadow: var(--pgn-elevation-form-input-focus); +} +.form-control::placeholder { + color: var(--pgn-color-form-input-placeholder); + opacity: 1; +} +.form-control:disabled, .form-control[readonly] { + background-color: var(--pgn-color-form-input-bg-disabled); + opacity: 1; +} +input[type=date].form-control, +input[type=time].form-control, +input[type=datetime-local].form-control, +input[type=month].form-control { + appearance: none; +} +select.form-control:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 var(--pgn-color-form-input-base); +} +select.form-control:focus::-ms-value { + color: var(--pgn-color-form-input-base); + background-color: var(--pgn-color-form-input-bg-base); +} +.form-control-file, +.form-control-range { + display: block; + width: 100%; +} +.col-form-label { + padding-top: calc(var(--pgn-spacing-form-input-padding-y-base) + var(--pgn-size-form-input-width-border)); + padding-bottom: calc(var(--pgn-spacing-form-input-padding-y-base) + var(--pgn-size-form-input-width-border)); + margin-bottom: 0; + font-size: inherit; + line-height: var(--pgn-typography-form-input-line-height-base); +} +.col-form-label-lg { + padding-top: calc(var(--pgn-spacing-form-input-padding-y-lg) + var(--pgn-size-form-input-width-border)); + padding-bottom: calc(var(--pgn-spacing-form-input-padding-y-lg) + var(--pgn-size-form-input-width-border)); + font-size: var(--pgn-typography-form-input-font-size-lg); + line-height: var(--pgn-typography-form-input-line-height-lg); +} +.col-form-label-sm { + padding-top: calc(var(--pgn-spacing-form-input-padding-y-sm) + var(--pgn-size-form-input-width-border)); + padding-bottom: calc(var(--pgn-spacing-form-input-padding-y-sm) + var(--pgn-size-form-input-width-border)); + font-size: var(--pgn-typography-form-input-font-size-sm); + line-height: var(--pgn-typography-form-input-line-height-sm); +} +.form-control-plaintext { + display: block; + width: 100%; + padding: var(--pgn-spacing-form-input-padding-y-base) 0; + margin-bottom: 0; + font-size: var(--pgn-typography-form-input-font-size-base); + line-height: var(--pgn-typography-form-input-line-height-base); + color: var(--pgn-color-form-input-plaintext); + background-color: transparent; + border: solid transparent; + border-width: var(--pgn-size-form-input-width-border) 0; +} +.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { + padding-right: 0; + padding-left: 0; +} +.form-control-sm { + height: var(--pgn-size-form-input-height-sm); + padding: var(--pgn-spacing-form-input-padding-y-sm) var(--pgn-spacing-form-input-padding-x-sm); + font-size: var(--pgn-typography-form-input-font-size-sm); + line-height: var(--pgn-typography-form-input-line-height-sm); + border-radius: var(--pgn-size-form-input-radius-border-sm); +} +.form-control-lg { + height: var(--pgn-size-form-input-height-lg); + padding: var(--pgn-spacing-form-input-padding-y-lg) var(--pgn-spacing-form-input-padding-x-lg); + font-size: var(--pgn-typography-form-input-font-size-lg); + line-height: var(--pgn-typography-form-input-line-height-lg); + border-radius: var(--pgn-size-form-input-radius-border-lg); +} +select.form-control[size], select.form-control[multiple] { + height: auto; +} +textarea.form-control { + height: auto; +} +.form-group { + margin-bottom: var(--pgn-spacing-form-group-margin-bottom); +} +.form-text { + display: block; + margin-top: var(--pgn-spacing-form-text-margin-top); +} +.form-row { + display: flex; + flex-wrap: wrap; + margin-right: calc(-1 * var(--pgn-size-form-grid-gutter-width) * 0.5); + margin-left: calc(-1 * var(--pgn-size-form-grid-gutter-width) * 0.5); +} +.form-row > .col, +.form-row > [class*=col-] { + padding-right: calc(var(--pgn-size-form-grid-gutter-width) * 0.5); + padding-left: calc(var(--pgn-size-form-grid-gutter-width) * 0.5); +} +.form-check { + position: relative; + display: block; + padding-left: var(--pgn-spacing-form-input-check-gutter); +} +.form-check-input { + position: absolute; + margin-top: var(--pgn-spacing-form-input-check-margin-y); + margin-left: calc(-1 * var(--pgn-spacing-form-input-check-gutter)); +} +.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { + color: var(--pgn-color-text-muted); +} +.form-check-label { + margin-bottom: 0; +} +.form-check-inline { + display: inline-flex; + align-items: center; + padding-left: 0; + margin-right: var(--pgn-spacing-form-check-inline-margin-x); +} +.form-check-inline .form-check-input { + position: static; + margin-top: 0; + margin-right: var(--pgn-spacing-form-input-check-margin-x-inline); + margin-left: 0; +} +.valid-feedback { + display: none; + width: 100%; + margin-top: var(--pgn-spacing-form-control-select-feedback-margin-top); + font-size: var(--pgn-typography-form-feedback-font-size); + color: var(--pgn-color-form-feedback-valid); +} +.valid-tooltip { + position: absolute; + top: 100%; + left: 0; + z-index: 5; + display: none; + max-width: 100%; + padding: var(--pgn-spacing-form-control-select-feedback-tooltip-padding-y) var(--pgn-spacing-form-control-select-feedback-tooltip-padding-x); + margin-top: 0.1rem; + font-size: var(--pgn-typography-form-feedback-tooltip-font-size); + line-height: var(--pgn-typography-form-feedback-tooltip-line-height); + color: var(--pgn-color-form-feedback-tooltip-valid); + background-color: var(--pgn-color-form-feedback-tooltip-bg-valid); + border-radius: var(--pgn-size-form-feedback-tooltip-border-radius); +} +.form-row > .col > .valid-tooltip, .form-row > [class*=col-] > .valid-tooltip { + left: calc(var(--pgn-size-form-grid-gutter-width) * 0.5); +} +.was-validated :valid ~ .valid-feedback, +.was-validated :valid ~ .valid-tooltip, +.is-valid ~ .valid-feedback, +.is-valid ~ .valid-tooltip { + display: block; +} +.was-validated .form-control:valid, .form-control.is-valid { + border-color: var(--pgn-color-form-feedback-valid); +} +.was-validated .form-control:valid:focus, .form-control.is-valid:focus { + border-color: var(--pgn-color-form-feedback-valid); + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid); +} +.was-validated .custom-select:valid, .custom-select.is-valid { + border-color: var(--pgn-color-form-feedback-valid); +} +.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { + border-color: var(--pgn-color-form-feedback-valid); + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid); +} +.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { + color: var(--pgn-color-form-feedback-valid); +} +.was-validated .form-check-input:valid ~ .valid-feedback, +.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, +.form-check-input.is-valid ~ .valid-tooltip { + display: block; +} +.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { + color: var(--pgn-color-form-feedback-valid); +} +.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { + border-color: var(--pgn-color-form-feedback-valid); +} +.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { + border-color: var(--pgn-color-form-feedback-checked-valid); + background-color: var(--pgn-color-form-feedback-checked-valid); +} +.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid); +} +.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { + border-color: var(--pgn-color-form-feedback-valid); +} +.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { + border-color: var(--pgn-color-form-feedback-valid); +} +.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { + border-color: var(--pgn-color-form-feedback-valid); + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid); +} +.invalid-feedback { + display: none; + width: 100%; + margin-top: var(--pgn-spacing-form-control-select-feedback-margin-top); + font-size: var(--pgn-typography-form-feedback-font-size); + color: var(--pgn-color-form-feedback-invalid); +} +.invalid-tooltip { + position: absolute; + top: 100%; + left: 0; + z-index: 5; + display: none; + max-width: 100%; + padding: var(--pgn-spacing-form-control-select-feedback-tooltip-padding-y) var(--pgn-spacing-form-control-select-feedback-tooltip-padding-x); + margin-top: 0.1rem; + font-size: var(--pgn-typography-form-feedback-tooltip-font-size); + line-height: var(--pgn-typography-form-feedback-tooltip-line-height); + color: var(--pgn-color-form-feedback-tooltip-bg-invalid); + background-color: transparent; + border-radius: var(--pgn-size-form-feedback-tooltip-border-radius); +} +.form-row > .col > .invalid-tooltip, .form-row > [class*=col-] > .invalid-tooltip { + left: calc(var(--pgn-size-form-grid-gutter-width) * 0.5); +} +.was-validated :invalid ~ .invalid-feedback, +.was-validated :invalid ~ .invalid-tooltip, +.is-invalid ~ .invalid-feedback, +.is-invalid ~ .invalid-tooltip { + display: block; +} +.was-validated .form-control:invalid, .form-control.is-invalid { + border-color: var(--pgn-color-form-feedback-invalid); +} +.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { + border-color: var(--pgn-color-form-feedback-invalid); + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid); +} +.was-validated .custom-select:invalid, .custom-select.is-invalid { + border-color: var(--pgn-color-form-feedback-invalid); +} +.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { + border-color: var(--pgn-color-form-feedback-invalid); + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid); +} +.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { + color: var(--pgn-color-form-feedback-invalid); +} +.was-validated .form-check-input:invalid ~ .invalid-feedback, +.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, +.form-check-input.is-invalid ~ .invalid-tooltip { + display: block; +} +.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { + color: var(--pgn-color-form-feedback-invalid); +} +.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { + border-color: var(--pgn-color-form-feedback-invalid); +} +.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { + border-color: var(--pgn-color-form-feedback-checked-invalid); + background-color: var(--pgn-color-form-feedback-checked-invalid); +} +.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid); +} +.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { + border-color: var(--pgn-color-form-feedback-invalid); +} +.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { + border-color: var(--pgn-color-form-feedback-invalid); +} +.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { + border-color: var(--pgn-color-form-feedback-invalid); + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid); +} +.form-inline { + display: flex; + flex-flow: row wrap; + align-items: center; +} +.form-inline .form-check { + width: 100%; +} +@media (min-width: 576px) { + .form-inline label { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0; + } + .form-inline .form-group { + display: flex; + flex: 0 0 auto; + flex-flow: row wrap; + align-items: center; + margin-bottom: 0; + } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .form-inline .form-control-plaintext { + display: inline-block; + } + .form-inline .input-group, + .form-inline .custom-select { + width: auto; + } + .form-inline .form-check { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding-left: 0; + } + .form-inline .form-check-input { + position: relative; + flex-shrink: 0; + margin-top: 0; + margin-right: var(--pgn-spacing-form-input-check-margin-x-base); + margin-left: 0; + } + .form-inline .custom-control { + align-items: center; + justify-content: center; + } + .form-inline .custom-control-label { + margin-bottom: 0; + } +} +.input-group { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: stretch; + width: 100%; +} +.input-group > .form-control, +.input-group > .form-control-plaintext, +.input-group > .custom-select, +.input-group > .custom-file { + position: relative; + flex: 1 1 auto; + width: 1%; + min-width: 0; + margin-bottom: 0; +} +.input-group > .form-control + .form-control, +.input-group > .form-control + .custom-select, +.input-group > .form-control + .custom-file, +.input-group > .form-control-plaintext + .form-control, +.input-group > .form-control-plaintext + .custom-select, +.input-group > .form-control-plaintext + .custom-file, +.input-group > .custom-select + .form-control, +.input-group > .custom-select + .custom-select, +.input-group > .custom-select + .custom-file, +.input-group > .custom-file + .form-control, +.input-group > .custom-file + .custom-select, +.input-group > .custom-file + .custom-file { + margin-left: calc(var(--pgn-size-form-input-width-border) * -1); +} +.input-group > .form-control:focus, +.input-group > .custom-select:focus, +.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { + z-index: 3; +} +.input-group > .custom-file .custom-file-input:focus { + z-index: 4; +} +.input-group > .form-control:not(:first-child), +.input-group > .custom-select:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.input-group > .custom-file { + display: flex; + align-items: center; +} +.input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group > .custom-file:not(:first-child) .custom-file-label { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.input-group:not(.has-validation) > .form-control:not(:last-child), +.input-group:not(.has-validation) > .custom-select:not(:last-child), +.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label, +.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group.has-validation > .form-control:nth-last-child(n+3), +.input-group.has-validation > .custom-select:nth-last-child(n+3), +.input-group.has-validation > .custom-file:nth-last-child(n+3) .custom-file-label, +.input-group.has-validation > .custom-file:nth-last-child(n+3) .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group-prepend, +.input-group-append { + display: flex; +} +.input-group-prepend .btn, +.input-group-append .btn { + position: relative; + z-index: 2; +} +.input-group-prepend .btn:focus, +.input-group-append .btn:focus { + z-index: 3; +} +.input-group-prepend .btn + .btn, +.input-group-prepend .btn + .input-group-text, +.input-group-prepend .input-group-text + .input-group-text, +.input-group-prepend .input-group-text + .btn, +.input-group-append .btn + .btn, +.input-group-append .btn + .input-group-text, +.input-group-append .input-group-text + .input-group-text, +.input-group-append .input-group-text + .btn { + margin-left: calc(var(--pgn-size-form-input-width-border) * -1); +} +.input-group-prepend { + margin-right: calc(var(--pgn-size-form-input-width-border) * -1); +} +.input-group-append { + margin-left: calc(var(--pgn-size-form-input-width-border) * -1); +} +.input-group-text { + display: flex; + align-items: center; + padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base); + margin-bottom: 0; + font-weight: var(--pgn-typography-font-weight-normal); + line-height: var(--pgn-typography-form-input-line-height-base); + color: var(--pgn-color-form-input-group-addon-base); + text-align: center; + white-space: nowrap; + background-color: var(--pgn-color-form-input-group-addon-bg); + border: var(--pgn-size-form-input-width-border) solid var(--pgn-color-form-input-group-addon-border); + font-size: var(--pgn-typography-form-input-font-size-base); + border-radius: var(--pgn-size-form-input-radius-border-base); +} +.input-group-text input[type=radio], +.input-group-text input[type=checkbox] { + margin-top: 0; +} +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { + height: var(--pgn-size-form-input-height-lg); +} +.input-group-lg > .form-control, +.input-group-lg > .custom-select, +.input-group-lg > .input-group-prepend > .input-group-text, +.input-group-lg > .input-group-append > .input-group-text, +.input-group-lg > .input-group-prepend > .btn, +.input-group-lg > .input-group-append > .btn { + padding: var(--pgn-spacing-form-input-padding-y-lg) var(--pgn-spacing-form-input-padding-x-lg); + line-height: var(--pgn-typography-form-input-line-height-lg); + font-size: var(--pgn-typography-form-input-font-size-lg); + border-radius: var(--pgn-size-form-input-radius-border-lg); +} +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { + height: var(--pgn-size-form-input-height-sm); +} +.input-group-sm > .form-control, +.input-group-sm > .custom-select, +.input-group-sm > .input-group-prepend > .input-group-text, +.input-group-sm > .input-group-append > .input-group-text, +.input-group-sm > .input-group-prepend > .btn, +.input-group-sm > .input-group-append > .btn { + padding: var(--pgn-spacing-form-input-padding-y-sm) var(--pgn-spacing-form-input-padding-x-sm); + line-height: var(--pgn-typography-form-input-line-height-sm); + font-size: var(--pgn-typography-form-input-font-size-sm); + border-radius: var(--pgn-size-form-input-radius-border-sm); +} +.input-group-lg > .custom-select, +.input-group-sm > .custom-select { + padding-right: calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); +} +.input-group > .input-group-prepend > .btn, +.input-group > .input-group-prepend > .input-group-text, +.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, +.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, +.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn, +.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text, +.input-group > .input-group-append:last-child > .btn:not(:last-child, .dropdown-toggle), +.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group > .input-group-append > .btn, +.input-group > .input-group-append > .input-group-text, +.input-group > .input-group-prepend:not(:first-child) > .btn, +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, +.input-group > .input-group-prepend:first-child > .btn:not(:first-child), +.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.custom-control { + position: relative; + z-index: 1; + display: block; + min-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base)); + padding-left: calc(var(--pgn-spacing-form-control-gutter) + var(--pgn-size-form-control-indicator-base)); + print-color-adjust: exact; +} +.custom-control-inline { + display: inline-flex; + margin-right: var(--pgn-spacing-form-control-spacer-x); +} +.custom-control-input { + position: absolute; + left: 0; + z-index: -1; + width: var(--pgn-size-form-control-indicator-base); + height: calc((var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + var(--pgn-size-form-control-indicator-base)) * 0.5); + opacity: 0; +} +.custom-control-input:checked ~ .custom-control-label::before { + color: var(--pgn-color-form-control-indicator-checked-base); + border-color: var(--pgn-color-form-control-indicator-checked-border-base); + box-shadow: var(--pgn-elevation-form-control-indicator-checked-base); + background-color: var(--pgn-color-form-control-indicator-checked-bg-base); +} +.custom-control-input:focus ~ .custom-control-label::before { + box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus); +} +.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { + border-color: var(--pgn-color-form-control-indicator-checked-border-focus); +} +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + color: var(--pgn-color-form-control-indicator-active-base); + background-color: var(--pgn-color-form-control-indicator-active-bg); + border-color: var(--pgn-color-form-control-indicator-active-border); + box-shadow: var(--pgn-elevation-form-control-indicator-active); +} +.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label { + color: var(--pgn-color-form-control-label-disabled); +} +.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before { + background-color: var(--pgn-color-form-control-indicator-bg-disabled); +} +.custom-control-label { + position: relative; + margin-bottom: 0; + color: var(--pgn-color-form-control-label-base); + vertical-align: top; + cursor: var(--pgn-other-form-control-cursor); +} +.custom-control-label::before { + content: ""; + position: absolute; + top: calc((var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) - var(--pgn-size-form-control-indicator-base)) * 0.5); + left: -var(--pgn-spacing-form-control-gutter)var(--pgn-size-form-control-indicator-base); + display: block; + width: var(--pgn-size-form-control-indicator-base); + height: var(--pgn-size-form-control-indicator-base); + pointer-events: none; + background-color: var(--pgn-color-form-control-indicator-bg-base); + border: var(--pgn-size-form-control-indicator-border-width) solid var(--pgn-color-form-control-indicator-border); + box-shadow: var(--pgn-elevation-form-control-indicator-base); +} +.custom-control-label::after { + content: ""; + position: absolute; + top: calc((var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) - var(--pgn-size-form-control-indicator-base)) * 0.5); + left: calc((var(--pgn-spacing-form-control-gutter) + var(--pgn-size-form-control-indicator-base)) * -1); + display: block; + width: var(--pgn-size-form-control-indicator-base); + height: var(--pgn-size-form-control-indicator-base); + background: 50%/var(--pgn-size-form-control-indicator-bg) no-repeat; +} +.custom-checkbox .custom-control-label::before { + border-radius: var(--pgn-size-form-control-border-checkbox-indicator-radius); +} +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { + background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base); +} +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { + border-color: var(--pgn-color-form-control-checkbox-indicator-indeterminate-border); + box-shadow: var(--pgn-elevation-form-control-checkbox-indicator-indeterminate); + background-color: var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg); +} +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { + background-image: var(--pgn-other-content-form-control-checkbox-indicator-indeterminate-icon); +} +.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: var(--pgn-color-form-control-indicator-checked-bg-disabled); +} +.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { + background-color: var(--pgn-color-form-control-indicator-checked-bg-disabled); +} +.custom-radio .custom-control-label::before { + border-radius: var(--pgn-size-form-control-border-radio-indicator-radius); +} +.custom-radio .custom-control-input:checked ~ .custom-control-label::after { + background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-base); +} +.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: var(--pgn-color-form-control-indicator-checked-bg-disabled); +} +.custom-switch { + padding-left: calc(var(--pgn-size-form-control-switch-width) + var(--pgn-spacing-form-control-gutter)); +} +.custom-switch .custom-control-label::before { + left: calc(-1 * (var(--pgn-size-form-control-switch-width) + var(--pgn-spacing-form-control-gutter))); + width: var(--pgn-size-form-control-switch-width); + pointer-events: all; + border-radius: var(--pgn-size-form-control-switch-indicator-border-radius); +} +.custom-switch .custom-control-label::after { + top: calc((var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) - var(--pgn-size-form-control-indicator-base)) * 0.5 + var(--pgn-size-form-control-indicator-border-width) * 2); + left: calc(-1 * (var(--pgn-size-form-control-switch-width) + var(--pgn-spacing-form-control-gutter)) + var(--pgn-size-form-control-indicator-border-width) * 2); + width: var(--pgn-size-form-control-switch-indicator-base); + height: var(--pgn-size-form-control-switch-indicator-base); + background-color: var(--pgn-color-form-control-indicator-border); + border-radius: var(--pgn-size-form-control-switch-indicator-border-radius); + transition: transform 0.15s ease-in-out, var(--pgn-transition-form-control); +} +.custom-switch .custom-control-input:checked ~ .custom-control-label::after { + background-color: var(--pgn-color-form-control-indicator-bg-base); + transform: translateX(calc(var(--pgn-size-form-control-switch-width) - var(--pgn-size-form-control-indicator-base))); +} +.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: var(--pgn-color-form-control-indicator-checked-bg-disabled); +} +.custom-select { + display: inline-block; + width: 100%; + height: var(--pgn-size-form-control-select-height-base); + padding: var(--pgn-spacing-form-control-select-padding-y-base) var(--pgn-spacing-form-control-select-padding-x-base)var(--pgn-spacing-form-control-select-indicator-padding) var(--pgn-spacing-form-control-select-padding-y-base) var(--pgn-spacing-form-control-select-padding-x-base); + font-family: var(--pgn-typography-form-control-select-font-family); + font-weight: var(--pgn-typography-form-control-select-font-weight); + line-height: var(--pgn-typography-form-control-select-line-height); + color: var(--pgn-color-form-control-select-base); + vertical-align: middle; + background: var(--pgn-color-form-control-select-bg-base) var(--pgn-other-content-form-control-select-bg); + border: var(--pgn-size-form-control-select-border-width-base) solid var(--pgn-color-form-control-select-border-base); + appearance: none; + box-shadow: var(--pgn-elevation-form-control-select-border-base); + font-size: var(--pgn-typography-form-control-select-font-size-base); + border-radius: var(--pgn-size-form-control-select-border-radius); +} +.custom-select:focus { + border-color: var(--pgn-color-form-control-select-border-focus); + outline: 0; + box-shadow: var(--pgn-elevation-form-control-select-border-focus); +} +.custom-select:focus::-ms-value { + color: var(--pgn-color-form-input-base); + background-color: var(--pgn-color-form-input-bg-base); +} +.custom-select[multiple], .custom-select[size]:not([size="1"]) { + height: auto; + padding-right: var(--pgn-spacing-form-control-select-padding-x-base); + background-image: none; +} +.custom-select:disabled { + color: var(--pgn-color-form-control-select-disabled); + background-color: var(--pgn-color-form-control-select-bg-disabled); +} +.custom-select::-ms-expand { + display: none; +} +.custom-select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 var(--pgn-color-form-control-select-base); +} +.custom-select-sm { + height: var(--pgn-size-form-control-select-height-sm); + padding-top: var(--pgn-spacing-form-control-select-padding-y-sm); + padding-bottom: var(--pgn-spacing-form-control-select-padding-y-sm); + padding-left: var(--pgn-spacing-form-control-select-padding-x-sm); + font-size: var(--pgn-typography-form-control-select-font-size-sm); +} +.custom-select-lg { + height: var(--pgn-size-form-control-select-height-lg); + padding-top: var(--pgn-spacing-form-control-select-padding-y-lg); + padding-bottom: var(--pgn-spacing-form-control-select-padding-y-lg); + padding-left: var(--pgn-spacing-form-control-select-padding-x-lg); + font-size: var(--pgn-typography-form-control-select-font-size-lg); +} +.custom-file { + position: relative; + display: inline-block; + width: 100%; + height: var(--pgn-size-form-control-file-height-base); + margin-bottom: 0; +} +.custom-file-input { + position: relative; + z-index: 2; + width: 100%; + height: var(--pgn-size-form-control-file-height-base); + margin: 0; + overflow: hidden; + opacity: 0; +} +.custom-file-input:focus ~ .custom-file-label { + border-color: var(--pgn-color-form-control-file-border-focus); + box-shadow: var(--pgn-elevation-form-control-file-focus); +} +.custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label { + background-color: var(--pgn-color-form-control-file-bg-disabled); +} +.custom-file-input:lang(--pgn-other-form-control-custom-file-lang) ~ .custom-file-label::after { + content: var(--pgn-other-form-control-custom-file-content); +} +.custom-file-input ~ .custom-file-label[data-browse]::after { + content: attr(data-browse); +} +.custom-file-label { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 1; + height: var(--pgn-size-form-control-file-height-base); + padding: var(--pgn-spacing-form-control-file-padding-y) var(--pgn-spacing-form-control-file-padding-x); + overflow: hidden; + font-family: var(--pgn-typography-form-control-file-font-family); + font-weight: var(--pgn-typography-form-control-file-font-weight); + line-height: var(--pgn-typography-form-control-file-line-height); + color: var(--pgn-color-form-control-file-base); + background-color: var(--pgn-color-form-control-file-bg-base); + border: var(--pgn-size-form-control-file-width) solid var(--pgn-color-form-control-file-border-base); + box-shadow: var(--pgn-elevation-form-control-file-base); + border-radius: var(--pgn-size-form-control-file-border-radius); +} +.custom-file-label::after { + content: "Browse"; + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 3; + display: block; + height: var(--pgn-size-form-control-file-height-inner); + padding: var(--pgn-spacing-form-control-file-padding-y) var(--pgn-spacing-form-control-file-padding-x); + line-height: var(--pgn-typography-form-control-file-line-height); + color: var(--pgn-color-form-control-file-button-base); + border-left: inherit; + background-color: var(--pgn-color-form-control-file-button-bg); + border-radius: 0 var(--pgn-size-form-control-file-border-radius) var(--pgn-size-form-control-file-border-radius) 0; +} +.custom-range { + width: 100%; + height: calc(var(--pgn-size-form-control-range-thumb-height) + var(--pgn-size-form-control-range-thumb-focus-width) * 2); + padding: 0; + background-color: transparent; + appearance: none; +} +.custom-range:focus { + outline: 0; +} +.custom-range:focus::-webkit-slider-thumb { + box-shadow: var(--pgn-elevation-form-control-range-thumb-focus); +} +.custom-range:focus::-moz-range-thumb { + box-shadow: var(--pgn-elevation-form-control-range-thumb-focus); +} +.custom-range:focus::-ms-thumb { + box-shadow: var(--pgn-elevation-form-control-range-thumb-focus); +} +.custom-range::-moz-focus-outer { + border: 0; +} +.custom-range::-webkit-slider-thumb { + width: var(--pgn-size-form-control-range-thumb-width); + height: var(--pgn-size-form-control-range-thumb-height); + margin-top: calc((var(--pgn-size-form-control-range-track-height) - var(--pgn-size-form-control-range-thumb-height)) * 0.5); + border: var(--pgn-size-form-control-range-thumb-border-base); + appearance: none; + transition: var(--pgn-transition-form-control); + box-shadow: var(--pgn-elevation-form-control-range-thumb-base); + background-color: var(--pgn-color-form-control-range-thumb-bg-base); + border-radius: var(--pgn-size-form-control-range-thumb-border-radius); +} +.custom-range::-webkit-slider-thumb:active { + background-color: var(--pgn-color-form-control-range-thumb-bg-active); +} +.custom-range::-webkit-slider-runnable-track { + width: var(--pgn-size-form-control-range-track-width); + height: var(--pgn-size-form-control-range-track-height); + color: transparent; + cursor: var(--pgn-other-form-control-range-track-cursor); + background-color: var(--pgn-color-form-control-range-track-bg); + border-color: transparent; + box-shadow: var(--pgn-elevation-form-control-range-track); + border-radius: var(--pgn-size-form-control-range-track-border-radius); +} +.custom-range::-moz-range-thumb { + width: var(--pgn-size-form-control-range-thumb-width); + height: var(--pgn-size-form-control-range-thumb-height); + border: var(--pgn-size-form-control-range-thumb-border-base); + appearance: none; + transition: var(--pgn-transition-form-control); + box-shadow: var(--pgn-elevation-form-control-range-thumb-base); + background-color: var(--pgn-color-form-control-range-thumb-bg-base); + border-radius: var(--pgn-size-form-control-range-thumb-border-radius); +} +.custom-range::-moz-range-thumb:active { + background-color: var(--pgn-color-form-control-range-thumb-bg-active); +} +.custom-range::-moz-range-track { + width: var(--pgn-size-form-control-range-track-width); + height: var(--pgn-size-form-control-range-track-height); + color: transparent; + cursor: var(--pgn-other-form-control-range-track-cursor); + background-color: var(--pgn-color-form-control-range-track-bg); + border-color: transparent; + box-shadow: var(--pgn-elevation-form-control-range-track); + border-radius: var(--pgn-size-form-control-range-track-border-radius); +} +.custom-range::-ms-thumb { + width: var(--pgn-size-form-control-range-thumb-width); + height: var(--pgn-size-form-control-range-thumb-height); + margin-top: 0; + margin-right: var(--pgn-size-form-control-range-thumb-focus-width); + margin-left: var(--pgn-size-form-control-range-thumb-focus-width); + border: var(--pgn-size-form-control-range-thumb-border-base); + appearance: none; + transition: var(--pgn-transition-form-control); + box-shadow: var(--pgn-elevation-form-control-range-thumb-base); + background-color: var(--pgn-color-form-control-range-thumb-bg-base); + border-radius: var(--pgn-size-form-control-range-thumb-border-radius); +} +.custom-range::-ms-thumb:active { + background-color: var(--pgn-color-form-control-range-thumb-bg-active); +} +.custom-range::-ms-track { + width: var(--pgn-size-form-control-range-track-width); + height: var(--pgn-size-form-control-range-track-height); + color: transparent; + cursor: var(--pgn-other-form-control-range-track-cursor); + background-color: transparent; + border-color: transparent; + border-width: calc(var(--pgn-size-form-control-range-thumb-height) * 0.5); + box-shadow: var(--pgn-elevation-form-control-range-track); +} +.custom-range::-ms-fill-lower { + background-color: var(--pgn-color-form-control-range-track-bg); + border-radius: var(--pgn-size-form-control-range-track-border-radius); +} +.custom-range::-ms-fill-upper { + margin-right: 15px; + background-color: var(--pgn-color-form-control-range-track-bg); + border-radius: var(--pgn-size-form-control-range-track-border-radius); +} +.custom-range:disabled::-webkit-slider-thumb { + background-color: var(--pgn-color-form-control-range-thumb-bg-disabled); +} +.custom-range:disabled::-webkit-slider-runnable-track { + cursor: default; +} +.custom-range:disabled::-moz-range-thumb { + background-color: var(--pgn-color-form-control-range-thumb-bg-disabled); +} +.custom-range:disabled::-moz-range-track { + cursor: default; +} +.custom-range:disabled::-ms-thumb { + background-color: var(--pgn-color-form-control-range-thumb-bg-disabled); +} +.custom-control-label::before, +.custom-file-label, +.custom-select { + transition: var(--pgn-transition-form-control); +} +.pgn__form-text { + font-size: var(--pgn-typography-font-size-sm); + display: flex; + align-items: center; +} +.pgn__form-text .pgn__icon { + height: 1em; + margin-inline-end: 0.25em; + width: 1em; + display: inline-block; +} +.pgn__form-text ~ .pgn__form-text { + margin-top: 0.25rem; +} +.form-control + .pgn__form-text, .pgn__form-control-set + .pgn__form-text, .pgn__form-control-decorator-group + .pgn__form-text { + margin-top: 0.25rem; +} +.pgn__form-text-default { + color: var(--pgn-color-text-muted); +} +.pgn__form-text-valid { + color: var(--pgn-color-form-feedback-valid); +} +.pgn__form-text-invalid { + color: var(--pgn-color-form-feedback-invalid); +} +.pgn__form-text-warning { + color: var(--pgn-color-gray-900); +} +.pgn__form-text-criteria-empty .pgn__icon { + color: var(--pgn-color-text-muted); +} +.pgn__form-text-criteria-valid .pgn__icon { + color: var(--pgn-color-form-feedback-valid); +} +.pgn__form-text-criteria-invalid .pgn__icon { + color: var(--pgn-color-form-feedback-invalid); +} +.pgn__form-control-set { + display: flex; + align-items: flex-start; + flex-direction: column; +} +.pgn__form-control-set > * + * { + margin: 0.75rem 0 0; +} +.pgn__form-control-set-inline { + flex-flow: row wrap; + align-items: flex-start; +} +.pgn__form-control-set-inline > * + * { + margin: 0 0 0 0.5em; +} +[dir=rtl] .pgn__form-control-set-inline > * { + margin-left: 0.5em; +} +.form-control.is-invalid.is-invalid-nodanger { + border-color: var(--pgn-color-form-input-border); +} +.form-control.is-invalid.is-invalid-nodanger:focus { + color: var(--pgn-color-form-input-focus-base); + background-color: var(--pgn-color-form-input-focus-bg); + border-color: var(--pgn-color-form-input-focus-border); + outline: 0; + box-shadow: var(--pgn-elevation-form-input-focus); +} +.form-control:hover { + border: solid var(--pgn-size-form-input-width-hover) var(--pgn-color-dark-700); +} +.pgn__form-group { + margin-bottom: var(--pgn-spacing-form-group-margin-bottom); + text-align: start; +} +[dir=rtl] .pgn__form-group .form-check { + padding-left: 0; + padding-right: 1.25rem; +} +[dir=rtl] .pgn__form-group .form-check .form-check-input { + margin-left: 0; + margin-right: -1.25rem; +} +.pgn__form-control-decorator-group { + position: relative; + display: flex; + flex-grow: 1; + align-items: flex-start; + font-size: var(--pgn-typography-form-input-font-size-base); + line-height: var(--pgn-typography-form-input-line-height-base); +} +.pgn__form-control-decorator-group textarea.form-control { + min-height: var(--pgn-size-form-input-height-base); +} +.pgn__form-control-decorator-group textarea.form-control-lg { + min-height: var(--pgn-size-form-input-height-lg); +} +.pgn__form-control-decorator-group textarea.form-control-sm { + min-height: var(--pgn-size-form-input-height-sm); +} +@media (min-width: 576px) { + .pgn__form-control-decorator-group { + margin-inline-end: var(--pgn-spacing-form-control-gutter); + } +} +@media (--pgn-size-breakpoint-min-width-sm) { + .pgn__form-control-decorator-group { + margin-inline-end: var(--pgn-spacing-form-control-gutter); + } +} +.pgn__form-control-decorator-group.has-prepended-node .form-control { + padding-inline-start: calc(var(--pgn-spacing-form-input-padding-x-base) + var(--pgn-size-form-control-icon-width)); +} +[dir=rtl] .pgn__form-control-decorator-group.has-prepended-node .form-control { + background-position: left var(--pgn-spacing-form-control-select-icon-padding) center; +} +.pgn__form-control-decorator-group.has-prepended-node .form-control-lg { + padding-inline-start: calc(var(--pgn-spacing-form-input-padding-x-lg) + var(--pgn-size-form-control-icon-width)); +} +.pgn__form-control-decorator-group.has-prepended-node .form-control-sm { + padding-inline-start: calc(var(--pgn-spacing-form-input-padding-x-sm) + var(--pgn-size-form-control-icon-width)); +} +.pgn__form-control-decorator-group.has-appended-node .form-control { + padding-inline-end: calc(var(--pgn-spacing-form-input-padding-x-base) + var(--pgn-size-form-control-icon-width)); +} +.pgn__form-control-decorator-group.has-appended-node .form-control-lg { + padding-inline-end: calc(var(--pgn-spacing-form-input-padding-x-lg) + var(--pgn-size-form-control-icon-width)); +} +.pgn__form-control-decorator-group.has-appended-node .form-control-sm { + padding-inline-end: calc(var(--pgn-spacing-form-input-padding-x-sm) + var(--pgn-size-form-control-icon-width)); +} +.pgn__form-control-decorator-group.pgn__form-control-decorator-group-sm { + font-size: var(--pgn-typography-form-input-font-size-sm); + line-height: var(--pgn-typography-form-input-line-height-sm); +} +.pgn__form-control-decorator-group.pgn__form-control-decorator-group-lg { + font-size: var(--pgn-typography-form-input-font-size-lg); + line-height: var(--pgn-typography-form-input-line-height-lg); +} +.pgn__form-control-decorator { + position: absolute; + pointer-events: none; + height: var(--pgn-size-form-input-height-base); + min-width: var(--pgn-size-form-input-height-base); + line-height: inherit; + display: flex; + justify-content: center; + align-items: center; + font-size: inherit; +} +.pgn__form-control-decorator button { + pointer-events: initial; +} +.pgn__form-control-decorator.pgn__form-control-decorator-leading { + inset-inline-start: 0; + padding-inline-start: var(--pgn-spacing-form-input-padding-x-base); + padding-inline-end: calc(var(--pgn-spacing-form-input-padding-x-base) / 2); +} +.pgn__form-control-decorator.pgn__form-control-decorator-trailing { + inset-inline-end: 0; + padding-inline-start: calc(var(--pgn-spacing-form-input-padding-x-base) / 2); + padding-inline-end: calc(var(--pgn-spacing-form-input-padding-y-sm) - 2 * var(--pgn-size-form-input-width-border)); +} +.pgn__form-control-decorator-group-lg .pgn__form-control-decorator { + height: var(--pgn-size-form-input-height-lg); + min-width: var(--pgn-size-form-input-height-lg); +} +.pgn__form-control-decorator-group-lg .pgn__form-control-decorator.pgn__form-control-decorator-leading { + padding-left: var(--pgn-spacing-form-input-padding-x-lg); + padding-right: calc(var(--pgn-spacing-form-input-padding-x-lg) / 2); +} +.pgn__form-control-decorator-group-lg .pgn__form-control-decorator.pgn__form-control-decorator-trailing { + padding-left: calc(var(--pgn-spacing-form-input-padding-x-lg) / 2); + padding-right: calc(var(--pgn-spacing-form-input-padding-y-base) - 2 * var(--pgn-size-form-input-width-border)); +} +.pgn__form-control-decorator-group-sm .pgn__form-control-decorator { + height: var(--pgn-size-form-input-height-sm); + min-width: var(--pgn-size-form-input-height-lg); +} +.pgn__form-control-decorator-group-sm .pgn__form-control-decorator.pgn__form-control-decorator-leading { + padding-left: var(--pgn-spacing-form-input-padding-x-sm); + padding-right: calc(var(--pgn-spacing-form-input-padding-x-sm) / 2); +} +.pgn__form-control-decorator-group-sm .pgn__form-control-decorator.pgn__form-control-decorator-trailing { + padding-left: calc(var(--pgn-spacing-form-input-padding-x-sm) / 2); + padding-right: calc(var(--pgn-spacing-form-input-padding-y-sm) - 2 * var(--pgn-size-form-input-width-border)); +} +.pgn__form-control-decorator .btn-icon { + color: var(--pgn-color-gray-500) !important; +} +.pgn__form-control-decorator .btn-icon:hover { + background-color: var(--pgn-color-gray-500) !important; + color: var(--pgn-color-white) !important; +} +.pgn__form-control-decorator .btn-icon:focus { + background-color: var(--pgn-color-white) !important; + color: var(--pgn-color-gray-500) !important; + box-shadow: inset 0 0 0 2px var(--pgn-color-gray-500) !important; +} +.pgn__form-control-floating-label { + position: absolute; + inset-inline-start: var(--pgn-size-form-input-width-border); + inset-inline-end: 0; + display: flex; + width: 100%; + height: 100%; + pointer-events: none; + padding: 0 var(--pgn-spacing-form-input-padding-x-base); +} +.pgn__form-control-floating-label .pgn__form-control-floating-label-content { + border-top: solid 2px transparent; + position: relative; + inset-inline-start: -0.5em; + max-width: 100%; + padding-top: var(--pgn-spacing-form-input-padding-y-base); + line-height: var(--pgn-typography-form-input-line-height-base); + font-size: var(--pgn-typography-form-input-font-size-base); +} +.pgn__form-control-floating-label .pgn__form-control-floating-label-text { + transform-origin: left top; + padding: 0 0.5em; + transition: transform 150ms ease, background-color 150ms linear; + background-color: var(--pgn-color-form-control-label-floating-text); + white-space: nowrap; + max-width: 75vw; + display: block; + overflow: hidden; + text-overflow: ellipsis; +} +[dir=rtl] .pgn__form-control-floating-label .pgn__form-control-floating-label-text { + transform-origin: right top; +} +.has-leading-element .pgn__form-control-floating-label .pgn__form-control-floating-label-text { + transform: translateX(var(--pgn-size-form-control-icon-width)); +} +[dir=rtl] .has-leading-element .pgn__form-control-floating-label .pgn__form-control-floating-label-text { + transform: translateX(calc(-1 * var(--pgn-size-form-control-icon-width))); +} +.pgn__form-control-decorator-group-lg .pgn__form-control-floating-label { + padding: 0 var(--pgn-spacing-form-input-padding-x-lg); +} +.pgn__form-control-decorator-group-lg .pgn__form-control-floating-label .pgn__form-control-floating-label-content { + padding-top: var(--pgn-spacing-form-input-padding-y-lg); + line-height: var(--pgn-typography-form-input-line-height-lg); + font-size: var(--pgn-typography-form-input-font-size-lg); +} +.pgn__form-control-decorator-group-sm .pgn__form-control-floating-label { + padding: 0 var(--pgn-spacing-form-input-padding-x-sm); +} +.pgn__form-control-decorator-group-sm .pgn__form-control-floating-label .pgn__form-control-floating-label-content { + padding-top: var(--pgn-spacing-form-input-padding-y-sm); + line-height: var(--pgn-typography-form-input-line-height-sm); + font-size: var(--pgn-typography-form-input-font-size-sm); +} +.form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text, .form-control.has-value ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text, .form-control:is(:-webkit-autofill, :autofill) ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text { + background-color: var(--pgn-color-form-input-bg-base); + transform: translateY(calc(var(--pgn-spacing-form-input-padding-y-base) * -1)) scale(0.75) translateY(calc((var(--pgn-typography-form-input-line-height-base) - (var(--pgn-typography-form-input-line-height-base) - 0.8) / 2) / var(--pgn-typography-form-input-line-height-base) * 100% * -1)); +} +.float-label.pgn__form-control-decorator-group-lg .pgn__form-control-floating-label .pgn__form-control-floating-label-text { + transform: translateY(calc(var(--pgn-spacing-form-input-padding-y-lg) * -1)) scale(0.75) translateY(calc((var(--pgn-typography-form-input-line-height-lg) - (var(--pgn-typography-form-input-line-height-lg) - 0.8) / 2) / var(--pgn-typography-form-input-line-height-lg) * 100% * -1)); +} +.float-label.pgn__form-control-decorator-group-sm .pgn__form-control-floating-label .pgn__form-control-floating-label-text { + transform: translateY(calc(var(--pgn-spacing-form-input-padding-y-sm) * -1)) scale(0.75) translateY(calc((var(--pgn-typography-form-input-line-height-sm) - (var(--pgn-typography-form-input-line-height-sm) - 0.8) / 2) / var(--pgn-typography-form-input-line-height-sm) * 100% * -1)); +} +[dir=rtl] .pgn__form-control-decorator-group.has-floating-label input[type=date], +[dir=rtl] .pgn__form-control-decorator-group.has-floating-label input[type=time] { + text-align: right; +} +.pgn__form-control-decorator-group.has-floating-label input[type=date]:not(:focus, .has-value), +.pgn__form-control-decorator-group.has-floating-label input[type=time]:not(:focus, .has-value) { + color: transparent; +} +[dir=rtl] .pgn__form-control-decorator-group.has-floating-label input[type=date]::-webkit-calendar-picker-indicator, +[dir=rtl] .pgn__form-control-decorator-group.has-floating-label input[type=time]::-webkit-calendar-picker-indicator { + position: absolute; + left: 0; +} +.pgn__form-control-decorator-group.has-floating-label .form-control:not(:focus, .has-value)::placeholder, .pgn__form-control-decorator-group.has-floating-label .form-control:not(:focus, .has-value)::-webkit-datetime-edit { + opacity: 0; +} +.pgn__form-control-decorator-group.has-floating-label select.form-control:not(.has-value, :focus) { + color: rgba(0,0,0,0); +} +select.form-control { + padding-inline-end: calc(var(--pgn-spacing-form-control-select-icon-padding) + 2rem); + background-image: var(--pgn-other-content-form-control-select-indicator-icon); + background-position: right var(--pgn-spacing-form-control-select-icon-padding) center; + background-repeat: no-repeat; + background-size: 24px 24px; + appearance: none; +} +[dir=rtl] select.form-control { + background-position: left var(--pgn-spacing-form-control-select-icon-padding) center; +} +.pgn__form-label { + font-size: var(--pgn-typography-form-input-font-size-base); + display: inline-block; + margin-bottom: 0.5rem; +} +.pgn__form-label.pgn__form-label-inline { + display: inline-block; + margin: 0 1em 0 0; +} +[dir=rtl] .pgn__form-label.pgn__form-label-inline { + margin: 0 0 0 1em; +} +.pgn__form-label.pgn__form-label-lg { + font-size: var(--pgn-typography-form-input-font-size-lg); +} +.pgn__form-label.pgn__form-label-sm { + font-size: var(--pgn-typography-form-input-font-size-sm); +} +.pgn__form-checkbox-input, +.pgn__form-radio-input, +.pgn__form-switch-input { + appearance: none; + height: var(--pgn-size-form-control-indicator-base); + width: var(--pgn-size-form-control-indicator-base); + min-width: var(--pgn-size-form-control-indicator-base); + background-color: var(--pgn-color-form-control-indicator-bg-base); + border: solid var(--pgn-size-form-control-indicator-border-width) var(--pgn-color-form-control-indicator-border); + margin-inline-end: var(--pgn-spacing-form-control-gutter); + background-position: center; +} +.pgn__form-checkbox-input:not(:disabled), +.pgn__form-radio-input:not(:disabled), +.pgn__form-switch-input:not(:disabled) { + cursor: pointer; +} +.pgn__form-checkbox-input:not(:disabled):hover, +.pgn__form-radio-input:not(:disabled):hover, +.pgn__form-switch-input:not(:disabled):hover { + box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus); +} +.pgn__form-checkbox-input:disabled, +.pgn__form-radio-input:disabled, +.pgn__form-switch-input:disabled { + opacity: 0.3; +} +.pgn__form-checkbox-input:checked, +.pgn__form-radio-input:checked, +.pgn__form-switch-input:checked { + border-color: var(--pgn-color-form-control-indicator-checked-border-base); +} +.pgn__form-checkbox-input { + border-radius: var(--pgn-size-form-control-border-checkbox-indicator-radius); +} +.pgn__form-checkbox-input:checked { + background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base); +} +.pgn__form-checkbox-input:indeterminate { + background-image: var(--pgn-other-content-form-control-checkbox-indicator-indeterminate-icon); +} +.pgn__form-checkbox-input:focus, +.pgn__form-radio-input:focus { + position: relative; + outline: none; + box-shadow: none; + text-decoration: none; + border-color: var(--pgn-color-form-input-focus-border); +} +.pgn__form-checkbox-input:focus::before, +.pgn__form-radio-input:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-form-check-position-axis) * -1); + right: calc(var(--pgn-spacing-form-check-position-axis) * -1); + bottom: calc(var(--pgn-spacing-form-check-position-axis) * -1); + left: calc(var(--pgn-spacing-form-check-position-axis) * -1); + border: var(--pgn-size-form-border-radius-width) solid var(--pgn-color-form-input-focus-border); + border-radius: var(--pgn-size-form-border-radius-check-focus); +} +.pgn__form-switch-input { + width: var(--pgn-size-form-control-switch-width); + min-width: var(--pgn-size-form-control-switch-width); + border-radius: var(--pgn-size-form-control-switch-indicator-border-radius); + background-image: var(--pgn-other-content-form-control-switch-indicator-icon-off); + background-position: left center; + background-repeat: no-repeat; + transition: background 150ms ease; +} +.pgn__form-switch-input:checked { + background-position: right center; + background-color: var(--pgn-color-form-control-switch-indicator-checked-bg); + background-image: var(--pgn-other-content-form-control-switch-indicator-icon-on); +} +.pgn__form-switch-input:indeterminate { + background-position: center; + background-image: var(--pgn-other-content-form-control-switch-indicator-icon-off); +} +.pgn__form-switch-helper-text { + color: var(--pgn-color-gray-500); + font-size: var(--pgn-typography-font-size-xs); + margin-top: 0.25rem; +} +.pgn__form-radio-input { + border-radius: var(--pgn-size-form-control-border-radio-indicator-radius); +} +.pgn__form-radio-input:checked { + background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-base); +} +.pgn__form-radio-input:focus { + border-color: var(--pgn-color-black); +} +.pgn__form-radio-input:focus::before { + border-radius: var(--pgn-size-form-control-border-radio-indicator-radius); +} +.pgn__form-checkbox, +.pgn__form-switch, +.pgn__form-radio { + display: inline-flex; +} +.pgn__form-checkbox .pgn__form-label, +.pgn__form-switch .pgn__form-label, +.pgn__form-radio .pgn__form-label { + display: flex; + align-items: center; + margin-bottom: 0; + line-height: var(--pgn-size-form-control-indicator-base); +} +.pgn__form-checkbox input:disabled ~ *, +.pgn__form-switch input:disabled ~ *, +.pgn__form-radio input:disabled ~ * { + opacity: 0.3; +} +.pgn__form-checkbox.pgn__form-control-invalid input, +.pgn__form-switch.pgn__form-control-invalid input, +.pgn__form-radio.pgn__form-control-invalid input { + border-color: var(--pgn-color-form-feedback-invalid); +} +.pgn__form-checkbox.pgn__form-control-valid input, +.pgn__form-switch.pgn__form-control-valid input, +.pgn__form-radio.pgn__form-control-valid input { + border-color: var(--pgn-color-form-feedback-valid); +} +.pgn__form-checkbox.pgn__form-control-label-left .pgn__form-label, +.pgn__form-switch.pgn__form-control-label-left .pgn__form-label, +.pgn__form-radio.pgn__form-control-label-left .pgn__form-label { + order: 1; + margin-inline-end: var(--pgn-spacing-form-control-gutter); +} +.pgn__form-checkbox.pgn__form-control-label-left input, +.pgn__form-switch.pgn__form-control-label-left input, +.pgn__form-radio.pgn__form-control-label-left input { + order: 2; +} +.pgn__form-checkbox.pgn__form-control-invalid input:checked { + background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid); +} +.pgn__form-checkbox.pgn__form-control-valid input:checked { + background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-valid); +} +.pgn__form-radio.pgn__form-control-invalid input:checked { + background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-invalid); +} +.pgn__form-radio.pgn__form-control-valid input:checked { + background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-valid); +} +[dir=rtl] .input-group > .input-group-prepend > .btn, +[dir=rtl] .input-group > .input-group-prepend > .input-group-text, +[dir=rtl] .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, +[dir=rtl] .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, +[dir=rtl] .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn, +[dir=rtl] .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text, +[dir=rtl] .input-group > .input-group-append:last-child > .btn:not(:last-child, .dropdown-toggle), +[dir=rtl] .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { + border-radius: 0 var(--pgn-size-form-input-radius-border-base) var(--pgn-size-form-input-radius-border-base) 0; +} +[dir=rtl] .input-group > .input-group-append > .btn, +[dir=rtl] .input-group > .input-group-append > .input-group-text, +[dir=rtl] .input-group > .input-group-prepend:not(:first-child) > .btn, +[dir=rtl] .input-group > .input-group-prepend:not(:first-child) > .input-group-text, +[dir=rtl] .input-group > .input-group-prepend:first-child > .btn:not(:first-child), +[dir=rtl] .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { + border-radius: var(--pgn-size-form-input-radius-border-base) 0 0 var(--pgn-size-form-input-radius-border-base); +} +.pgn__form-autosuggest__wrapper { + position: relative; +} +.pgn__form-autosuggest__wrapper .pgn__form-control-decorator .btn-icon:hover { + fill: var(--pgn-color-white); +} +.pgn__form-autosuggest__wrapper .pgn__form-control-decorator .btn-icon:focus { + fill: var(--pgn-color-gray-500); +} +.pgn__form-autosuggest__wrapper .form-control { + min-height: 2.75rem; +} +.pgn__form-autosuggest__wrapper .pgn__icon.btn-icon__icon { + height: var(--pgn-size-form-autosuggest-icon-height); + width: var(--pgn-size-form-autosuggest-icon-width); +} +.pgn__form-autosuggest__wrapper .pgn__form-autosuggest__dropdown { + box-shadow: var(--pgn-elevation-box-shadow-centered-1); + border-radius: var(--pgn-size-border-radius-sm); + max-height: 15rem; + overflow-y: scroll; + position: absolute; + background-color: var(--pgn-color-white); + width: calc(100% - 0.5rem); + z-index: var(--pgn-elevation-dropdown-zindex); + top: 3.125rem; + padding: 0; +} +@media (min-width: 576px) { + .pgn__form-autosuggest__wrapper .pgn__form-autosuggest__dropdown { + margin-inline-end: var(--pgn-spacing-form-control-gutter); + } +} +@media (--pgn-size-breakpoint-min-width-sm) { + .pgn__form-autosuggest__wrapper .pgn__form-autosuggest__dropdown { + margin-inline-end: var(--pgn-spacing-form-control-gutter); + } +} +.pgn__form-autosuggest__wrapper .pgn__form-autosuggest__dropdown .dropdown-item { + display: block; + text-align: start; + max-width: 100%; + padding: 0.625rem 1rem; + overflow: hidden; + text-overflow: ellipsis; +} +.pgn__form-autosuggest__wrapper .pgn__form-autosuggest__dropdown .dropdown-item:active { + color: var(--pgn-color-white); +} +.pgn__form-autosuggest__wrapper .pgn__form-autosuggest__dropdown .pgn__form-autosuggest__dropdown-loading { + padding: 6.25rem 0; + text-align: center; +} +.pgn__form-autosuggest__wrapper .pgn__form-autosuggest__dropdown .pgn__form-autosuggest__dropdown-loading .spinner-border { + width: var(--pgn-size-form-autosuggest-spinner-width); + height: var(--pgn-size-form-autosuggest-spinner-height); + border: var(--pgn-size-form-autosuggest-border-width) solid var(--pgn-color-black); + border-right-color: transparent; +} +.pgn__hyperlink { + display: inline-flex; + align-items: center; + text-align: start; +} +.pgn__hyperlink__external-icon { + margin-inline-start: var(--pgn-spacing-spacer-2); +} +.pgn__icon { + display: block; + height: 1.5rem; + position: relative; + width: 1.5rem; + flex-shrink: 0; +} +.pgn__icon.pgn__icon__inline { + width: var(--pgn-size-icon-inline); + height: var(--pgn-size-icon-inline); +} +.pgn__icon.pgn__icon__xs { + width: var(--pgn-size-icon-xs); + height: var(--pgn-size-icon-xs); +} +.pgn__icon.pgn__icon__sm { + width: var(--pgn-size-icon-sm); + height: var(--pgn-size-icon-sm); +} +.pgn__icon.pgn__icon__md { + width: var(--pgn-size-icon-md); + height: var(--pgn-size-icon-md); +} +.pgn__icon.pgn__icon__lg { + width: var(--pgn-size-icon-lg); + height: var(--pgn-size-icon-lg); +} +.pgn__icon svg { + display: block; + height: 100%; + position: relative; + max-height: 100%; + max-width: 100%; + width: 100%; +} +.img-fluid { + max-width: 100%; + height: auto; +} +.img-thumbnail { + padding: var(--pgn-spacing-image-thumbnail-padding); + background-color: var(--pgn-color-image-thumbnail-bg); + border: var(--pgn-size-image-thumbnail-border-width) solid var(--pgn-color-image-thumbnail-border); + box-shadow: var(--pgn-elevation-image-thumbnail-box-shadow); + border-radius: var(--pgn-size-image-thumbnail-border-radius); + max-width: 100%; + height: auto; +} +.figure-img { + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5); + line-height: 1; +} +.figure-caption { + color: var(--pgn-color-image-figure-caption); + font-size: var(--pgn-typography-image-figure-caption-font-size); +} +.pgn__menu { + border-radius: var(--pgn-size-menu-base-border-radius); + box-shadow: var(--pgn-elevation-menu-box-shadow); + background-color: var(--pgn-color-menu-bg); + overflow: auto; + max-height: var(--pgn-size-menu-base-max-height); +} +.pgn__menu .pgn__menu-item { + display: flex; + align-items: center; + justify-content: flex-start; + width: var(--pgn-size-menu-item-width-base); + color: var(--pgn-color-menu-item-color); + text-align: center; + vertical-align: middle; + user-select: none; + background-color: var(--pgn-color-menu-item-bg); + border: var(--pgn-size-menu-item-border-width) solid var(--pgn-color-menu-item-border); + padding: var(--pgn-spacing-menu-item-padding-y) var(--pgn-spacing-menu-item-padding-x); + height: var(--pgn-size-menu-item-height); +} +@media (max-width: var(--pgn-size-container-max-width-xs)) { + .pgn__menu .pgn__menu-item { + width: var(--pgn-size-menu-item-width-xs); + } +} +.pgn__menu .pgn__menu-item .pgn__menu-item-text { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.pgn__menu .pgn__menu-item .pgn__menu-item-content-spacer { + flex-grow: 1; +} +.pgn__menu .pgn__menu-item:hover { + text-decoration: none; + color: var(--pgn-color-menu-item-hover-color); + border-color: var(--pgn-color-menu-item-hover-border); + background: var(--pgn-color-menu-item-hover-bg); +} +.pgn__menu .pgn__menu-item.disabled, .pgn__menu .pgn__menu-item:disabled { + opacity: var(--pgn-other-btn-disabled-opacity); +} +.pgn__menu .pgn__menu-item.focus, .pgn__menu .pgn__menu-item:focus { + font-weight: var(--pgn-typography-font-weight-bolder); + background-color: var(--pgn-color-menu-item-focus-bg); +} +.pgn__menu .pgn__menu-item .btn-icon-before { + margin-inline-end: 0.5rem; + margin-left: calc(var(--pgn-spacing-menu-item-icon-margin-left) * -1); +} +[dir=rtl] .pgn__menu .pgn__menu-item .btn-icon-before { + margin-right: calc(var(--pgn-spacing-menu-item-icon-margin-right) * -1); + margin-left: 0.5rem; +} +.pgn__menu .pgn__menu-item .btn-icon-after { + margin-inline-start: 0.5rem; + margin-right: calc(var(--pgn-spacing-menu-item-icon-margin-right) * -1); +} +[dir=rtl] .pgn__menu .pgn__menu-item .btn-icon-after { + margin-right: 0.5rem; + margin-left: calc(var(--pgn-spacing-menu-item-icon-margin-left) * -1); +} +.pgn__menu .pgn__menu-item.pgn__form-checkbox > input { + flex-shrink: 0; +} +.pgn__menu .pgn__menu-item.pgn__form-checkbox > div { + overflow: hidden; +} +.pgn__menu-select .btn.btn-link { + color: var(--pgn-color-menu-select-btn-link-color); +} +.pgn__menu-select .btn.btn-link:hover, .pgn__menu-select .btn.btn-link:focus { + text-decoration-line: var(--pgn-typography-menu-select-btn-link-text-decoration-line); + text-decoration-thickness: var(--pgn-typography-menu-select-btn-link-text-decoration-thickness); +} +.pgn__menu-select .pgn__menu-select-popup { + position: relative; +} +.pgn__modal { + background: var(--pgn-color-modal-content-bg); + border-radius: calc(var(--pgn-size-modal-content-border-radius) - var(--pgn-size-modal-content-border-width)); + display: flex; + flex-direction: column; + margin: 0 var(--pgn-spacing-modal-dialog-margin); + max-height: 80vh; + max-width: var(--pgn-size-modal-md); + overflow: auto; + width: 100vw; + box-shadow: var(--pgn-elevation-modal-content-box-shadow-sm-up); + border: solid var(--pgn-size-modal-content-border-width) var(--pgn-color-modal-content-border); + position: relative; +} +.pgn__modal:not(.pgn__modal-fullscreen) > *:first-child { + border-top-left-radius: var(--pgn-size-modal-content-border-radius); + border-top-right-radius: var(--pgn-size-modal-content-border-radius); +} +.pgn__modal:not(.pgn__modal-fullscreen) > *:last-child { + border-bottom-left-radius: var(--pgn-size-modal-content-border-radius); + border-bottom-right-radius: var(--pgn-size-modal-content-border-radius); +} +.pgn__modal.pgn__modal-scroll-fullscreen { + max-height: none; + margin: var(--pgn-spacing-modal-dialog-margin); +} +.pgn__modal .pgn__modal-header { + padding-bottom: calc(var(--pgn-spacing-modal-inner-padding-base) / 2); +} +.pgn__modal .pgn__modal-body { + padding: calc(var(--pgn-spacing-modal-inner-padding-base) / 2) var(--pgn-spacing-modal-inner-padding-base); +} +.pgn__modal .pgn__modal-body::before { + top: calc(var(--pgn-spacing-modal-inner-padding-base) / 2 * -1); +} +.pgn__modal.pgn__modal-visible-overflow { + overflow: visible; +} +.pgn__modal.pgn__modal-visible-overflow .pgn__modal-body { + overflow: visible; +} +.pgn__modal-sm { + max-width: var(--pgn-size-modal-sm); +} +.pgn__modal-lg { + max-width: var(--pgn-size-modal-lg); +} +.pgn__modal-md { + max-width: var(--pgn-size-modal-md); +} +.pgn__modal-xl { + max-width: var(--pgn-size-modal-xl); +} +.pgn__modal-fullscreen { + border-radius: 0; + margin: 0; + max-height: none; + max-width: none; +} +.pgn__modal-fullscreen .pgn__modal-footer { + border-top: solid 1px var(--pgn-color-light-base); + padding-top: var(--pgn-spacing-modal-footer-padding-y); +} +.pgn__modal-fullscreen .pgn__modal-header { + border-radius: 0; +} +.pgn__modal-content-container > *.pgn__modal.pgn__modal-fullscreen { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 100%; +} +.pgn__modal-close-container { + position: absolute; + z-index: 10; + top: var(--pgn-spacing-dropdown-close-container-top); + inset-inline-end: var(--pgn-spacing-modal-header-padding-y); +} +.pgn__modal-header { + display: flex; + flex-direction: column; + justify-content: center; + position: sticky; + top: 0; + border-top-left-radius: var(--pgn-size-modal-content-border-radius); + border-top-right-radius: var(--pgn-size-modal-content-border-radius); + padding: var(--pgn-spacing-modal-header-padding-base); + background-color: var(--pgn-color-modal-content-bg); + transition: box-shadow 150ms ease; + min-height: 2rem; + box-sizing: content-box; + flex-shrink: 0; + box-shadow: none; +} +.pgn__modal-header * { + margin-bottom: 0; + margin-top: 0; +} +.pgn__modal-header .pgn__modal-title { + font-size: var(--pgn-typography-font-size-h3-base); + line-height: calc(var(--pgn-typography-font-size-h3-base) * var(--pgn-typography-headings-line-height)); + margin-inline-end: 3rem; + text-align: start; +} +.pgn__modal-hero { + padding: var(--pgn-spacing-modal-header-padding-base); + position: relative; + display: flex; + align-items: center; + min-height: 10rem; +} +.pgn__modal-hero .pgn__modal-hero-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + background-size: cover; +} +.pgn__modal-hero .pgn__modal-hero-content { + position: relative; + z-index: 1; + margin-inline-end: 3rem; + text-align: start; +} +.pgn__modal-body { + flex-grow: 1; + padding: var(--pgn-spacing-modal-inner-padding-base) var(--pgn-spacing-modal-inner-padding-base) calc(var(--pgn-spacing-modal-inner-padding-base) / 2); + overflow: auto; + position: relative; +} +.pgn__modal-body::before { + content: ""; + background-color: transparent; + background-image: linear-gradient(#605C5C, #B8BEBE, transparent 50%); + display: block; + height: 20px; + position: sticky; + top: calc(var(--pgn-spacing-modal-inner-padding-base) * -1); + margin-top: calc(var(--pgn-spacing-modal-inner-padding-base) * -1); + margin-left: calc(var(--pgn-spacing-modal-inner-padding-base) * -1); + margin-right: calc(var(--pgn-spacing-modal-inner-padding-base) * -1); + opacity: 0.5; + z-index: 2; +} +.pgn__modal-body::after { + content: ""; + background-color: transparent; + background-image: linear-gradient(360deg, #605C5C, #B8BEBE, transparent 50%); + display: block; + height: 20px; + position: sticky; + bottom: calc(var(--pgn-spacing-modal-inner-padding-base) / 2 * -1); + margin-bottom: calc(var(--pgn-spacing-modal-inner-padding-bottom) * -1); + margin-left: calc(var(--pgn-spacing-modal-inner-padding-base) * -1); + margin-right: calc(var(--pgn-spacing-modal-inner-padding-base) * -1); + opacity: 0.5; +} +.pgn__modal-body.pgn__modal-body-scroll-bottom::before { + opacity: 0.5; +} +.pgn__modal-body.pgn__modal-body-scroll-bottom::after { + opacity: 0; +} +.pgn__modal-body.pgn__modal-body-scroll-top::before { + opacity: 0; + z-index: -1; +} +.pgn__modal-body.pgn__modal-body-scroll-top::after { + opacity: 0.5; +} +.pgn__modal-body.pgn__modal-body-scroll-top.pgn__modal-body-scroll-bottom::before { + opacity: 0; +} +.pgn__modal-body.pgn__modal-body-scroll-top.pgn__modal-body-scroll-bottom::after { + opacity: 0; +} +.pgn__modal-body .pgn__modal-body-content { + text-align: start; +} +.pgn__modal-body .pgn__modal-body-content > *:last-child { + margin-bottom: 0; +} +.pgn__modal-body .pgn__modal-body-content > .container-fluid, .pgn__modal-body .pgn__modal-body-content > .container-sm, .pgn__modal-body .pgn__modal-body-content > .container-md, .pgn__modal-body .pgn__modal-body-content > .container-lg, .pgn__modal-body .pgn__modal-body-content > .container-xl { + padding: 0; +} +.pgn__modal.pgn__modal-scroll-fullscreen .pgn__modal-body { + box-shadow: none; +} +.pgn__modal-footer { + position: sticky; + bottom: 0; + display: flex; + justify-content: flex-end; + background-color: var(--pgn-color-modal-content-bg); + transition: box-shadow 150ms ease; + padding: var(--pgn-spacing-modal-footer-padding-base); + padding-top: calc(var(--pgn-spacing-modal-inner-padding-base) / 2); +} +.pgn__modal-dark .pgn__modal-header, +.pgn__modal-dark .pgn__modal-hero { + background-color: var(--pgn-color-dark-base); + color: var(--pgn-color-white); +} +.pgn__modal-dark .pgn__modal-header *, +.pgn__modal-dark .pgn__modal-hero * { + color: inherit; +} +.pgn__modal-warning .pgn__modal-header { + background-color: var(--pgn-color-warning-100); +} +.pgn__modal-danger .pgn__modal-header { + background-color: var(--pgn-color-danger-100); +} +.pgn__modal-success .pgn__modal-header { + background-color: var(--pgn-color-success-100); +} +.pgn__alert-modal.pgn__modal-default .pgn__modal-header { + padding-bottom: 0; +} +.pgn__alert-modal.pgn__modal-warning .pgn__alert-modal__title_icon { + color: var(--pgn-color-warning-500); +} +.pgn__alert-modal.pgn__modal-success .pgn__alert-modal__title_icon { + color: var(--pgn-color-success-500); +} +.pgn__alert-modal.pgn__modal-danger .pgn__alert-modal__title_icon { + color: var(--pgn-color-danger-500); +} +.pgn__alert-modal .pgn__modal-title { + display: flex; + flex-grow: 1; + align-items: center; +} +.pgn__alert-modal .pgn__modal-title .pgn__alert-modal__title_icon { + flex-shrink: 0; + margin-right: var(--pgn-spacing-spacer-2-5); +} +.pgn__hidden-scroll-padding-right { + padding-right: 0; +} +.pgn__modal-layer { + height: 100%; + left: 0; + overflow: auto; + position: fixed; + top: 0; + width: 100vw; + z-index: var(--pgn-elevation-modal-zindex); + -webkit-overflow-scrolling: touch; +} +.pgn__modal-backdrop { + background: var(--pgn-color-modal-backdrop-bg); + bottom: 0; + left: 0; + opacity: var(--pgn-other-modal-opacity); + position: fixed; + right: 0; + top: 0; + z-index: 0; +} +.pgn__modal-content-container { + align-items: center; + display: flex; + justify-content: center; + min-height: 100vh; + min-height: -webkit-fill-available; + padding: 0.1px; + position: relative; +} +.pgn__modal-content-container > *:not(.pgn__modal-backdrop) { + position: relative; + z-index: 1; +} +.pgn__modal-content-container h1, +.pgn__modal-content-container .h1, +.pgn__modal-content-container p { + text-align: start; +} +.pgn__modal-popup__arrow { + position: absolute; + width: 1rem; + height: 0.5rem; +} +.pgn__modal-popup__arrow::before, .pgn__modal-popup__arrow::after { + content: ""; + position: absolute; + border-color: transparent; + border-style: solid; + border-width: 0.5rem 0.5rem 0; +} +.pgn__modal-popup__arrow::before { + border-top-color: rgba(0, 0, 0, 0.2); +} +[data-popper-placement^=bottom-start] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=bottom-start] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-bottom-start { + transform: rotate(180deg); + top: -0.5rem; + left: 33%; +} +[data-popper-placement^=bottom] .pgn__modal-popup__arrow-auto, +.pgn__modal-popup__arrow-bottom { + transform: rotate(180deg); + top: -0.5rem; + left: 48%; +} +[data-popper-placement^=top-start] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=top-start] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-top-start { + bottom: -0.5rem; + left: 33%; +} +[data-popper-placement^=top] .pgn__modal-popup__arrow-auto, +.pgn__modal-popup__arrow-top { + bottom: -0.5rem; + left: 48%; +} +.pgn__modal-popup__arrow::after, +.pgn__modal-popup__arrow-top-start::after, +.pgn__modal-popup__arrow-top::after { + bottom: var(--pgn-size-border-width); + border-top-color: var(--pgn-color-white); +} +[data-popper-placement^=right] .pgn__modal-popup__arrow-auto, +[data-popper-placement^=right-start] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=right-start] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-right-start, +.pgn__modal-popup__arrow-right { + left: -1.25rem; + top: 50%; + transform: rotate(90deg); + margin: 0 0.5rem; +} +[data-popper-placement^=left], +.pgn__modal-popup__arrow-left { + right: -0.75rem; + top: 50%; + transform: rotate(-90deg); +} +[data-popper-placement^=left-end] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=left-end] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-left-end { + top: 77%; + right: -0.75rem; + transform: rotate(-90deg); +} +[data-popper-placement^=right-end] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=right-end] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-right-end { + top: 77%; + transform: rotate(90deg); + left: -0.75rem; +} +[data-popper-placement^=left-start] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=left-start] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-left-start { + top: 15%; + right: -0.75rem; + transform: rotate(-90deg); +} +[data-popper-placement^=right-start] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=right-start] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-right-start { + top: 15%; +} +[data-popper-placement^=top-end] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=top-end] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-top-end { + left: 62%; +} +[data-popper-placement^=bottom-end] .pgn__modal-popup__arrow-auto-start, +[data-popper-placement^=bottom-end] .pgn__modal-popup__arrow-auto-end, +.pgn__modal-popup__arrow-bottom-end { + top: -0.5rem; + left: 62%; + transform: rotate(180deg); +} +.nav { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.nav-link { + display: block; + padding: var(--pgn-spacing-nav-link-padding-y) var(--pgn-spacing-nav-link-padding-x); + text-decoration: var(--pgn-typography-nav-link-text-decoration); + color: var(--pgn-color-nav-link-text-base); + font-weight: var(--pgn-typography-nav-link-font-weight); +} +.nav-link:hover, .nav-link:focus { + text-decoration: none; + color: var(--pgn-color-nav-link-text-base); +} +.nav-link.disabled { + color: var(--pgn-color-nav-link-text-disabled); + pointer-events: none; + cursor: default; +} +.pgn__tabs.nav-pills .nav-link { + border: var(--pgn-size-nav-pills-link-border-width) solid var(--pgn-color-nav-pills-base-link-border); +} +.pgn__tabs.nav-pills .nav-link:focus { + position: relative; + outline: 0; + z-index: 200; +} +.pgn__tabs.nav-pills .nav-link:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + right: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + bottom: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + left: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-border-color-nav-tabs-link-border-focus); + border-radius: var(--pgn-size-nav-pills-border-radius); +} +.pgn__tabs.nav-pills .nav-link:hover { + border-color: var(--pgn-border-color-nav-tabs-link-border-hover); + background-color: var(--pgn-color-nav-tabs-base-link-hover-bg); +} +.pgn__tabs.nav-pills .nav-link.active, +.pgn__tabs.nav-pills .nav-link .nav-item.show .nav-link { + color: var(--pgn-color-nav-pills-base-link-active-text); + background-color: var(--pgn-color-nav-pills-base-link-active-bg); + border-color: var(--pgn-color-nav-pills-base-link-active-border); +} +.pgn__tabs.nav-pills .nav-link.active:focus, +.pgn__tabs.nav-pills .nav-link .nav-item.show .nav-link:focus { + position: relative; + outline: 0; + z-index: 200; +} +.pgn__tabs.nav-pills .nav-link.active:focus::before, +.pgn__tabs.nav-pills .nav-link .nav-item.show .nav-link:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + right: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + bottom: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + left: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-border-color-nav-tabs-link-border-focus); + border-radius: var(--pgn-size-nav-pills-border-radius); +} +.pgn__tabs.nav-inverse-pills + .tab-content { + color: var(--pgn-color-nav-pills-inverse-tab-content-color); +} +.pgn__tabs.nav-inverse-pills .nav-link { + color: var(--pgn-color-nav-pills-inverse-link-text-base); + border: var(--pgn-size-nav-pills-inverse-link-border-width) solid var(--pgn-color-nav-pills-inverse-link-border-base); +} +.pgn__tabs.nav-inverse-pills .nav-link:hover { + background-color: var(--pgn-color-nav-pills-inverse-link-bg-hover); +} +.pgn__tabs.nav-inverse-pills .nav-link:focus { + position: relative; + outline: 0; + z-index: 200; +} +.pgn__tabs.nav-inverse-pills .nav-link:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + right: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + bottom: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + left: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-color-nav-pills-inverse-link-text-focus); + border-radius: var(--pgn-size-nav-tabs-border-radius); +} +.pgn__tabs.nav-inverse-pills .nav-link.disabled { + opacity: 0.5; +} +.pgn__tabs.nav-inverse-pills .nav-link.active, +.pgn__tabs.nav-inverse-pills .nav-item.show .nav-link { + background-color: var(--pgn-color-nav-pills-inverse-link-bg-active); + color: var(--pgn-color-nav-pills-inverse-link-text-active); + border-color: var(--pgn-color-nav-pills-inverse-link-border-active); +} +.pgn__tabs.nav-inverse-pills .nav-link.active:hover, +.pgn__tabs.nav-inverse-pills .nav-item.show .nav-link:hover { + background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-hover); + color: var(--pgn-color-nav-pills-inverse-link-text-active-hover); + border-color: var(--pgn-color-nav-pills-inverse-link-border-active-hover); +} +.pgn__tabs.nav-inverse-pills .nav-link.active:focus, +.pgn__tabs.nav-inverse-pills .nav-item.show .nav-link:focus { + border-color: var(--pgn-color-nav-pills-inverse-link-border-active-focus); + background-color: var(--pgn-color-white); +} +.pgn__tabs.nav-inverse-pills .nav-link.active:focus:hover, +.pgn__tabs.nav-inverse-pills .nav-item.show .nav-link:focus:hover { + background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover); + color: var(--pgn-color-nav-pills-inverse-link-text-active-focus); + border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover); +} +.pgn__tabs.nav-inverse-tabs + .tab-content { + color: var(--pgn-color-nav-tabs-inverse-link-tab-content-color); +} +.pgn__tabs.nav-inverse-tabs .nav-link { + color: var(--pgn-color-nav-tabs-inverse-link-text-base); + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom); +} +.pgn__tabs.nav-inverse-tabs .nav-link .dropdown .dropdown-toggle { + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border); +} +.pgn__tabs.nav-inverse-tabs .nav-link .dropdown .dropdown-toggle:hover { + border-bottom: none; +} +.pgn__tabs.nav-inverse-tabs .nav-link:hover { + background-color: var(--pgn-color-nav-tabs-inverse-link-bg-hover); +} +.pgn__tabs.nav-inverse-tabs .nav-link:focus { + position: relative; + outline: 0; + z-index: 200; +} +.pgn__tabs.nav-inverse-tabs .nav-link:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + right: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + bottom: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + left: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-color-nav-tabs-inverse-link-bg-focus); + border-radius: var(--pgn-size-nav-tabs-border-radius); +} +.pgn__tabs.nav-inverse-tabs .nav-link.disabled { + opacity: 0.5; +} +.pgn__tabs.nav-inverse-tabs .nav-link.active, +.pgn__tabs.nav-inverse-tabs .nav-item.show .nav-link { + border-bottom: var(--pgn-size-nav-tabs-inverse-link-active-border-bottom-width) solid var(--pgn-color-nav-tabs-inverse-link-border-active); + background-color: var(--pgn-color-nav-tabs-inverse-link-bg-active); +} +.pgn__tabs.nav-inverse-tabs .nav-link.active:hover, +.pgn__tabs.nav-inverse-tabs .nav-item.show .nav-link:hover { + background-color: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover); +} +.nav-tabs { + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base); +} +.nav-tabs button.nav-link { + border: none; + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border); +} +.nav-tabs button.nav-link.disabled { + border-color: var(--pgn-color-nav-tabs-base-link-disabled-border); +} +.nav-tabs .nav-link { + margin-bottom: calc(var(--pgn-size-nav-tabs-border-width) * -1); + border-top-left-radius: var(--pgn-size-nav-tabs-border-radius); + border-top-right-radius: var(--pgn-size-nav-tabs-border-radius); +} +.nav-tabs .nav-link:hover { + background-color: var(--pgn-color-nav-tabs-base-link-hover-bg); +} +.nav-tabs .nav-link .dropdown { + padding-bottom: 0.125rem; +} +.nav-tabs .nav-link:focus { + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus); + position: relative; + outline: 0; + z-index: 200; +} +.nav-tabs .nav-link:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + right: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + bottom: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + left: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-border-color-nav-tabs-link-border-focus); + border-radius: var(--pgn-size-nav-tabs-border-radius); +} +.nav-tabs .nav-link.disabled { + color: var(--pgn-color-nav-link-text-disabled); + background-color: var(--pgn-color-nav-tabs-base-text-disabled); +} +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: var(--pgn-color-nav-tabs-base-link-active-text); + background-color: var(--pgn-color-nav-tabs-base-link-active-bg); + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-border-color-nav-tabs-link-border-active); +} +.nav-tabs .nav-link.active:hover, +.nav-tabs .nav-item.show .nav-link:hover { + background-color: var(--pgn-color-nav-tabs-base-link-hover-bg); +} +.nav-tabs .nav-link.active:focus, +.nav-tabs .nav-item.show .nav-link:focus { + position: relative; + outline: 0; + z-index: 200; +} +.nav-tabs .nav-link.active:focus::before, +.nav-tabs .nav-item.show .nav-link:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + right: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + bottom: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + left: calc(var(--pgn-spacing-nav-link-distance-to-border) * -1); + border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-border-color-nav-tabs-link-border-focus); + border-radius: var(--pgn-size-nav-tabs-border-radius); +} +.nav-tabs .dropdown-menu { + margin-top: calc(var(--pgn-size-nav-tabs-border-width) * -1); + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.nav-pills .nav-link { + border-radius: var(--pgn-size-nav-pills-border-radius); +} +.nav-pills .nav-link.active, +.nav-pills .show > .nav-link { + color: var(--pgn-color-nav-pills-base-link-active-text); + background-color: var(--pgn-color-nav-pills-base-link-active-bg); +} +.nav-button-group .nav-link { + border: solid 1px var(--pgn-color-nav-tabs-base-border-base); +} +.nav-button-group .nav-link:first-child { + border-top-left-radius: var(--pgn-size-nav-pills-border-radius); + border-bottom-left-radius: var(--pgn-size-nav-pills-border-radius); +} +[dir=rtl] .nav-button-group .nav-link:first-child { + border-top-right-radius: var(--pgn-size-nav-pills-border-radius); + border-bottom-right-radius: var(--pgn-size-nav-pills-border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0; +} +.nav-button-group .nav-link:last-child { + border-top-right-radius: var(--pgn-size-nav-pills-border-radius); + border-bottom-right-radius: var(--pgn-size-nav-pills-border-radius); +} +[dir=rtl] .nav-button-group .nav-link:last-child { + border-top-left-radius: var(--pgn-size-nav-pills-border-radius); + border-bottom-left-radius: var(--pgn-size-nav-pills-border-radius); + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.nav-button-group .nav-link:hover { + background: var(--pgn-color-nav-tabs-base-link-hover-bg); +} +.nav-button-group .nav-link + .nav-link { + margin-left: -1px; +} +.nav-button-group .nav-link.active, +.nav-button-group .show > .nav-link { + color: var(--pgn-color-nav-pills-base-link-active-text); + background-color: var(--pgn-color-nav-pills-base-link-active-bg); + border-color: transparent; +} +.nav-fill > .nav-link, +.nav-fill .nav-item { + flex: 1 1 auto; + text-align: center; +} +.nav-justified > .nav-link, +.nav-justified .nav-item { + flex-basis: 0; + flex-grow: 1; + text-align: center; +} +.tab-content > .tab-pane { + display: none; + text-align: start; +} +.tab-content > .active { + display: block; +} +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: var(--pgn-spacing-navbar-padding-y) var(--pgn-spacing-navbar-padding-x-base); +} +.navbar .container, +.navbar .container-fluid, +.navbar .container-sm, +.navbar .container-md, +.navbar .container-lg, +.navbar .container-xl { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +.navbar-brand { + display: inline-block; + padding-top: var(--pgn-spacing-navbar-brand-padding-y); + padding-bottom: var(--pgn-spacing-navbar-brand-padding-y); + margin-right: var(--pgn-spacing-navbar-padding-x-base); + line-height: inherit; + white-space: nowrap; + font-size: var(--pgn-typography-navbar-brand-font-size); +} +.navbar-brand:hover, .navbar-brand:focus { + text-decoration: none; +} +.navbar-nav { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.navbar-nav .nav-link { + padding-right: 0; + padding-left: 0; +} +.navbar-nav .dropdown-menu { + position: static; + float: none; +} +.navbar-text { + display: inline-block; + padding-top: var(--pgn-spacing-nav-link-padding-y); + padding-bottom: var(--pgn-spacing-nav-link-padding-y); +} +.navbar-collapse { + flex-basis: 100%; + flex-grow: 1; + align-items: center; +} +.navbar-toggler { + padding: var(--pgn-spacing-navbar-toggler-padding-y) var(--pgn-spacing-navbar-toggler-padding-x); + line-height: 1; + background-color: transparent; + border: var(--pgn-size-border-width) solid transparent; + border-radius: var(--pgn-size-navbar-toggler-border-radius); + font-size: var(--pgn-typography-navbar-toggler-font-size); +} +.navbar-toggler:hover, .navbar-toggler:focus { + text-decoration: none; +} +.navbar-toggler-icon { + content: ""; + display: inline-block; + width: 1.5em; + height: 1.5em; + vertical-align: middle; + background: 50%/100% 100% no-repeat; +} +.navbar-nav-scroll { + max-height: var(--pgn-size-navbar-nav-scroll-max-height); + overflow-y: auto; +} +@media (max-width: 575.98px) { + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid, + .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, + .navbar-expand-sm > .container-xl { + padding-right: 0; + padding-left: 0; + } +} +@media (min-width: 576px) { + .navbar-expand-sm { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-sm .navbar-nav { + flex-direction: row; + } + .navbar-expand-sm .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-sm .navbar-nav .nav-link { + padding-right: var(--pgn-spacing-navbar-padding-x-nav-link); + padding-left: var(--pgn-spacing-navbar-padding-x-nav-link); + } + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid, + .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, + .navbar-expand-sm > .container-xl { + flex-wrap: nowrap; + } + .navbar-expand-sm .navbar-nav-scroll { + overflow: visible; + } + .navbar-expand-sm .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-sm .navbar-toggler { + display: none; + } +} +@media (max-width: 767.98px) { + .navbar-expand-md > .container, + .navbar-expand-md > .container-fluid, + .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, + .navbar-expand-md > .container-xl { + padding-right: 0; + padding-left: 0; + } +} +@media (min-width: 768px) { + .navbar-expand-md { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-md .navbar-nav { + flex-direction: row; + } + .navbar-expand-md .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-md .navbar-nav .nav-link { + padding-right: var(--pgn-spacing-navbar-padding-x-nav-link); + padding-left: var(--pgn-spacing-navbar-padding-x-nav-link); + } + .navbar-expand-md > .container, + .navbar-expand-md > .container-fluid, + .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, + .navbar-expand-md > .container-xl { + flex-wrap: nowrap; + } + .navbar-expand-md .navbar-nav-scroll { + overflow: visible; + } + .navbar-expand-md .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-md .navbar-toggler { + display: none; + } +} +@media (max-width: 991.98px) { + .navbar-expand-lg > .container, + .navbar-expand-lg > .container-fluid, + .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, + .navbar-expand-lg > .container-xl { + padding-right: 0; + padding-left: 0; + } +} +@media (min-width: 992px) { + .navbar-expand-lg { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-lg .navbar-nav { + flex-direction: row; + } + .navbar-expand-lg .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-lg .navbar-nav .nav-link { + padding-right: var(--pgn-spacing-navbar-padding-x-nav-link); + padding-left: var(--pgn-spacing-navbar-padding-x-nav-link); + } + .navbar-expand-lg > .container, + .navbar-expand-lg > .container-fluid, + .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, + .navbar-expand-lg > .container-xl { + flex-wrap: nowrap; + } + .navbar-expand-lg .navbar-nav-scroll { + overflow: visible; + } + .navbar-expand-lg .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-lg .navbar-toggler { + display: none; + } +} +@media (max-width: 1199.98px) { + .navbar-expand-xl > .container, + .navbar-expand-xl > .container-fluid, + .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, + .navbar-expand-xl > .container-xl { + padding-right: 0; + padding-left: 0; + } +} +@media (min-width: 1200px) { + .navbar-expand-xl { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-xl .navbar-nav { + flex-direction: row; + } + .navbar-expand-xl .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-xl .navbar-nav .nav-link { + padding-right: var(--pgn-spacing-navbar-padding-x-nav-link); + padding-left: var(--pgn-spacing-navbar-padding-x-nav-link); + } + .navbar-expand-xl > .container, + .navbar-expand-xl > .container-fluid, + .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, + .navbar-expand-xl > .container-xl { + flex-wrap: nowrap; + } + .navbar-expand-xl .navbar-nav-scroll { + overflow: visible; + } + .navbar-expand-xl .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-xl .navbar-toggler { + display: none; + } +} +@media (max-width: 1399.98px) { + .navbar-expand-xxl > .container, + .navbar-expand-xxl > .container-fluid, + .navbar-expand-xxl > .container-sm, + .navbar-expand-xxl > .container-md, + .navbar-expand-xxl > .container-lg, + .navbar-expand-xxl > .container-xl { + padding-right: 0; + padding-left: 0; + } +} +@media (min-width: 1400px) { + .navbar-expand-xxl { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-xxl .navbar-nav { + flex-direction: row; + } + .navbar-expand-xxl .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-xxl .navbar-nav .nav-link { + padding-right: var(--pgn-spacing-navbar-padding-x-nav-link); + padding-left: var(--pgn-spacing-navbar-padding-x-nav-link); + } + .navbar-expand-xxl > .container, + .navbar-expand-xxl > .container-fluid, + .navbar-expand-xxl > .container-sm, + .navbar-expand-xxl > .container-md, + .navbar-expand-xxl > .container-lg, + .navbar-expand-xxl > .container-xl { + flex-wrap: nowrap; + } + .navbar-expand-xxl .navbar-nav-scroll { + overflow: visible; + } + .navbar-expand-xxl .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-xxl .navbar-toggler { + display: none; + } +} +.navbar-expand { + flex-flow: row nowrap; + justify-content: flex-start; +} +.navbar-expand > .container, +.navbar-expand > .container-fluid, +.navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, +.navbar-expand > .container-xl { + padding-right: 0; + padding-left: 0; + flex-wrap: nowrap; +} +.navbar-expand .navbar-nav { + flex-direction: row; +} +.navbar-expand .navbar-nav .dropdown-menu { + position: absolute; +} +.navbar-expand .navbar-nav .nav-link { + padding-right: var(--pgn-spacing-navbar-padding-x-nav-link); + padding-left: var(--pgn-spacing-navbar-padding-x-nav-link); +} +.navbar-expand .navbar-nav-scroll { + overflow: visible; +} +.navbar-expand .navbar-collapse { + display: flex !important; + flex-basis: auto; +} +.navbar-expand .navbar-toggler { + display: none; +} +.navbar-light .navbar-brand { + color: var(--pgn-color-navbar-light-brand-text); +} +.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { + color: var(--pgn-color-navbar-light-brand-hover); +} +.navbar-light .navbar-nav .nav-link { + color: var(--pgn-color-navbar-light-text); +} +.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { + color: var(--pgn-color-navbar-light-hover); +} +.navbar-light .navbar-nav .nav-link.disabled { + color: var(--pgn-color-navbar-light-disabled); +} +.navbar-light .navbar-nav .show > .nav-link, +.navbar-light .navbar-nav .active > .nav-link, +.navbar-light .navbar-nav .nav-link.show, +.navbar-light .navbar-nav .nav-link.active { + color: var(--pgn-color-navbar-light-active); +} +.navbar-light .navbar-toggler { + color: var(--pgn-color-navbar-light-text); + border-color: var(--pgn-color-navbar-light-toggler-border); +} +.navbar-light .navbar-toggler-icon { + background-image: var(--pgn-content-navbar-toggler-light-icon-bg); +} +.navbar-light .navbar-text { + color: var(--pgn-color-navbar-light-text); +} +.navbar-light .navbar-text a { + color: var(--pgn-color-navbar-light-active); +} +.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { + color: var(--pgn-color-navbar-light-active); +} +.navbar-dark .navbar-brand { + color: var(--pgn-color-navbar-dark-brand-text); +} +.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { + color: var(--pgn-color-navbar-dark-brand-hover); +} +.navbar-dark .navbar-nav .nav-link { + color: var(--pgn-color-navbar-dark-text); +} +.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { + color: var(--pgn-color-navbar-dark-hover); +} +.navbar-dark .navbar-nav .nav-link.disabled { + color: var(--pgn-color-navbar-dark-disabled); +} +.navbar-dark .navbar-nav .show > .nav-link, +.navbar-dark .navbar-nav .active > .nav-link, +.navbar-dark .navbar-nav .nav-link.show, +.navbar-dark .navbar-nav .nav-link.active { + color: var(--pgn-color-navbar-dark-active); +} +.navbar-dark .navbar-toggler { + color: var(--pgn-color-navbar-dark-text); + border-color: var(--pgn-color-navbar-dark-toggler-border); +} +.navbar-dark .navbar-toggler-icon { + background-image: var(--pgn-content-navbar-toggler-dark-icon-bg); +} +.navbar-dark .navbar-text { + color: var(--pgn-color-navbar-dark-text); +} +.navbar-dark .navbar-text a { + color: var(--pgn-color-navbar-dark-active); +} +.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { + color: var(--pgn-color-navbar-dark-active); +} +.pgn__pageBanner-component { + width: 100%; + min-height: 36px; + display: flex; + flex-wrap: nowrap; + font-size: var(--pgn-typography-font-size-xs); + background-color: var(--pgn-page-baner-bg, inherit); + color: var(--pgn-page-baner-color, inherit); +} +@media (min-width: 768px) { + .pgn__pageBanner-component { + font-size: var(--pgn-typography-font-size-sm); + } +} +.pgn__pageBanner__dark { + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-dark); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-dark); +} +.pgn__pageBanner__light { + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-light); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-light); +} +.pgn__pageBanner__accentA { + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-a); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-a); +} +.pgn__pageBanner__accentB { + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-b); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-b); +} +.pgn__pageBanner__warning { + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-warning); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-warning); +} +.pgn__pageBanner-content { + display: flex; + flex-grow: 1; + justify-content: center; + align-items: center; + padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-2-5); + text-align: center; +} +.pgn__pageBanner-dismissButtonContainer { + min-width: 32px; + min-height: 32px; + display: flex; + align-items: center; + align-self: center; +} +@media (min-width: 768px) { + .pgn__pageBanner-dismissButtonContainer { + min-width: 36px; + min-height: 36px; + } +} +.pagination .page-item:last-child .btn-icon.page-link { + border-top-right-radius: 50%; + border-bottom-right-radius: 50%; +} +.pagination .page-item:first-child .btn-icon.page-link { + border-top-left-radius: 50%; + border-bottom-left-radius: 50%; +} +.pagination { + display: flex; + margin: 0; + padding-left: 0; + list-style: none; + border-radius: var(--pgn-size-border-radius-base); +} +.pagination .dropdown { + z-index: 4; +} +.pagination .page-of-count { + margin: 0 0.5rem; + border: 0; +} +.pagination .page-item:first-child .page-link { + margin-left: 0; + border-top-left-radius: var(--pgn-size-border-radius-base); + border-bottom-left-radius: var(--pgn-size-border-radius-base); +} +.pagination .page-item:last-child .page-link { + border-top-right-radius: var(--pgn-size-border-radius-base); + border-bottom-right-radius: var(--pgn-size-border-radius-base); +} +.pagination .page-item.active .page-link { + z-index: 3; +} +.pagination .page-item > .btn { + transition: none; + line-height: var(--pgn-typography-pagination-line-height); +} +.pagination-small .page-link { + font-size: var(--pgn-typography-pagination-font-size-sm); + line-height: var(--pgn-typography-pagination-line-height); + padding: 0.375rem 0.78rem; +} +.pagination-small .page-link.previous, .pagination-small .page-link.next { + padding: 0 var(--pgn-spacing-pagination-padding-y-base); + line-height: var(--pgn-size-pagination-secondary-height-sm); +} +.pagination-small .page-link.previous div, .pagination-small .page-link.next div { + display: flex; + align-items: center; +} +.pagination-small:not(.pagination-default) .page-link.previous, .pagination-small:not(.pagination-default) .page-link.next { + padding: 0; + width: var(--pgn-size-pagination-icon-width); +} +.pagination-secondary button.next, +.pagination-secondary button.previous { + height: var(--pgn-size-pagination-secondary-height-base); + padding: 0 var(--pgn-spacing-pagination-padding-y-base); +} +.pagination-secondary.pagination-small button.next, +.pagination-secondary.pagination-small button.previous { + height: var(--pgn-size-pagination-secondary-height-sm); + line-height: var(--pgn-typography-pagination-line-height); +} +.pagination .ellipsis { + border: 0; + margin-left: 0; +} +.pagination-inverse .ellipsis { + color: var(--pgn-color-white); +} +.pagination-inverse .dropdown .dropdown-toggle::after { + border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-pagination-dropdown-text-inverse); +} +.pagination-reduced-dropdown-menu { + overflow-y: auto; + max-height: var(--pgn-size-pagination-reduced-dropdown-max-height); + min-width: var(--pgn-size-pagination-reduced-dropdown-min-width); +} +.pagination-reduced-dropdown-menu a { + text-align: center; +} +.pagination-reduced .dropdown-toggle::after { + width: 0; + height: 0; + border-left: var(--pgn-size-pagination-toggle-border-base) solid transparent; + border-right: var(--pgn-size-pagination-toggle-border-base) solid transparent; + border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-gray-700); + transform: rotate(0); + inset-inline-start: 0.5rem; + top: 0; + margin-inline-end: 1rem; +} +.pagination-reduced button.next, +.pagination-reduced button.previous { + height: var(--pgn-size-pagination-secondary-height-base); + padding: 0 var(--pgn-spacing-pagination-padding-y-base); +} +.pagination-reduced.pagination-small .btn.dropdown-toggle { + font-size: var(--pgn-typography-pagination-font-size-sm); +} +.pagination-reduced.pagination-small .btn.dropdown-toggle::after { + border-left-width: var(--pgn-size-pagination-toggle-border-sm); + border-right-width: var(--pgn-size-pagination-toggle-border-sm); + border-top-width: var(--pgn-size-pagination-toggle-border-sm); +} +.pagination-reduced.pagination-small button.previous, +.pagination-reduced.pagination-small button.next { + line-height: var(--pgn-size-pagination-icon-height); + height: var(--pgn-size-pagination-icon-height); +} +.pagination-minimal .page-item:first-child { + margin-inline-end: 0.3rem; +} +.pagination-minimal button.next, +.pagination-minimal button.previous { + padding: var(--pgn-spacing-pagination-padding-y-base); + height: var(--pgn-size-pagination-secondary-height-base); +} +.pagination-minimal.pagination-small button.next, +.pagination-minimal.pagination-small button.previous { + padding: 0 var(--pgn-spacing-pagination-padding-y-base); + height: var(--pgn-size-pagination-secondary-height-sm); +} +.page-link { + border: none; + margin-left: -var(--pgn-size-pagination-border-width); +} +.page-link:focus { + z-index: 3; +} +.page-link div { + display: flex; +} +[dir=rtl] .page-link svg { + transform: scale(-1); +} +.popover { + position: absolute; + top: 0; + left: 0; + z-index: var(--pgn-elevation-popover-zindex); + display: block; + max-width: var(--pgn-size-popover-max-width); + font-family: var(--pgn-typography-font-family-base); + font-style: normal; + font-weight: var(--pgn-typography-font-weight-normal); + line-height: var(--pgn-typography-line-height-base); + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + white-space: normal; + word-spacing: normal; + line-break: auto; + font-size: var(--pgn-typography-popover-font-size); + word-wrap: break-word; + background-color: var(--pgn-color-popover-bg); + background-clip: padding-box; + border: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-border); + box-shadow: var(--pgn-elevation-popover-box-shadow); + border-radius: var(--pgn-size-popover-border-radius); + filter: var(--pgn-elevation-popover-box-shadow); +} +.popover .arrow { + position: absolute; + display: block; + width: var(--pgn-size-popover-arrow-width); + height: var(--pgn-size-popover-arrow-height); + margin: 0 var(--pgn-size-popover-border-radius); +} +.popover .arrow::before, .popover .arrow::after { + content: ""; + position: absolute; + display: block; + border-color: transparent; + border-style: solid; +} +.bs-popover-top, .bs-popover-auto[x-placement^=top] { + margin-bottom: var(--pgn-size-popover-arrow-height); +} +.bs-popover-top > .arrow, .bs-popover-auto[x-placement^=top] > .arrow { + bottom: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height))); +} +.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^=top] > .arrow::before { + bottom: 0; + border-width: var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * 0.5) 0; + border-top-color: var(--pgn-color-popover-arrow-outer); +} +.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^=top] > .arrow::after { + bottom: var(--pgn-size-popover-border-width); + border-width: var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * 0.5) 0; + border-top-color: var(--pgn-color-popover-arrow-base); +} +.bs-popover-right, .bs-popover-auto[x-placement^=right] { + margin-left: var(--pgn-size-popover-arrow-height); +} +.bs-popover-right > .arrow, .bs-popover-auto[x-placement^=right] > .arrow { + left: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height))); + width: var(--pgn-size-popover-arrow-height); + height: var(--pgn-size-popover-arrow-width); + margin: var(--pgn-size-popover-border-radius) 0; +} +.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^=right] > .arrow::before { + left: 0; + border-width: calc(var(--pgn-size-popover-arrow-width) * 0.5) var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * 0.5) 0; + border-right-color: var(--pgn-color-popover-arrow-outer); +} +.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^=right] > .arrow::after { + left: var(--pgn-size-popover-border-width); + border-width: calc(var(--pgn-size-popover-arrow-width) * 0.5) var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * 0.5) 0; + border-right-color: var(--pgn-color-popover-arrow-base); +} +.bs-popover-bottom, .bs-popover-auto[x-placement^=bottom] { + margin-top: var(--pgn-size-popover-arrow-height); +} +.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^=bottom] > .arrow { + top: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height))); +} +.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^=bottom] > .arrow::before { + top: 0; + border-width: 0 calc(var(--pgn-size-popover-arrow-width) * 0.5) var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * 0.5); + border-bottom-color: var(--pgn-color-popover-arrow-outer); +} +.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^=bottom] > .arrow::after { + top: var(--pgn-size-popover-border-width); + border-width: 0 calc(var(--pgn-size-popover-arrow-width) * 0.5) var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * 0.5); + border-bottom-color: var(--pgn-color-popover-arrow-base); +} +.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^=bottom] .popover-header::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + display: block; + width: var(--pgn-size-popover-arrow-width); + margin-left: calc(var(--pgn-size-popover-arrow-width) * -0.5); + border-bottom: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-header-bg); +} +.bs-popover-left, .bs-popover-auto[x-placement^=left] { + margin-right: var(--pgn-size-popover-arrow-height); +} +.bs-popover-left > .arrow, .bs-popover-auto[x-placement^=left] > .arrow { + right: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height))); + width: var(--pgn-size-popover-arrow-height); + height: var(--pgn-size-popover-arrow-width); + margin: var(--pgn-size-popover-border-radius) 0; +} +.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^=left] > .arrow::before { + right: 0; + border-width: calc(var(--pgn-size-popover-arrow-width) * 0.5) 0 calc(var(--pgn-size-popover-arrow-width) * 0.5) var(--pgn-size-popover-arrow-height); + border-left-color: var(--pgn-color-popover-arrow-outer); +} +.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^=left] > .arrow::after { + right: var(--pgn-size-popover-border-width); + border-width: calc(var(--pgn-size-popover-arrow-width) * 0.5) 0 calc(var(--pgn-size-popover-arrow-width) * 0.5) var(--pgn-size-popover-arrow-height); + border-left-color: var(--pgn-color-popover-arrow-base); +} +.bs-popover-auto[x-placement^=top] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +} +.bs-popover-auto[x-placement^=right] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +} +.bs-popover-auto[x-placement^=bottom] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +} +.bs-popover-auto[x-placement^=left] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +} +.popover-header { + padding: var(--pgn-spacing-popover-header-padding-y) var(--pgn-spacing-popover-header-padding-x); + margin-bottom: 0; + font-size: var(--pgn-typography-font-size-base); + color: var(--pgn-color-popover-header-text); + background-color: var(--pgn-color-popover-header-bg); + border-bottom: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-header-border-bottom-dark); + border-top-left-radius: calc(var(--pgn-size-popover-border-radius) - var(--pgn-size-popover-border-width)); + border-top-right-radius: calc(var(--pgn-size-popover-border-radius) - var(--pgn-size-popover-border-width)); +} +.popover-header:empty { + display: none; +} +.popover-body { + padding: var(--pgn-spacing-popover-body-padding-y) var(--pgn-spacing-popover-body-padding-x); + color: var(--pgn-color-popover-body); +} +.popover .popover-header { + display: flex; + align-items: center; + font-size: var(--pgn-typography-font-size-h5-base); +} +.popover .pgn__icon { + margin-inline-end: var(--pgn-spacing-popover-icon-margin-right); + height: var(--pgn-size-popover-icon-height); + width: var(--pgn-size-popover-icon-width); +} +.popover-success { + background: var(--pgn-color-popover-success-bg); +} +.popover-success .popover-header { + background: var(--pgn-color-popover-success-bg); +} +.popover-success .popover-header::before { + border-bottom-color: var(--pgn-color-popover-success-bg); +} +.popover-success .pgn__icon { + color: var(--pgn-color-popover-success-icon); +} +.popover-success.bs-popover-bottom .arrow::after, .popover-success.bs-popover-auto[x-placement^=bottom] .arrow::after { + border-bottom-color: var(--pgn-color-popover-success-bg); +} +.popover-success.bs-popover-top .arrow::after, .popover-success.bs-popover-auto[x-placement^=top] .arrow::after { + border-top-color: var(--pgn-color-popover-success-bg); +} +.popover-success.bs-popover-right .arrow::after, .popover-success.bs-popover-auto[x-placement^=right] .arrow::after { + border-right-color: var(--pgn-color-popover-success-bg); +} +.popover-success.bs-popover-left .arrow::after, .popover-success.bs-popover-auto[x-placement^=left] .arrow::after { + border-left-color: var(--pgn-color-popover-success-bg); +} +.popover-warning { + background: var(--pgn-color-popover-warning-bg); +} +.popover-warning .popover-header { + background: var(--pgn-color-popover-warning-bg); +} +.popover-warning .popover-header::before { + border-bottom-color: var(--pgn-color-popover-warning-bg); +} +.popover-warning .pgn__icon { + color: var(--pgn-color-popover-warning-icon); +} +.popover-warning.bs-popover-bottom .arrow::after, .popover-warning.bs-popover-auto[x-placement^=bottom] .arrow::after { + border-bottom-color: var(--pgn-color-popover-warning-bg); +} +.popover-warning.bs-popover-top .arrow::after, .popover-warning.bs-popover-auto[x-placement^=top] .arrow::after { + border-top-color: var(--pgn-color-popover-warning-bg); +} +.popover-warning.bs-popover-right .arrow::after, .popover-warning.bs-popover-auto[x-placement^=right] .arrow::after { + border-right-color: var(--pgn-color-popover-warning-bg); +} +.popover-warning.bs-popover-left .arrow::after, .popover-warning.bs-popover-auto[x-placement^=left] .arrow::after { + border-left-color: var(--pgn-color-popover-warning-bg); +} +.popover-danger { + background: var(--pgn-color-popover-danger-bg); +} +.popover-danger .popover-header { + background: var(--pgn-color-popover-danger-bg); +} +.popover-danger .popover-header::before { + border-bottom-color: var(--pgn-color-popover-danger-bg); +} +.popover-danger .pgn__icon { + color: var(--pgn-color-popover-danger-icon); +} +.popover-danger.bs-popover-bottom .arrow::after, .popover-danger.bs-popover-auto[x-placement^=bottom] .arrow::after { + border-bottom-color: var(--pgn-color-popover-danger-bg); +} +.popover-danger.bs-popover-top .arrow::after, .popover-danger.bs-popover-auto[x-placement^=top] .arrow::after { + border-top-color: var(--pgn-color-popover-danger-bg); +} +.popover-danger.bs-popover-right .arrow::after, .popover-danger.bs-popover-auto[x-placement^=right] .arrow::after { + border-right-color: var(--pgn-color-popover-danger-bg); +} +.popover-danger.bs-popover-left .arrow::after, .popover-danger.bs-popover-auto[x-placement^=left] .arrow::after { + border-left-color: var(--pgn-color-popover-danger-bg); +} +@keyframes progress-bar-stripes { + from { + background-position: var(--pgn-size-progress-bar-height-base) 0; + } + to { + background-position: 0 0; + } +} +.progress { + display: flex; + height: var(--pgn-size-progress-bar-height-base); + overflow: hidden; + line-height: 0; + background-color: var(--pgn-color-progress-bg); + box-shadow: var(--pgn-elevation-progress-bar-box-shadow); + font-size: var(--pgn-typography-progress-bar-font-size); + border-radius: var(--pgn-size-progress-bar-border-radius); + border: var(--pgn-size-progress-bar-border-width) solid var(--pgn-color-progress-bar-border); + background: #F0F9F6 !important; +} +.progress-bar { + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + color: var(--pgn-color-progress-bar-base); + text-align: center; + border-top-right-radius: 50px; + border-bottom-right-radius: 50px; + white-space: nowrap; + transition: var(--pgn-transition-progress-bar-transition); + background-color: var(--pgn-color-progress-bar-bg-base); +} +@media (prefers-reduced-motion: reduce) { + .progress-bar { + transition: none; + } +} +.progress-bar-striped { + background-image: linear-gradient(45deg, rgba(var(--pgn-color-white), 0.15) 25%, transparent 25%, transparent 50%, rgba(var(--pgn-color-white), 0.15) 50%, rgba(var(--pgn-color-white), 0.15) 75%, transparent 75%, transparent); + background-size: var(--pgn-size-progress-bar-height-base) var(--pgn-size-progress-bar-height-base); +} +.progress-bar-animated { + animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes; +} +@media (prefers-reduced-motion: reduce) { + .progress-bar-animated { + animation: none; + } +} +.pgn__progress-annotated { + width: 100%; + position: relative; + overflow: visible; + padding: 3.125rem 0; +} +.pgn__progress-annotated .progress { + overflow: visible; + background-color: var(--pgn-color-light-300); + height: var(--pgn-size-progress-bar-height-annotated); + border: none; +} +.pgn__progress-annotated .progress .progress-bar { + background-color: var(--pgn-color-progress-bar-bg-annotated); + overflow: visible; + position: relative; +} +.pgn__progress-annotated .progress .pgn__progress-tick--white::after, +.pgn__progress-annotated .progress .pgn__progress-tick--black::after { + content: ""; + position: absolute; + height: var(--pgn-size-progress-bar-height-annotated); + width: 1px; + right: 0; +} +.pgn__progress-annotated .progress .pgn__progress-tick--white::after { + background: var(--pgn-color-light-300); +} +.pgn__progress-annotated .progress .pgn__progress-tick--black::after { + background: var(--pgn-color-primary-500); +} +.pgn__progress-annotated .progress .pgn__progress-bar--dark { + background-color: var(--pgn-color-primary-500); +} +.pgn__progress-annotated .progress .pgn__progress-bar--dark::after { + content: ""; + display: block; + background: var(--pgn-color-primary-500); + position: absolute; + top: calc((var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2) * -1); + right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); + width: var(--pgn-size-progress-bar-threshold-circle); + height: var(--pgn-size-progress-bar-threshold-circle); + border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); + z-index: 1; +} +[dir=rtl] .pgn__progress-annotated .progress .pgn__progress-bar--dark::after { + left: calc(var(--pgn-size-progress-bar-threshold-circle) / 2 * -1); + right: auto; +} +.pgn__progress-annotated .progress .pgn__progress-bar--success { + background-color: var(--pgn-color-success-500); +} +.pgn__progress-annotated .progress .pgn__progress-bar--success::after { + content: ""; + display: block; + background: var(--pgn-color-success-500); + position: absolute; + top: calc((var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2) * -1); + right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); + width: var(--pgn-size-progress-bar-threshold-circle); + height: var(--pgn-size-progress-bar-threshold-circle); + border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); + z-index: 1; +} +[dir=rtl] .pgn__progress-annotated .progress .pgn__progress-bar--success::after { + left: calc(var(--pgn-size-progress-bar-threshold-circle) / 2 * -1); + right: auto; +} +.pgn__progress-annotated .progress .pgn__progress-bar--error { + background-color: var(--pgn-color-danger-500); +} +.pgn__progress-annotated .progress .pgn__progress-bar--error::after { + content: ""; + display: block; + background: var(--pgn-color-danger-500); + position: absolute; + top: calc((var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2) * -1); + right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); + width: var(--pgn-size-progress-bar-threshold-circle); + height: var(--pgn-size-progress-bar-threshold-circle); + border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); + z-index: 1; +} +[dir=rtl] .pgn__progress-annotated .progress .pgn__progress-bar--error::after { + left: calc(var(--pgn-size-progress-bar-threshold-circle) / 2 * -1); + right: auto; +} +.pgn__progress-annotated .progress .pgn__progress-bar--warning { + background-color: var(--pgn-color-accent-b); +} +.pgn__progress-annotated .progress .pgn__progress-bar--warning::after { + content: ""; + display: block; + background: var(--pgn-color-accent-b); + position: absolute; + top: calc((var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2) * -1); + right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); + width: var(--pgn-size-progress-bar-threshold-circle); + height: var(--pgn-size-progress-bar-threshold-circle); + border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); + z-index: 1; +} +[dir=rtl] .pgn__progress-annotated .progress .pgn__progress-bar--warning::after { + left: calc(var(--pgn-size-progress-bar-threshold-circle) / 2 * -1); + right: auto; +} +.pgn__progress-annotated .progress::before, +.pgn__progress-annotated .progress::after { + position: absolute; + content: ""; + height: var(--pgn-size-progress-bar-height-annotated); + width: 1px; + background: var(--pgn-color-primary-500); +} +.pgn__progress-annotated .progress::after { + right: 0; +} +.pgn__progress-annotated .pgn__progress-info { + position: absolute; + display: flex; + align-items: baseline; +} +.pgn__progress-annotated .pgn__progress-info:first-child { + top: 0; +} +.pgn__progress-annotated .pgn__progress-hint { + box-sizing: border-box; + padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap); + font-size: var(--pgn-typography-font-size-sm); +} +.pgn__searchfield { + transition: var(--pgn-transition-form-input); + border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base); +} +.pgn__searchfield .pgn__searchfield-form { + display: flex; + align-items: center; + width: 100%; + background-color: var(--pgn-color-search-field-form-bg); +} +.pgn__searchfield .btn:focus-visible { + outline: none; + position: relative; + transition: var(--pgn-transition-form-input); +} +.pgn__searchfield .btn:focus-visible::after { + content: ""; + border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus); + position: absolute; + width: 100%; + height: 100%; +} +.pgn__searchfield.disabled, .pgn__searchfield:disabled { + opacity: var(--pgn-other-search-field-disabled-opacity); + pointer-events: none; +} +.pgn__searchfield.has-focus:not(.pgn__searchfield--external) { + position: relative; +} +.pgn__searchfield.has-focus:not(.pgn__searchfield--external)::after { + content: ""; + border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus); + position: absolute; + width: 100%; + height: 100%; +} +.pgn__searchfield.has-focus:not(.pgn__searchfield--external) .pgn__searchfield_wrapper { + box-shadow: 0 0 0 var(--pgn-size-search-field-border-width-base) var(--pgn-color-search-field-border-interaction); +} +.pgn__searchfield:hover, .pgn__searchfield:active { + border-color: var(--pgn-color-search-field-border-interaction); +} +.pgn__searchfield .form-control { + border: none; + border-radius: var(--pgn-size-search-field-border-radius); + height: var(--pgn-size-search-field-search-input-height); +} +.pgn__searchfield .form-control:focus { + box-shadow: none; +} +.pgn__searchfield .form-control::-ms-clear, .pgn__searchfield .form-control::-ms-reveal { + display: none; + width: 0; + height: 0; +} +.pgn__searchfield .form-control::-webkit-search-decoration, .pgn__searchfield .form-control::-webkit-search-cancel-button, .pgn__searchfield .form-control::-webkit-search-results-button, .pgn__searchfield .form-control::-webkit-search-results-decoration { + display: none; +} +.pgn__searchfield .form-control .form-control:hover, +.pgn__searchfield .form-control .form-control:focus, +.pgn__searchfield .form-control .form-control:active { + border: none; +} +.pgn__searchfield label.has-label-text { + padding-inline-start: 0.75rem; +} +.pgn__searchfield.pgn__searchfield--external { + border: none; +} +.pgn__searchfield.pgn__searchfield--external .pgn__searchfield-form { + background-color: transparent; +} +.pgn__searchfield.pgn__searchfield--external.has-focus { + box-shadow: none; +} +.pgn__searchfield.pgn__searchfield--external.has-focus .pgn__searchfield_wrapper { + position: relative; +} +.pgn__searchfield.pgn__searchfield--external.has-focus .pgn__searchfield_wrapper::after { + content: ""; + border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus); + position: absolute; + width: 100%; + height: 100%; +} +.pgn__searchfield .pgn__searchfield_wrapper { + display: flex; + align-items: center; + width: 100%; + background-color: var(--pgn-color-search-field-form-bg); + border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base); +} +.pgn__searchfield .pgn__searchfield_wrapper:hover, .pgn__searchfield .pgn__searchfield_wrapper:active { + border-color: var(--pgn-color-search-field-border-interaction); +} +.pgn__searchfield__button.btn[type=submit] { + border-radius: 0; + margin-inline-start: var(--pgn-spacing-search-field-margin-button); +} +.pgn__searchfield__iconbutton-submit, +.pgn__searchfield__iconbutton-reset { + flex-shrink: 0; + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 0.25); +} +.pgn__scrollable-body { + display: flex; + flex-direction: column; + position: relative; + flex-grow: 1; + overflow-y: auto; +} +.pgn__scrollable-body::before { + content: ""; + background-color: transparent; + box-shadow: 5px 0 7px 2px var(--pgn-elevation-scrollable-body-box-shadow); + display: block; + height: 2px; + position: sticky; + top: -0.16rem; + z-index: 2; +} +.pgn__scrollable-body::after { + content: ""; + background-color: transparent; + box-shadow: 5px 0 7px 2px var(--pgn-elevation-scrollable-body-box-shadow); + display: block; + height: 2px; + position: sticky; + bottom: -2px; + margin-top: 1.6rem; +} +.pgn__scrollable-body.pgn__scrollable-body-scroll-bottom::before { + opacity: 0.5; +} +.pgn__scrollable-body.pgn__scrollable-body-scroll-bottom::after { + opacity: 0; +} +.pgn__scrollable-body.pgn__scrollable-body-scroll-top::before { + opacity: 0; + z-index: 0; +} +.pgn__scrollable-body.pgn__scrollable-body-scroll-top::after { + opacity: 0.5; +} +.pgn__scrollable-body.pgn__scrollable-body-scroll-top.pgn__scrollable-body-scroll-bottom::before { + opacity: 0; +} +.pgn__scrollable-body.pgn__scrollable-body-scroll-top.pgn__scrollable-body-scroll-bottom::after { + opacity: 0; +} +.pgn__scrollable-body .pgn__scrollable-body-content p { + text-align: start; +} +.pgn__scrollable-body .pgn__scrollable-body-content > *:last-child { + margin-bottom: 0; +} +.pgn__scrollable.pgn__scrollable-scroll-fullscreen .pgn__scrollable-body { + box-shadow: none; +} +.pgn__sheet-skrim { + width: 100%; + height: 100%; + background-color: var(--pgn-color-sheet-skrim-bg); + position: fixed; + top: 0; + left: 0; + z-index: var(--pgn-elevation-sheet-zindex-backdrop); +} +.pgn__sheet-skrim.hidden { + display: none; +} +[dir=rtl] .pgn__sheet-component.right, .pgn__sheet-component.left, .pgn__sheet-component-left { + left: 0; + box-shadow: 8px 0 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow); +} +.pgn__sheet-component.right, [dir=rtl] .pgn__sheet-component.left, .pgn__sheet-component-right { + right: 0; + box-shadow: -8px 0 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow); +} +.pgn__sheet-component { + position: fixed; + padding: 1.25rem; + background-color: var(--pgn-color-white); + z-index: var(--pgn-elevation-sheet-zindex-main); +} +.pgn__sheet-component.pgn__sheet__dark { + background-color: var(--pgn-color-dark-500); + color: var(--pgn-color-light-300); +} +.pgn__sheet-component.bottom { + bottom: 0; + box-shadow: 0 -8px 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow); +} +.pgn__sheet-component.top { + top: 0; + box-shadow: 0 8px 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow); +} +[dir=rtl] .pgn__sheet-component.left { + left: auto; +} +[dir=rtl] .pgn__sheet-component.right { + right: auto; +} +.pgn__sheet-component.bottom, .pgn__sheet-component.top { + width: 100%; + left: 0; + max-height: 50%; +} +.pgn__sheet-component.left, .pgn__sheet-component.right { + max-width: 272px; + height: 100%; + top: 0; +} +@keyframes spinner-border { + to { + transform: rotate(360deg); + } +} +.spinner-border { + display: inline-block; + width: var(--pgn-size-spinner-base-width); + height: var(--pgn-size-spinner-base-height); + vertical-align: calc(var(--pgn-spacing-vertical-align) * -1); + border: var(--pgn-size-spinner-base-border-width) solid currentcolor; + border-right-color: transparent; + border-radius: 50%; + animation: 0.75s linear infinite spinner-border; +} +.spinner-border-sm { + width: var(--pgn-size-spinner-sm-width); + height: var(--pgn-size-spinner-sm-height); + border-width: var(--pgn-size-spinner-sm-border-width); +} +@keyframes spinner-grow { + 0% { + transform: scale(0); + } + 50% { + opacity: 1; + transform: none; + } +} +.spinner-grow { + display: inline-block; + width: var(--pgn-size-spinner-base-width); + height: var(--pgn-size-spinner-base-height); + vertical-align: calc(var(--pgn-spacing-vertical-align) * -1); + background-color: currentcolor; + border-radius: 50%; + opacity: 0; + animation: 0.75s linear infinite spinner-grow; +} +.spinner-grow-sm { + width: var(--pgn-size-spinner-sm-width); + height: var(--pgn-size-spinner-sm-height); +} +@media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + animation-duration: 1.5s; + } +} +.pgn__stepper-header { + display: flex; + justify-content: center; + align-items: center; + background: var(--pgn-color-stepper-header-bg-base); + padding: var(--pgn-spacing-stepper-header-padding-y) var(--pgn-spacing-stepper-header-padding-x); + min-height: var(--pgn-size-stepper-header-height-min); +} +.pgn__stepper-header .pgn__stepper-header-step-list { + list-style: none; + padding: var(--pgn-spacing-stepper-header-step-list-padding-y) var(--pgn-spacing-stepper-header-step-list-padding-x); + display: flex; + align-items: center; + margin: var(--pgn-spacing-stepper-header-step-list-margin); + flex-grow: 1; + justify-content: center; +} +.pgn__stepper-header .pgn__stepper-header-step-list .pgn__stepper-header-line { + display: block; + height: var(--pgn-typography-spacer-line-height); + background: var(--pgn-color-stepper-header-bg-line); + flex-basis: 80px; + margin: 0 0.5rem; +} +.pgn__stepper-header .pgn__stepper-header-step-list button.pgn__stepper-header-step { + border: var(--pgn-color-stepper-header-step-border); + background-color: var(--pgn-color-stepper-header-bg-base); +} +.pgn__stepper-header .pgn__stepper-header-step { + display: flex; + align-items: center; + color: var(--pgn-color-stepper-header-step-base); + flex-shrink: 1; + min-width: var(--pgn-size-stepper-step-width-min); + padding: var(--pgn-spacing-stepper-header-step-padding); +} +.pgn__stepper-header .pgn__stepper-header-step .pgn__bubble { + margin-inline-end: 0.5rem; + flex-shrink: 0; +} +.pgn__stepper-header .pgn__stepper-header-step .pgn__stepper-header-step-title-description { + min-width: 0; +} +.pgn__stepper-header .pgn__stepper-header-step .pgn__stepper-header-step-title { + white-space: nowrap; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; +} +.pgn__stepper-header .pgn__stepper-header-step .pgn__stepper-header-step-description { + font-size: var(--pgn-typography-font-size-xs); +} +.pgn__stepper-header .pgn__stepper-header-step.pgn__stepper-header-step-active ~ .pgn__stepper-header-step { + color: var(--pgn-color-stepper-header-step-bg-active); +} +.pgn__stepper-header .pgn__stepper-header-step.pgn__stepper-header-step-has-error .pgn__bubble { + background: transparent; + box-shadow: inset 0 0 0 var(--pgn-size-stepper-step-bubble-error-shadow-width) var(--pgn-color-stepper-header-step-bubble-error); +} +.pgn__stepper-header .pgn__stepper-header-step.pgn__stepper-header-step-has-error .pgn__bubble * { + color: var(--pgn-color-stepper-header-step-bubble-error); +} +.pgn__stepper-header .pgn__stepper-header-step.pgn__stepper-header-step-has-error .pgn__stepper-header-step-description { + color: var(--pgn-color-stepper-header-step-description-error); +} +.pgn__stateful-btn-icon { + margin-inline-end: 0.5em; + margin-left: -0.25em; +} +[dir=rtl] .pgn__stateful-btn-icon { + margin-right: -0.25em; + margin-left: 0.5rem; +} +.pgn__stateful-btn-state-pending { + opacity: 1 !important; +} +.tooltip { + position: absolute; + z-index: var(--pgn-elevation-tooltip-zindex); + display: block; + margin: var(--pgn-spacing-tooltip-margin); + font-family: var(--pgn-typography-font-family-base); + font-style: normal; + font-weight: var(--pgn-typography-font-weight-normal); + line-height: var(--pgn-typography-line-height-base); + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + white-space: normal; + word-spacing: normal; + line-break: auto; + font-size: var(--pgn-typography-tooltip-font-size); + word-wrap: break-word; + opacity: 0; + filter: var(--pgn-elevation-tooltip-box-shadow); +} +.tooltip.show { + opacity: var(--pgn-other-tooltip-opacity); +} +.tooltip .arrow { + position: absolute; + display: block; + width: var(--pgn-size-tooltip-arrow-width); + height: var(--pgn-size-tooltip-arrow-height); +} +.tooltip .arrow::before { + position: absolute; + content: ""; + border-color: transparent; + border-style: solid; +} +.bs-tooltip-top, .bs-tooltip-auto[x-placement^=top] { + padding: var(--pgn-size-tooltip-arrow-height) 0; +} +.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^=top] .arrow { + bottom: 0; +} +.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before { + top: 0; + border-width: var(--pgn-size-tooltip-arrow-height) calc(var(--pgn-size-tooltip-arrow-width) * 0.5) 0; + border-top-color: var(--pgn-color-tooltip-arrow-base); +} +.bs-tooltip-right, .bs-tooltip-auto[x-placement^=right] { + padding: 0 var(--pgn-size-tooltip-arrow-height); +} +.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^=right] .arrow { + left: 0; + width: var(--pgn-size-tooltip-arrow-height); + height: var(--pgn-size-tooltip-arrow-width); +} +.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before { + right: 0; + border-width: calc(var(--pgn-size-tooltip-arrow-width) * 0.5) var(--pgn-size-tooltip-arrow-height) calc(var(--pgn-size-tooltip-arrow-width) * 0.5) 0; + border-right-color: var(--pgn-color-tooltip-arrow-base); +} +.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^=bottom] { + padding: var(--pgn-size-tooltip-arrow-height) 0; +} +.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^=bottom] .arrow { + top: 0; +} +.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before { + bottom: 0; + border-width: 0 calc(var(--pgn-size-tooltip-arrow-width) * 0.5) var(--pgn-size-tooltip-arrow-height); + border-bottom-color: var(--pgn-color-tooltip-arrow-base); +} +.bs-tooltip-left, .bs-tooltip-auto[x-placement^=left] { + padding: 0 var(--pgn-size-tooltip-arrow-height); +} +.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^=left] .arrow { + right: 0; + width: var(--pgn-size-tooltip-arrow-height); + height: var(--pgn-size-tooltip-arrow-width); +} +.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before { + left: 0; + border-width: calc(var(--pgn-size-tooltip-arrow-width) * 0.5) 0 calc(var(--pgn-size-tooltip-arrow-width) * 0.5) var(--pgn-size-tooltip-arrow-height); + border-left-color: var(--pgn-color-tooltip-arrow-base); +} +.tooltip-inner { + max-width: var(--pgn-size-tooltip-max-width); + padding: var(--pgn-spacing-tooltip-padding-y) var(--pgn-spacing-tooltip-padding-x); + color: var(--pgn-color-tooltip-text); + text-align: center; + background-color: var(--pgn-color-tooltip-bg-base); + border-radius: var(--pgn-size-tooltip-border-radius); +} +.tooltip-light .tooltip-inner { + color: var(--pgn-color-tooltip-light); + background-color: var(--pgn-color-tooltip-bg-light); +} +.tooltip-light.bs-tooltip-top .arrow::before, .tooltip-light.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: var(--pgn-color-tooltip-arrow-light); +} +.tooltip-light.bs-tooltip-right .arrow::before, .tooltip-light.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: var(--pgn-color-tooltip-arrow-light); +} +.tooltip-light.bs-tooltip-bottom .arrow::before, .tooltip-light.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: var(--pgn-color-tooltip-arrow-light); +} +.tooltip-light.bs-tooltip-left .arrow::before, .tooltip-light.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: var(--pgn-color-tooltip-arrow-light); +} +.pgn__data-table-wrapper { + font-size: var(--pgn-typography-font-size-sm); + border-radius: var(--pgn-size-border-radius-base); + background-color: var(--pgn-color-data-table-bg-base); + box-shadow: var(--pgn-elevation-data-table-box-shadow); +} +.pgn__data-table-wrapper.hide-shadow { + box-shadow: none; +} +.pgn__data-table-wrapper > :first-child { + border-top-left-radius: var(--pgn-size-border-radius-base); + border-top-right-radius: var(--pgn-size-border-radius-base); +} +.pgn__data-table-wrapper > :last-child { + border-bottom-left-radius: var(--pgn-size-border-radius-base); + border-bottom-right-radius: var(--pgn-size-border-radius-base); +} +.pgn__bulk-actions, +.pgn__table-actions { + display: flex; +} +.pgn__bulk-actions .pgn__data-table__visible-actions, +.pgn__table-actions .pgn__data-table__visible-actions { + margin-inline-start: var(--pgn-spacing-spacer-2); +} +.pgn__bulk-actions .pgn__data-table__visible-actions .btn, +.pgn__table-actions .pgn__data-table__visible-actions .btn { + margin-inline-start: var(--pgn-spacing-spacer-2); +} +.pgn__bulk-actions .pgn__data-table__visible-actions .btn:first-child, +.pgn__table-actions .pgn__data-table__visible-actions .btn:first-child { + margin-inline-start: 0; +} +.pgn__data-table-dataview-toggle { + flex: auto; +} +.pgn__data-table-actions-right { + display: flex; + align-items: center; +} +.pgn__data-table-actions-right-toggle-bottom { + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + width: 100%; +} +.pgn__data-table-actions-right-toggle-bottom .pgn__data-table-toggle { + width: 100%; + display: flex; + align-items: center; + margin-top: var(--pgn-spacing-spacer-4); +} +.pgn__data-table-actions-right-toggle-bottom .pgn__icon-button-toggle__container { + justify-content: flex-end; +} +.pgn__data-table-container { + width: 100%; + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + position: relative; +} +.pgn__data-table-container.is-loading::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--pgn-color-data-table-bg-is-loading); + z-index: 1; +} +.pgn__data-table-layout-wrapper { + display: flex; + align-items: flex-start; +} +@media (max-width: 1400px) { + .pgn__data-table-layout-wrapper { + overflow-x: scroll; + } +} +@media (--pgn-size-breakpoint-max-width-xl) { + .pgn__data-table-layout-wrapper { + overflow-x: scroll; + } +} +.pgn__data-table-layout-wrapper .pgn__data-table-layout-sidebar { + background-color: var(--pgn-color-data-table-bg-base); + border-radius: var(--pgn-size-border-radius-base); + box-shadow: var(--pgn-elevation-data-table-box-shadow); + padding: var(--pgn-spacing-data-table-padding-small); + margin-right: var(--pgn-spacing-spacer-4); + flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width); +} +.pgn__data-table-layout-wrapper .pgn__data-table-side-filters .pgn__data-table-side-filters-title { + margin-bottom: var(--pgn-spacing-spacer-3); + text-align: start; +} +.pgn__data-table-layout-wrapper .pgn__data-table-side-filters .pgn__data-table-side-filters-status { + margin-bottom: var(--pgn-spacing-spacer-2); + display: flex; + justify-content: flex-end; +} +.pgn__data-table-layout-wrapper .pgn__data-table-side-filters .pgn__data-table-side-filters-item .pgn__form-checkbox { + align-items: center; +} +.pgn__data-table-layout-wrapper .pgn__data-table-layout-main { + flex-grow: 1; +} +.pgn__data-table { + width: 100%; +} +.pgn__data-table.is-striped tr:nth-child(even) { + background-color: var(--pgn-color-light-200); +} +.pgn__data-table th { + background-color: var(--pgn-color-light-300); + padding: var(--pgn-spacing-data-table-padding-cell); + text-align: start; +} +.pgn__data-table td { + padding: var(--pgn-spacing-data-table-padding-cell); + line-height: 24px; + text-align: start; +} +.pgn__data-table tr.is-selected { + background-color: var(--pgn-color-info-100) !important; +} +.pgn__data-table-cell-wrap { + max-width: 20vw; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; +} +.pgn__data-table-empty { + padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y); +} +.pgn__data-table-actions { + display: flex; + justify-content: space-between; + padding-bottom: var(--pgn-spacing-data-table-padding-small); +} +.pgn__data-table-status-bar { + padding: var(--pgn-spacing-data-table-padding-y) var(--pgn-spacing-data-table-padding-x); +} +.pgn__data-table-filters { + display: flex; +} +.pgn__data-table-filters-breakout-filter { + margin-inline-end: var(--pgn-spacing-spacer-2); +} +.pgn__data-table-filters-dropdown-item { + padding: var(--pgn-spacing-data-table-padding-small) 14px; + min-width: 15em; +} +.pgn__data-table-filters-dropdown-item .pgn__form-checkbox { + align-items: center; +} +.pgn__data-table-status { + display: flex; + justify-content: space-between; + align-items: center; +} +.pgn__data-table-footer { + display: flex; + justify-content: space-between; + padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y); + align-items: center; + border-top: var(--pgn-size-data-table-border) solid var(--pgn-color-data-table-border); +} +[dir=rtl] .pgn__data-table-footer .btn-icon .pgn__icon { + transform: scale(-1); +} +.pgn__data-table-pagination { + display: flex; +} +.pgn__data-table-pagination .pgn__page-count { + align-self: var(--pgn-spacing-data-table-footer-position); +} +.pgn__data-table-pagination-dropdown { + overflow-y: auto; + max-height: var(--pgn-size-data-table-dropdown-pagination-max-height); + min-width: var(--pgn-size-data-table-dropdown-pagination-min-width); +} +.pgn__data-table-pagination-dropdown a { + text-align: center; +} +.pgn__checkbox-filter-label { + font-weight: var(--pgn-typography-font-weight-bold); +} +.pgn__checkbox-filter { + display: flex; +} +.pgn__checkbox-filter input .form-check-input { + margin-top: 0.36rem; +} +[dir=rtl] .pgn__checkbox-filter .form-check { + padding-left: 0; + padding-right: 1.25rem; +} +[dir=rtl] .pgn__checkbox-filter .form-check .form-check-input { + margin-left: 0; + margin-right: -1.25rem; +} +.pgn__dropdown-filter-checkbox-group { + margin-left: 0.75rem; + margin-right: 0.75rem; +} +.pgn__dropdown-filter-checkbox-group input .form-check-input { + margin-top: 0.36rem; +} +.pgn__data-table-card-view { + padding: 0 var(--pgn-spacing-data-table-padding-x); +} +.pgn__data-table-card-view .pgn__data-table-card-view-default-skeleton-card-section { + margin-top: var(--pgn-spacing-spacer-2); +} +.pgn__data-table__action-btn { + margin-left: var(--pgn-spacing-spacer-2); +} +.pgn__data-table__action-btn:first-child { + margin-left: 0; +} +.pgn__data-table-spinner { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + overflow: hidden; +} +.pgn__data-table__overflow-actions-menu { + background: var(--pgn-color-white); + padding: var(--pgn-spacing-spacer-2); + box-shadow: var(--pgn-elevation-box-shadow-level-1); + border-radius: 4px; +} +.pgn__data-table__selectable-card { + display: flex; + align-items: flex-start; + flex-grow: 1; +} +.pgn__data-table__selectable-card > :first-child { + height: 100%; +} +.pgn__data-table__selectable-card.selection-right > :first-child { + margin-right: var(--pgn-spacing-spacer-2); +} +[dir=rtl] .pgn__data-table__selectable-card.selection-right > :first-child { + margin-left: var(--pgn-spacing-spacer-2); + margin-right: 0; +} +.pgn__data-table__selectable-card.selection-left { + flex-direction: row-reverse; +} +.pgn__data-table__controlled-select { + display: flex; + align-content: center; + padding: var(--pgn-spacing-spacer-1); +} +.pgn-transition-replace-group { + transition: height 300ms ease; + text-align: start; +} +.pgn__transition-replace-enter { + opacity: 0; +} +.pgn__transition-replace-enter-active { + opacity: 1; + z-index: 1; + transition: opacity 300ms ease; +} +.pgn__transition-replace-exit { + opacity: 1; +} +.pgn__transition-replace-exit-active { + opacity: 0; + transition: opacity 300ms ease; +} +.form-control.is-invalid ~ .invalid-feedback-nodanger { + color: var(--pgn-color-body-base); +} +.fa-icon-spacing { + padding: 0 5px 0 0; +} +.btn-icon { + width: var(--pgn-size-icon-button-diameter-md); + height: var(--pgn-size-icon-button-diameter-md); + border-radius: 50%; + padding: 0; + display: inline-flex; + justify-content: center; + border: none; + background-color: var(--btn-icon-bg-color, var(--pgn-color-icon-button-bg)); + color: var(--btn-icon-color, var(--pgn-color-icon-button-accent)); +} +.btn-icon.hover, .btn-icon:hover, .btn-icon.active, .btn-icon:active { + background-color: var(--btn-icon-hover-bg-color, inherit); + color: var(--btn-icon-hover-color, inherit); +} +.btn-icon.focus, .btn-icon:focus { + outline: 2px transparent; + background-color: var(--btn-icon-focus-bg-color, var(--pgn-color-icon-button-bg)); + color: var(--btn-icon-focus-color, --pgn-color-icon-button-accent); + box-shadow: var(--btn-icon-box-shadow, none); +} +.btn-icon.btn-icon-sm { + width: var(--pgn-size-icon-button-diameter-sm); + height: var(--pgn-size-icon-button-diameter-sm); +} +.btn-icon.btn-icon-inline { + width: var(--pgn-size-icon-button-diameter-inline); + height: var(--pgn-size-icon-button-diameter-inline); + padding: 1em; + vertical-align: middle; +} +.btn-icon.btn-icon-inline .btn-icon__icon-container { + height: 100%; + width: 100%; + justify-content: center; + align-items: center; +} +.btn-icon .btn-icon__icon-container { + display: inline-flex; + align-self: center; +} +.btn-icon .btn-icon__icon-container .pgn__icon.btn-icon__icon { + height: 1.5rem; + width: 1.5rem; +} +.btn-icon .btn-icon__icon { + height: 1em; + width: 1em; +} +.btn-icon.disabled, .btn-icon:disabled { + opacity: var(--pgn-other-btn-disabled-opacity); + pointer-events: none; +} +.btn-icon.btn-icon-primary { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-primary-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-primary-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-primary-base); + --btn-icon-color: var(--pgn-color-icon-button-text-primary-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-base); +} +.btn-icon.btn-icon-inverse-primary { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-primary-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-primary-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-inverse); +} +.btn-icon.btn-icon-primary-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-primary-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-primary-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-primary-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-primary-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-active); +} +.btn-icon.btn-icon-inverse-primary-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-primary-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-primary-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-inverse-active); +} +.btn-icon.btn-icon-secondary { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-secondary-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-secondary-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-secondary-base); + --btn-icon-color: var(--pgn-color-icon-button-text-secondary-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-base); +} +.btn-icon.btn-icon-inverse-secondary { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-secondary-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-secondary-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-inverse); +} +.btn-icon.btn-icon-secondary-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-secondary-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-secondary-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-secondary-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-secondary-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-active); +} +.btn-icon.btn-icon-inverse-secondary-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-secondary-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-secondary-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-active); +} +.btn-icon.btn-icon-brand { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-brand-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-brand-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-brand-base); + --btn-icon-color: var(--pgn-color-icon-button-text-brand-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-base); +} +.btn-icon.btn-icon-inverse-brand { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-brand-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-brand-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-inverse); +} +.btn-icon.btn-icon-brand-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-brand-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-brand-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-brand-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-brand-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-active); +} +.btn-icon.btn-icon-inverse-brand-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-brand-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-brand-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-inverse-active); +} +.btn-icon.btn-icon-success { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-success-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-success-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-success-base); + --btn-icon-color: var(--pgn-color-icon-button-text-success-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-base); +} +.btn-icon.btn-icon-inverse-success { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-success-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-success-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-success-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-success-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-inverse); +} +.btn-icon.btn-icon-success-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-success-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-success-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-success-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-success-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-active); +} +.btn-icon.btn-icon-inverse-success-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-success-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-success-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-success-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-success-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-inverse-active); +} +.btn-icon.btn-icon-warning { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-warning-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-warning-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-warning-base); + --btn-icon-color: var(--pgn-color-icon-button-text-warning-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-base); +} +.btn-icon.btn-icon-inverse-warning { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-warning-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-warning-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-inverse); +} +.btn-icon.btn-icon-warning-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-warning-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-warning-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-warning-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-warning-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-active); +} +.btn-icon.btn-icon-inverse-warning-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-warning-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-warning-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-inverse-active); +} +.btn-icon.btn-icon-danger { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-danger-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-danger-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-danger-base); + --btn-icon-color: var(--pgn-color-icon-button-text-danger-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-base); +} +.btn-icon.btn-icon-inverse-danger { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-danger-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-danger-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-inverse); +} +.btn-icon.btn-icon-danger-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-danger-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-danger-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-danger-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-danger-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-active); +} +.btn-icon.btn-icon-inverse-danger-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-danger-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-danger-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-inverse-active); +} +.btn-icon.btn-icon-light { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-light-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-light-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-light-base); + --btn-icon-color: var(--pgn-color-icon-button-text-light-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-base); +} +.btn-icon.btn-icon-inverse-light { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-light-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-light-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-light-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-light-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-inverse); +} +.btn-icon.btn-icon-light-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-light-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-light-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-light-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-light-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-active); +} +.btn-icon.btn-icon-inverse-light-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-light-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-light-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-light-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-light-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-inverse-active); +} +.btn-icon.btn-icon-dark { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-dark-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-dark-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-dark-base); + --btn-icon-color: var(--pgn-color-icon-button-text-dark-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-base); +} +.btn-icon.btn-icon-inverse-dark { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-dark-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-dark-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-inverse); +} +.btn-icon.btn-icon-dark-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-dark-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-dark-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-dark-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-dark-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-active); +} +.btn-icon.btn-icon-inverse-dark-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-dark-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-dark-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-inverse-active); +} +.btn-icon.btn-icon-black { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-black-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-black-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-black-base); + --btn-icon-color: var(--pgn-color-icon-button-text-black-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-base); +} +.btn-icon.btn-icon-inverse-black { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-black-inverse-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-black-inverse-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-black-inverse-base); + --btn-icon-color: var(--pgn-color-icon-button-text-black-inverse-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-inverse-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-inverse-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-inverse); +} +.btn-icon.btn-icon-black-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-black-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-black-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-black-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-black-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-active); +} +.btn-icon.btn-icon-inverse-black-active { + --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-black-inverse-active-hover); + --btn-icon-hover-color: var(--pgn-color-icon-button-text-black-inverse-active-hover); + --btn-icon-bg-color: var(--pgn-color-icon-button-bg-black-inverse-active-base); + --btn-icon-color: var(--pgn-color-icon-button-text-black-inverse-active-base); + --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-inverse-active-focus); + --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-inverse-active-focus); + --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-inverse-active); +} +.pgn__icon-button-toggle__container { + display: flex; +} +.pgn__icon-button-toggle__container .btn-icon + .btn-icon { + margin-inline-start: var(--pgn-spacing-spacer-1); +} +.toast { + flex-basis: var(--pgn-size-toast-max-width); + max-width: var(--pgn-size-toast-max-width); + color: var(--pgn-color-toast-base); + background-clip: padding-box; + border: var(--pgn-size-toast-border-width) solid var(--pgn-color-toast-border); + opacity: 0; + font-size: var(--pgn-typography-toast-font-size); + background-color: var(--pgn-color-toast-bg); + box-shadow: var(--pgn-elevation-toast-box-shadow); + margin: 0; + padding: var(--pgn-spacing-spacer-base); + position: relative; + border-radius: var(--pgn-size-toast-border-radius); + z-index: 2; +} +.toast:not(:last-child) { + margin-bottom: var(--pgn-spacing-toast-padding-x); +} +.toast.showing { + opacity: 1; +} +.toast.show { + display: block; + opacity: 1; + display: flex; + flex-direction: column; +} +.toast.hide { + display: none; +} +.toast-header { + display: flex; + align-items: center; + padding: var(--pgn-spacing-toast-padding-y) var(--pgn-spacing-toast-padding-x); + color: var(--pgn-color-toast-header-text); + background-color: var(--pgn-color-toast-header-bg); + background-clip: padding-box; + border-bottom: var(--pgn-size-toast-border-width) solid var(--pgn-color-toast-header-border); + border-top-left-radius: subtract(var(--pgn-size-toast-border-radius), var(--pgn-size-toast-border-width)); + border-top-right-radius: subtract(var(--pgn-size-toast-border-radius), var(--pgn-size-toast-border-width)); +} +.toast-body { + padding: var(--pgn-spacing-toast-padding-x); +} +.toast .toast-header-btn-container { + margin: -0.25rem -0.5rem; + align-self: flex-start; +} +.toast .btn { + margin-top: 0.75rem; + align-self: flex-start; +} +.toast .toast-header { + align-items: center; + border-bottom: 0; + justify-content: space-between; + padding: 0; +} +.toast .toast-header p { + font-size: var(--pgn-typography-font-size-sm); + margin: 0; + padding-right: 0.75rem; +} +.toast .toast-header + .btn { + margin-top: var(--pgn-spacing-spacer-base); +} +@media (max-width: 768px) { + .toast { + max-width: 100%; + } +} +@media (--pgn-size-breakpoint-max-width-sm) { + .toast { + max-width: 100%; + } +} +@media (min-width: 768px) { + .toast { + min-width: var(--pgn-size-toast-max-width); + max-width: var(--pgn-size-toast-max-width); + } +} +@media (--pgn-size-breakpoint-min-width-md) { + .toast { + min-width: var(--pgn-size-toast-max-width); + max-width: var(--pgn-size-toast-max-width); + } +} +.toast-container { + bottom: var(--pgn-spacing-toast-container-gutter-lg); + left: var(--pgn-spacing-toast-container-gutter-lg); + position: fixed; + z-index: 2; +} +[dir=rtl] .toast-container { + right: var(--pgn-spacing-toast-container-gutter-lg); + left: 0; +} +@media (max-width: 768px) { + .toast-container { + bottom: var(--pgn-spacing-toast-container-gutter-sm); + right: var(--pgn-spacing-toast-container-gutter-sm); + left: var(--pgn-spacing-toast-container-gutter-sm); + } + [dir=rtl] .toast-container { + left: var(--pgn-spacing-toast-container-gutter-sm); + right: var(--pgn-spacing-toast-container-gutter-sm); + } +} +@media (--pgn-size-breakpoint-max-width-sm) { + .toast-container { + bottom: var(--pgn-spacing-toast-container-gutter-sm); + right: var(--pgn-spacing-toast-container-gutter-sm); + left: var(--pgn-spacing-toast-container-gutter-sm); + } + [dir=rtl] .toast-container { + left: var(--pgn-spacing-toast-container-gutter-sm); + right: var(--pgn-spacing-toast-container-gutter-sm); + } +} +.pgn__selectable_box-set { + display: grid; + grid-auto-rows: 1fr; + grid-gap: var(--pgn-spacing-selectable-box-box-space); +} +.pgn__selectable_box-set.pgn__selectable_box-set--1 { + grid-template-columns: repeat(1, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--2 { + grid-template-columns: repeat(2, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--3 { + grid-template-columns: repeat(3, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--4 { + grid-template-columns: repeat(4, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--5 { + grid-template-columns: repeat(5, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--6 { + grid-template-columns: repeat(6, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--7 { + grid-template-columns: repeat(7, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--8 { + grid-template-columns: repeat(8, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--9 { + grid-template-columns: repeat(9, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--10 { + grid-template-columns: repeat(10, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--11 { + grid-template-columns: repeat(11, 1fr); +} +.pgn__selectable_box-set.pgn__selectable_box-set--12 { + grid-template-columns: repeat(12, 1fr); +} +.pgn__selectable_box-set > * + * { + margin: 0; +} +.pgn__selectable_box { + position: relative; + height: 100%; + padding: var(--pgn-spacing-selectable-box-padding); + box-shadow: var(--pgn-elevation-box-shadow-level-1); + border-radius: var(--pgn-spacing-selectable-box-border-radius); + text-align: start; + background: var(--pgn-color-white); +} +.pgn__selectable_box:focus-visible { + outline: 1px solid var(--pgn-color-primary-700); +} +.pgn__selectable_box .pgn__form-radio, +.pgn__selectable_box .pgn__form-checkbox { + position: absolute; + top: var(--pgn-spacing-selectable-box-padding); + inset-inline-end: var(--pgn-spacing-selectable-box-padding); +} +.pgn__selectable_box .pgn__form-radio input, +.pgn__selectable_box .pgn__form-checkbox input { + margin-inline-end: 0; +} +.pgn__selectable_box * { + pointer-events: none; +} +.pgn__selectable_box-active { + outline: 2px solid var(--pgn-color-primary-500); +} +.pgn__selectable_box-invalid { + outline: 2px solid var(--pgn-color-danger-300); +} +.pgn__checkpoint { + position: absolute; + background: var(--pgn-color-product-tour-checkpoint-bg); + border-top: var(--pgn-size-product-tour-checkpoint-width-border) solid var(--pgn-color-product-tour-checkpoint-border); + border-radius: var(--pgn-size-border-radius-base); + padding: var(--pgn-spacing-spacer-3-5); + box-shadow: 0 0.25rem 0.5rem var(--pgn-color-product-tour-checkpoint-box-shadow); + z-index: var(--pgn-elevation-product-tour-checkpoint-zindex); + max-width: var(--pgn-size-product-tour-checkpoint-width-max); +} +@media (max-width: 768px) { + .pgn__checkpoint { + min-width: 90%; + max-width: 90%; + } +} +@media (--pgn-size-breakpoint-max-width-sm) { + .pgn__checkpoint { + min-width: 90%; + max-width: 90%; + } +} +.pgn__checkpoint .pgn__checkpoint-action-row { + display: flex; + justify-content: flex-end; +} +.pgn__checkpoint #pgn__checkpoint-arrow, +.pgn__checkpoint #pgn__checkpoint-arrow::before, +.pgn__checkpoint #pgn__checkpoint-arrow::after { + position: absolute; + width: 0; + height: 0; +} +.pgn__checkpoint #pgn__checkpoint-arrow { + visibility: hidden; +} +.pgn__checkpoint #pgn__checkpoint-arrow::before, +.pgn__checkpoint #pgn__checkpoint-arrow::after { + content: ""; + visibility: visible; +} +.pgn__checkpoint .pgn__checkpoint-button_dismiss { + margin-inline-end: var(--pgn-spacing-spacer-2); +} +.pgn__checkpoint .pgn__checkpoint-body { + color: var(--pgn-color-product-tour-checkpoint-body); + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25); + text-align: start; +} +.pgn__checkpoint .pgn__checkpoint-header { + display: flex; + justify-content: space-between; + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5); + align-items: center; +} +.pgn__checkpoint #pgn__checkpoint-title { + font-size: var(--pgn-typography-font-size-h3-base); + margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 0.75); + margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5); +} +.pgn__checkpoint .pgn__checkpoint-page-index { + font-size: var(--pgn-typography-font-size-sm); +} +.pgn__checkpoint[data-popper-placement^=top] > #pgn__checkpoint-arrow { + left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; + bottom: 1px; +} +[dir=rtl] .pgn__checkpoint[data-popper-placement^=top] > #pgn__checkpoint-arrow { + left: var(--pgn-size-product-tour-checkpoint-width-arrow) !important; +} +.pgn__checkpoint[data-popper-placement^=top] > #pgn__checkpoint-arrow::after { + border-bottom: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-top: solid var(--pgn-size-product-tour-checkpoint-arrow-top) var(--pgn-color-product-tour-checkpoint-arrow-border-top); + border-left: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-right: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.1)); + -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.1)); +} +.pgn__checkpoint[data-popper-placement^=bottom] > #pgn__checkpoint-arrow { + top: -36px; + left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; +} +.pgn__checkpoint[data-popper-placement^=bottom] > #pgn__checkpoint-arrow::after { + border-bottom: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-border); + border-top: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-left: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-right: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); +} +.pgn__checkpoint[data-popper-placement^=left] > #pgn__checkpoint-arrow { + top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; + right: 1px; +} +.pgn__checkpoint[data-popper-placement^=left] > #pgn__checkpoint-arrow::after { + border-bottom: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-top: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-left: solid var(--pgn-size-product-tour-checkpoint-arrow-top) var(--pgn-color-product-tour-checkpoint-arrow-border-top); + border-right: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, 0.1)); +} +.pgn__checkpoint[data-popper-placement^=right] > #pgn__checkpoint-arrow { + top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; + left: 1px; +} +.pgn__checkpoint[data-popper-placement^=right] > #pgn__checkpoint-arrow::after { + left: calc(-2 * var(--pgn-size-product-tour-checkpoint-width-arrow)); + border-bottom: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-top: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-left: solid var(--pgn-size-product-tour-checkpoint-arrow-transparent) var(--pgn-color-product-tour-checkpoint-arrow-border-transparent); + border-right: solid var(--pgn-size-product-tour-checkpoint-arrow-top) var(--pgn-color-product-tour-checkpoint-arrow-border-top); + filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, 0.1)); +} +.pgn__sticky { + display: flex; + width: 100%; + position: sticky; +} +.pgn__sticky.pgn__sticky-top { + align-self: self-start; + top: var(--pgn-spacing-sticky-offset); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--0 { + top: 0; +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--1 { + top: calc(var(--pgn-spacing-spacer-base) * 0.25); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--1\.5 { + top: calc(var(--pgn-spacing-spacer-base) * 0.375); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--2 { + top: calc(var(--pgn-spacing-spacer-base) * 0.5); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--2\.5 { + top: calc(var(--pgn-spacing-spacer-base) * 0.75); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--3 { + top: var(--pgn-spacing-spacer-base); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--3\.5 { + top: calc(var(--pgn-spacing-spacer-base) * 1.25); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--4 { + top: calc(var(--pgn-spacing-spacer-base) * 1.5); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--4\.5 { + top: calc(var(--pgn-spacing-spacer-base) * 2); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--5 { + top: calc(var(--pgn-spacing-spacer-base) * 3); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--5\.5 { + top: calc(var(--pgn-spacing-spacer-base) * 4); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-offset--6 { + top: calc(var(--pgn-spacing-spacer-base) * 5); +} +.pgn__sticky.pgn__sticky-top.pgn__sticky-shadow { + box-shadow: var(--pgn-elevation-sticky-shadow-bottom); +} +.pgn__sticky.pgn__sticky-bottom { + align-self: self-end; + bottom: var(--pgn-spacing-sticky-offset); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--0 { + bottom: 0; +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--1 { + bottom: calc(var(--pgn-spacing-spacer-base) * 0.25); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--1\.5 { + bottom: calc(var(--pgn-spacing-spacer-base) * 0.375); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--2 { + bottom: calc(var(--pgn-spacing-spacer-base) * 0.5); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--2\.5 { + bottom: calc(var(--pgn-spacing-spacer-base) * 0.75); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--3 { + bottom: var(--pgn-spacing-spacer-base); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--3\.5 { + bottom: calc(var(--pgn-spacing-spacer-base) * 1.25); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--4 { + bottom: calc(var(--pgn-spacing-spacer-base) * 1.5); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--4\.5 { + bottom: calc(var(--pgn-spacing-spacer-base) * 2); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--5 { + bottom: calc(var(--pgn-spacing-spacer-base) * 3); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--5\.5 { + bottom: calc(var(--pgn-spacing-spacer-base) * 4); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-offset--6 { + bottom: calc(var(--pgn-spacing-spacer-base) * 5); +} +.pgn__sticky.pgn__sticky-bottom.pgn__sticky-shadow { + box-shadow: var(--pgn-elevation-sticky-shadow-top); +} +.pgn__vstack, +.pgn__hstack { + display: flex; + align-self: stretch; + gap: var(--pgn-size-stack-gap); +} +.pgn__vstack.pgn__stack-gap--0, +.pgn__hstack.pgn__stack-gap--0 { + gap: 0; +} +.pgn__vstack.pgn__stack-gap--1, +.pgn__hstack.pgn__stack-gap--1 { + gap: calc(var(--pgn-spacing-spacer-base) * 0.25); +} +.pgn__vstack.pgn__stack-gap--1\.5, +.pgn__hstack.pgn__stack-gap--1\.5 { + gap: calc(var(--pgn-spacing-spacer-base) * 0.375); +} +.pgn__vstack.pgn__stack-gap--2, +.pgn__hstack.pgn__stack-gap--2 { + gap: calc(var(--pgn-spacing-spacer-base) * 0.5); +} +.pgn__vstack.pgn__stack-gap--2\.5, +.pgn__hstack.pgn__stack-gap--2\.5 { + gap: calc(var(--pgn-spacing-spacer-base) * 0.75); +} +.pgn__vstack.pgn__stack-gap--3, +.pgn__hstack.pgn__stack-gap--3 { + gap: var(--pgn-spacing-spacer-base); +} +.pgn__vstack.pgn__stack-gap--3\.5, +.pgn__hstack.pgn__stack-gap--3\.5 { + gap: calc(var(--pgn-spacing-spacer-base) * 1.25); +} +.pgn__vstack.pgn__stack-gap--4, +.pgn__hstack.pgn__stack-gap--4 { + gap: calc(var(--pgn-spacing-spacer-base) * 1.5); +} +.pgn__vstack.pgn__stack-gap--4\.5, +.pgn__hstack.pgn__stack-gap--4\.5 { + gap: calc(var(--pgn-spacing-spacer-base) * 2); +} +.pgn__vstack.pgn__stack-gap--5, +.pgn__hstack.pgn__stack-gap--5 { + gap: calc(var(--pgn-spacing-spacer-base) * 3); +} +.pgn__vstack.pgn__stack-gap--5\.5, +.pgn__hstack.pgn__stack-gap--5\.5 { + gap: calc(var(--pgn-spacing-spacer-base) * 4); +} +.pgn__vstack.pgn__stack-gap--6, +.pgn__hstack.pgn__stack-gap--6 { + gap: calc(var(--pgn-spacing-spacer-base) * 5); +} +.pgn__vstack { + flex: 1 1 auto; + flex-direction: column; +} +.pgn__vstack.pgn__stack-reversed { + flex-direction: column-reverse; +} +.pgn__hstack { + flex-direction: row; + align-items: center; +} +.pgn__hstack.pgn__stack-reversed { + flex-direction: row-reverse; + justify-content: flex-end; +} +.pgn__bubble { + line-height: normal; + min-height: 1.5rem; + min-width: 1.5rem; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: var(--pgn-typography-font-size-xs); + color: var(--pgn-bubble-color, inherit); + background-color: var(--pgn-bubble-bg, transparent); +} +.pgn__bubble:disabled, .pgn__bubble.disabled { + background: var(--pgn-color-gray-500); +} +.pgn__bubble.expandable { + padding: var(--pgn-spacing-bubble-expandable-padding-y) var(--pgn-spacing-bubble-expandable-padding-x); +} +.pgn__bubble-primary { + --pgn-bubble-color: var(--pgn-color-bubble-text-primary); + --pgn-bubble-bg: var(--pgn-color-bubble-bg-primary); +} +.pgn__bubble-success { + --pgn-bubble-color: var(--pgn-color-bubble-text-success); + --pgn-bubble-bg: var(--pgn-color-bubble-bg-success); +} +.pgn__bubble-warning { + --pgn-bubble-color: var(--pgn-color-bubble-text-warning); + --pgn-bubble-bg: var(--pgn-color-bubble-bg-warning); +} +.pgn__bubble-error { + --pgn-bubble-color: var(--pgn-color-bubble-text-error); + --pgn-bubble-bg: var(--pgn-color-bubble-bg-error); +} +.pgn__tabs { + flex-wrap: nowrap; +} +.pgn__tabs > * { + position: relative; +} +.pgn__tabs .pgn__tab-notification { + position: absolute; + top: 0; + right: 0; + min-height: var(--pgn-size-tabs-notification-height); + min-width: var(--pgn-size-tabs-notification-width); + font-size: var(--pgn-typography-tabs-notification-font-size); +} +.pgn__tabs .pgn__tab_more.nav-link { + margin-bottom: 0; + padding: 0; +} +.pgn__tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle { + display: block; + border: none; +} +.pgn__tabs.nav-pills .pgn__tab_more.nav-link { + margin: 0; +} +.pgn__tabs.nav-pills .pgn__tab_more.nav-link .dropdown .dropdown-toggle { + padding: var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y); +} +.pgn__tabs.nav-pills .pgn__tab_more.nav-link .dropdown .dropdown-toggle:focus { + background-color: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); + border-color: var(--pgn-color-tab-more-link-dropdown-toggle-border-focus); + color: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus); +} +.pgn__tabs.nav-pills .pgn__tab_more.nav-link .dropdown .dropdown-toggle:focus.btn.btn-link { + color: var(--pgn-color-tab-more-link-dropdown-toggle-btn-text-focus); + border-color: var(--pgn-color-tab-more-link-dropdown-toggle-btn-border-focus); +} +.pgn__tabs.nav-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle { + color: var(--pgn-color-tab-more-link-dropdown-toggle-text-active); +} +.pgn__tabs.nav-pills .pgn__tab_more.nav-link.active:hover .dropdown .dropdown-toggle { + background-color: var(--pgn-color-tab-more-link-dropdown-toggle-text-hover); +} +.pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link .dropdown .dropdown-toggle { + padding: var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y); + border: none; +} +.pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link .dropdown .dropdown-toggle:focus { + background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); + color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus); +} +.pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle { + color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active); +} +.pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle:hover { + color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover); + background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover); +} +.pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle:focus { + position: relative; + outline: 0; + z-index: 200; +} +.pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle:focus::before { + content: ""; + position: absolute; + top: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1); + right: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1); + bottom: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1); + left: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1); + border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus); + border-radius: var(--pgn-size-nav-tabs-border-radius); +} +.pgn__tabs.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle { + padding: 0.563rem var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y); +} +.pgn__tabs.nav-inverse-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle { + padding: var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y); +} +.pgn__tabs.nav-inverse-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle:hover { + background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover); +} +.pgn__tabs .pgn__tab_invisible { + position: absolute; + left: 0; + pointer-events: none; + visibility: hidden; +} +.pgn__dropzone { + display: flex; + justify-content: center; + align-items: center; + min-height: 200px; + padding: var(--pgn-spacing-dropzone-padding); + border: var(--pgn-spacing-dropzone-border-base) dashed var(--pgn-color-dropzone-border-base); + box-sizing: border-box; + cursor: pointer; +} +.pgn__dropzone:hover, .pgn__dropzone:focus, .pgn__dropzone.pgn__dropzone-validation-error, .pgn__dropzone.pgn__dropzone-active { + border-color: transparent; +} +.pgn__dropzone:hover { + box-shadow: var(--pgn-elevation-dropzone-hover); +} +.pgn__dropzone:focus { + box-shadow: var(--pgn-elevation-dropzone-focus); +} +.pgn__dropzone.pgn__dropzone-validation-error { + box-shadow: var(--pgn-elevation-dropzone-error); +} +.pgn__dropzone.pgn__dropzone-active { + box-shadow: var(--pgn-elevation-dropzone-active); +} +.pgn__dropzone-error-wrapper { + text-align: center; + color: var(--pgn-color-dropzone-error-wrapper); +} +.pgn__dropzone-generic-alert { + width: 100%; + margin-bottom: var(--pgn-spacing-spacer-4); +} +.pgn__dropzone-generic-alert .pgn__alert-message-wrapper .alert-message-content > span { + display: block; +} +.pgn__dropzone__upload-icon-wrapper { + height: 56px; + width: 56px; + background: var(--pgn-color-light-300); + border-radius: 50%; + position: relative; + margin-bottom: var(--pgn-spacing-spacer-4); +} +.pgn__dropzone__upload-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 32px; + width: 32px; +} +.pgn__dropzone__upload-restriction-message { + font-size: var(--pgn-typography-dropzone-restriction-msg-font-size); + color: var(--pgn-color-dropzone-restriction-msg); +} +.pgn__color-picker { + box-shadow: 0 0 3px 1px var(--pgn-color-gray-300); + border: none; + background: linear-gradient(to bottom right, rgb(255, 0, 0) 0%, rgb(255, 154, 0) 17%, rgb(208, 222, 33) 33%, rgb(79, 220, 74) 40%, rgb(28, 127, 238) 75%, rgb(95, 21, 242) 86%, rgb(186, 12, 248) 100%); +} +.pgn__color-picker.pgn__color-picker-sm { + height: var(--pgn-size-color-picker-sm); + width: var(--pgn-size-color-picker-sm); +} +.pgn__color-picker.pgn__color-picker-md { + height: var(--pgn-size-color-picker-md); + width: var(--pgn-size-color-picker-md); +} +.pgn__color-modal { + background: var(--pgn-color-white); + padding-bottom: 0.1rem; + margin-bottom: var(--pgn-spacing-spacer-base); +} +.pgn__color-error { + font-size: 70%; + flex: 1 1 auto; + margin-left: 0.5rem; +} +.pgn__hex-label { + font-weight: bold; + font-size: var(--pgn-typography-font-size-h5-mobile); + padding: 0.5rem; + margin-bottom: 0 !important; +} +.pgn__hex-form { + display: flex; + max-width: 180px; + margin: 5px; + flex-wrap: wrap; +} +.pgn__hex-form div { + display: inline-flex; +} +@media (min-width: 576px) { + .pgn__hex-form .pgn__hex-field { + margin-inline-end: 0; + } +} +@media (--pgn-size-breakpoint-min-width-sm) { + .pgn__hex-form .pgn__hex-field { + margin-inline-end: 0; + } +} +/** + * Do not edit directly, this file was auto-generated. + * See /tokens/README.md for more details. + */ + +:root { + --pgn-size-btn-focus-width: 2px !important; + --pgn-size-input-btn-focus-width: 1px !important; + --pgn-spacing-input-btn-padding-y: 0.5625rem !important; + --pgn-elevation-dropdown-box-shadow: none !important; + --pgn-elevation-modal-content-box-shadow-sm-up-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x: 0 !important; + --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y: 10px !important; + --pgn-elevation-modal-content-box-shadow-sm-up-1-blur: 20px !important; + --pgn-elevation-modal-content-box-shadow-sm-up-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x: 0 !important; + --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y: 8px !important; + --pgn-elevation-modal-content-box-shadow-sm-up-2-blur: 20px !important; + --pgn-elevation-popover-box-shadow: none !important; + --pgn-elevation-tooltip-box-shadow-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-tooltip-box-shadow-1-offset-x: 0 !important; + --pgn-elevation-tooltip-box-shadow-1-offset-y: 2px !important; + --pgn-elevation-tooltip-box-shadow-1-blur: 4px !important; + --pgn-elevation-tooltip-box-shadow-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-tooltip-box-shadow-2-offset-x: 0 !important; + --pgn-elevation-tooltip-box-shadow-2-offset-y: 2px !important; + --pgn-elevation-tooltip-box-shadow-2-blur: 8px !important; + --pgn-elevation-annotation-box-shadow-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-annotation-box-shadow-1-offset-x: 0 !important; + --pgn-elevation-annotation-box-shadow-1-offset-y: 2px !important; + --pgn-elevation-annotation-box-shadow-1-blur: 4px !important; + --pgn-elevation-annotation-box-shadow-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-annotation-box-shadow-2-offset-x: 0 !important; + --pgn-elevation-annotation-box-shadow-2-offset-y: 2px !important; + --pgn-elevation-annotation-box-shadow-2-blur: 8px !important; + --pgn-elevation-btn-box-shadow-base: none !important; + --pgn-elevation-btn-box-shadow-active: none !important; + --pgn-elevation-close-button-text-shadow-offset-x: 0 !important; + --pgn-elevation-close-button-text-shadow-offset-y: 1px !important; + --pgn-elevation-close-button-text-shadow-blur: 0 !important; + --pgn-elevation-code-kbd-box-shadow: none !important; + --pgn-elevation-data-table-box-shadow-color: rgba(0, 0, 0, 0.2) !important; + --pgn-elevation-data-table-box-shadow-offset-x: 0 !important; + --pgn-elevation-data-table-box-shadow-offset-y: 0.0625rem !important; + --pgn-elevation-data-table-box-shadow-blur: 0.125rem !important; + --pgn-elevation-dropzone-hover-spread: 2px !important; + --pgn-elevation-dropzone-hover-offset-x: 0 !important; + --pgn-elevation-dropzone-hover-offset-y: 0 !important; + --pgn-elevation-dropzone-hover-blur: 0 !important; + --pgn-elevation-dropzone-hover-inset: inset !important; + --pgn-elevation-dropzone-focus-spread: 2px !important; + --pgn-elevation-dropzone-focus-offset-x: 0 !important; + --pgn-elevation-dropzone-focus-offset-y: 0 !important; + --pgn-elevation-dropzone-focus-blur: 0 !important; + --pgn-elevation-dropzone-focus-inset: inset !important; + --pgn-elevation-dropzone-active-spread: 2px !important; + --pgn-elevation-dropzone-active-offset-x: 0 !important; + --pgn-elevation-dropzone-active-offset-y: 0 !important; + --pgn-elevation-dropzone-active-blur: 0 !important; + --pgn-elevation-dropzone-active-inset: inset !important; + --pgn-elevation-dropzone-error-spread: 2px !important; + --pgn-elevation-dropzone-error-offset-x: 0 !important; + --pgn-elevation-dropzone-error-offset-y: 0 !important; + --pgn-elevation-dropzone-error-blur: 0 !important; + --pgn-elevation-dropzone-error-inset: inset !important; + --pgn-elevation-form-input-base: none !important; + --pgn-elevation-form-input-focus-spread: 1px !important; + --pgn-elevation-form-input-focus-offset-x: 0 !important; + --pgn-elevation-form-input-focus-offset-y: 0 !important; + --pgn-elevation-form-input-focus-blur: 0 !important; + --pgn-elevation-form-control-indicator-checked-base: none !important; + --pgn-elevation-form-control-indicator-checked-focus-color: rgba(0, 0, 0, 0.1) !important; + --pgn-elevation-form-control-indicator-checked-focus-spread: 4px !important; + --pgn-elevation-form-control-indicator-checked-focus-offset-x: 0 !important; + --pgn-elevation-form-control-indicator-checked-focus-offset-y: 0 !important; + --pgn-elevation-form-control-indicator-checked-focus-blur: 0 !important; + --pgn-elevation-form-control-indicator-active: none !important; + --pgn-elevation-form-control-checkbox-indicator-indeterminate: none !important; + --pgn-elevation-form-control-range-track: none !important; + --pgn-elevation-form-control-range-thumb-base: none !important; + --pgn-elevation-form-control-range-thumb-focus-spread: 0 !important; + --pgn-elevation-form-control-range-thumb-focus-offset-x: 0 !important; + --pgn-elevation-form-control-range-thumb-focus-offset-y: 0.1rem !important; + --pgn-elevation-form-control-range-thumb-focus-blur: 0.25rem !important; + --pgn-elevation-form-control-file-focus-spread: 1px !important; + --pgn-elevation-form-control-file-focus-offset-x: 0 !important; + --pgn-elevation-form-control-file-focus-offset-y: 0 !important; + --pgn-elevation-form-control-file-focus-blur: 0 !important; + --pgn-elevation-form-control-select-border-base: none !important; + --pgn-elevation-form-control-select-border-focus-offset-x: 0 !important; + --pgn-elevation-form-control-select-border-focus-offset-y: 0 !important; + --pgn-elevation-form-control-select-border-focus-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-primary-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-primary-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-primary-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-primary-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-primary-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-primary-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-primary-active: none !important; + --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none !important; + --pgn-elevation-icon-button-box-shadow-secondary-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-secondary-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-secondary-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-secondary-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-secondary-active: none !important; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none !important; + --pgn-elevation-icon-button-box-shadow-brand-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-brand-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-brand-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-brand-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-brand-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-brand-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-brand-active: none !important; + --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none !important; + --pgn-elevation-icon-button-box-shadow-success-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-success-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-success-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-success-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-success-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-success-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-success-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-success-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-success-active: none !important; + --pgn-elevation-icon-button-box-shadow-success-inverse-active: none !important; + --pgn-elevation-icon-button-box-shadow-warning-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-warning-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-warning-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-warning-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-warning-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-warning-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-warning-active: none !important; + --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none !important; + --pgn-elevation-icon-button-box-shadow-danger-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-danger-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-danger-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-danger-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-danger-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-danger-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-danger-active: none !important; + --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none !important; + --pgn-elevation-icon-button-box-shadow-light-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-light-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-light-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-light-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-light-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-light-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-light-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-light-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-light-active: none !important; + --pgn-elevation-icon-button-box-shadow-light-inverse-active: none !important; + --pgn-elevation-icon-button-box-shadow-dark-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-dark-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-dark-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-dark-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-dark-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-dark-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-dark-active: none !important; + --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none !important; + --pgn-elevation-icon-button-box-shadow-black-base-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-black-base-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-black-base-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-black-base-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-black-inverse-offset-x: 0 !important; + --pgn-elevation-icon-button-box-shadow-black-inverse-offset-y: 0 !important; + --pgn-elevation-icon-button-box-shadow-black-inverse-blur: 0 !important; + --pgn-elevation-icon-button-box-shadow-black-inverse-inset: inset !important; + --pgn-elevation-icon-button-box-shadow-black-active: none !important; + --pgn-elevation-icon-button-box-shadow-black-inverse-active: none !important; + --pgn-elevation-image-thumbnail-box-shadow: none !important; + --pgn-elevation-menu-box-shadow-color: rgba(0, 0, 0, 0.3) !important; + --pgn-elevation-menu-box-shadow-offset-x: 0 !important; + --pgn-elevation-menu-box-shadow-offset-y: 0.125rem !important; + --pgn-elevation-menu-box-shadow-blur: 0.25rem !important; + --pgn-elevation-pagination-focus-box-shadow-offset-x: 0 !important; + --pgn-elevation-pagination-focus-box-shadow-offset-y: 0 !important; + --pgn-elevation-pagination-focus-box-shadow-blur: 0 !important; + --pgn-elevation-progress-bar-box-shadow: none !important; + --pgn-elevation-sticky-shadow-top-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-sticky-shadow-top-1-offset-x: 0 !important; + --pgn-elevation-sticky-shadow-top-1-offset-y: -0.5rem !important; + --pgn-elevation-sticky-shadow-top-1-blur: 1rem !important; + --pgn-elevation-sticky-shadow-top-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-sticky-shadow-top-2-offset-x: 0 !important; + --pgn-elevation-sticky-shadow-top-2-offset-y: -0.25rem !important; + --pgn-elevation-sticky-shadow-top-2-blur: 0.625rem !important; + --pgn-elevation-sticky-shadow-bottom-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-sticky-shadow-bottom-1-offset-x: 0 !important; + --pgn-elevation-sticky-shadow-bottom-1-offset-y: 0.5rem !important; + --pgn-elevation-sticky-shadow-bottom-1-blur: 1rem !important; + --pgn-elevation-sticky-shadow-bottom-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-sticky-shadow-bottom-2-offset-x: 0 !important; + --pgn-elevation-sticky-shadow-bottom-2-offset-y: 0.25rem !important; + --pgn-elevation-sticky-shadow-bottom-2-blur: 0.625rem !important; + --pgn-elevation-toast-box-shadow-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-toast-box-shadow-1-offset-x: 0 !important; + --pgn-elevation-toast-box-shadow-1-offset-y: 1.25rem !important; + --pgn-elevation-toast-box-shadow-1-blur: 2.5rem !important; + --pgn-elevation-toast-box-shadow-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-toast-box-shadow-2-offset-x: 0 !important; + --pgn-elevation-toast-box-shadow-2-offset-y: 0.5rem !important; + --pgn-elevation-toast-box-shadow-2-blur: 3rem !important; + --pgn-elevation-input-btn-focus-box-shadow-offset-x: 0 !important; + --pgn-elevation-input-btn-focus-box-shadow-offset-y: 0 !important; + --pgn-elevation-input-btn-focus-box-shadow-blur: 0 !important; + --pgn-elevation-box-shadow-level-1-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-1-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-1-1-offset-y: 0.0625rem !important; + --pgn-elevation-box-shadow-level-1-1-blur: 0.125rem !important; + --pgn-elevation-box-shadow-level-1-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-1-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-1-2-offset-y: 0.0625rem !important; + --pgn-elevation-box-shadow-level-1-2-blur: 0.25rem !important; + --pgn-elevation-box-shadow-level-2-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-2-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-2-1-offset-y: 0.125rem !important; + --pgn-elevation-box-shadow-level-2-1-blur: 0.25rem !important; + --pgn-elevation-box-shadow-level-2-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-2-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-2-2-offset-y: 0.125rem !important; + --pgn-elevation-box-shadow-level-2-2-blur: 0.5rem !important; + --pgn-elevation-box-shadow-level-3-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-3-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-3-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-level-3-1-blur: 0.625rem !important; + --pgn-elevation-box-shadow-level-3-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-3-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-3-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-level-3-2-blur: 1rem !important; + --pgn-elevation-box-shadow-level-4-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-4-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-4-1-offset-y: 0.625rem !important; + --pgn-elevation-box-shadow-level-4-1-blur: 1.25rem !important; + --pgn-elevation-box-shadow-level-4-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-4-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-4-2-offset-y: 0.5rem !important; + --pgn-elevation-box-shadow-level-4-2-blur: 1.25rem !important; + --pgn-elevation-box-shadow-level-5-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-5-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-5-1-offset-y: 1.25rem !important; + --pgn-elevation-box-shadow-level-5-1-blur: 2.5rem !important; + --pgn-elevation-box-shadow-level-5-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-level-5-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-level-5-2-offset-y: 0.5rem !important; + --pgn-elevation-box-shadow-level-5-2-blur: 3rem !important; + --pgn-elevation-box-shadow-base-color: rgba(0, 0, 0, 0.3) !important; + --pgn-elevation-box-shadow-base-offset-x: 0 !important; + --pgn-elevation-box-shadow-base-offset-y: 0.125rem !important; + --pgn-elevation-box-shadow-base-blur: 0.25rem !important; + --pgn-elevation-box-shadow-sm-color: rgba(0, 0, 0, 0.2) !important; + --pgn-elevation-box-shadow-sm-offset-x: 0 !important; + --pgn-elevation-box-shadow-sm-offset-y: 0.0625rem !important; + --pgn-elevation-box-shadow-sm-blur: 0.125rem !important; + --pgn-elevation-box-shadow-lg-color: rgba(0, 0, 0, 0.3) !important; + --pgn-elevation-box-shadow-lg-offset-x: 0 !important; + --pgn-elevation-box-shadow-lg-offset-y: 0.25rem !important; + --pgn-elevation-box-shadow-lg-blur: 0.5rem !important; + --pgn-elevation-box-shadow-down-1-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-1-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-1-1-offset-y: 0.0625rem !important; + --pgn-elevation-box-shadow-down-1-1-blur: 0.125rem !important; + --pgn-elevation-box-shadow-down-1-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-1-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-1-2-offset-y: 0.0625rem !important; + --pgn-elevation-box-shadow-down-1-2-blur: 0.25rem !important; + --pgn-elevation-box-shadow-down-2-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-2-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-2-1-offset-y: 0.125rem !important; + --pgn-elevation-box-shadow-down-2-1-blur: 0.25rem !important; + --pgn-elevation-box-shadow-down-2-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-2-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-2-2-offset-y: 0.125rem !important; + --pgn-elevation-box-shadow-down-2-2-blur: 0.5rem !important; + --pgn-elevation-box-shadow-down-3-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-3-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-3-1-offset-y: 0.5rem !important; + --pgn-elevation-box-shadow-down-3-1-blur: 1rem !important; + --pgn-elevation-box-shadow-down-3-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-3-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-3-2-offset-y: 0.25rem !important; + --pgn-elevation-box-shadow-down-3-2-blur: 0.625rem !important; + --pgn-elevation-box-shadow-down-4-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-4-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-4-1-offset-y: 0.625rem !important; + --pgn-elevation-box-shadow-down-4-1-blur: 1.25rem !important; + --pgn-elevation-box-shadow-down-4-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-4-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-4-2-offset-y: 0.5rem !important; + --pgn-elevation-box-shadow-down-4-2-blur: 1.25rem !important; + --pgn-elevation-box-shadow-down-5-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-5-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-5-1-offset-y: 1.25rem !important; + --pgn-elevation-box-shadow-down-5-1-blur: 2.5rem !important; + --pgn-elevation-box-shadow-down-5-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-down-5-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-down-5-2-offset-y: 0.5rem !important; + --pgn-elevation-box-shadow-down-5-2-blur: 3rem !important; + --pgn-elevation-box-shadow-left-1-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-1-1-offset-x: -0.0625rem !important; + --pgn-elevation-box-shadow-left-1-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-1-1-blur: 0.125rem !important; + --pgn-elevation-box-shadow-left-1-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-1-2-offset-x: -0.0625rem !important; + --pgn-elevation-box-shadow-left-1-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-1-2-blur: 0.25rem !important; + --pgn-elevation-box-shadow-left-2-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-2-1-offset-x: -0.125rem !important; + --pgn-elevation-box-shadow-left-2-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-2-1-blur: 0.25rem !important; + --pgn-elevation-box-shadow-left-2-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-2-2-offset-x: -0.125rem !important; + --pgn-elevation-box-shadow-left-2-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-2-2-blur: 0.5rem !important; + --pgn-elevation-box-shadow-left-3-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-3-1-offset-x: -0.5rem !important; + --pgn-elevation-box-shadow-left-3-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-3-1-blur: 1rem !important; + --pgn-elevation-box-shadow-left-3-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-3-2-offset-x: -0.25rem !important; + --pgn-elevation-box-shadow-left-3-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-3-2-blur: 0.625rem !important; + --pgn-elevation-box-shadow-left-4-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-4-1-offset-x: -0.625rem !important; + --pgn-elevation-box-shadow-left-4-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-4-1-blur: 1.25rem !important; + --pgn-elevation-box-shadow-left-4-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-4-2-offset-x: -0.5rem !important; + --pgn-elevation-box-shadow-left-4-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-4-2-blur: 1.25rem !important; + --pgn-elevation-box-shadow-left-5-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-5-1-offset-x: -1.25rem !important; + --pgn-elevation-box-shadow-left-5-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-5-1-blur: 2.5rem !important; + --pgn-elevation-box-shadow-left-5-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-left-5-2-offset-x: -0.5rem !important; + --pgn-elevation-box-shadow-left-5-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-left-5-2-blur: 3rem !important; + --pgn-elevation-box-shadow-up-1-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-1-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-1-1-offset-y: -0.0625rem !important; + --pgn-elevation-box-shadow-up-1-1-blur: 0.125rem !important; + --pgn-elevation-box-shadow-up-1-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-1-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-1-2-offset-y: -0.0625rem !important; + --pgn-elevation-box-shadow-up-1-2-blur: 0.25rem !important; + --pgn-elevation-box-shadow-up-2-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-2-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-2-1-offset-y: -0.125rem !important; + --pgn-elevation-box-shadow-up-2-1-blur: 0.25rem !important; + --pgn-elevation-box-shadow-up-2-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-2-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-2-2-offset-y: -0.125rem !important; + --pgn-elevation-box-shadow-up-2-2-blur: 0.5rem !important; + --pgn-elevation-box-shadow-up-3-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-3-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-3-1-offset-y: -0.5rem !important; + --pgn-elevation-box-shadow-up-3-1-blur: 1rem !important; + --pgn-elevation-box-shadow-up-3-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-3-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-3-2-offset-y: -0.25rem !important; + --pgn-elevation-box-shadow-up-3-2-blur: 0.625rem !important; + --pgn-elevation-box-shadow-up-4-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-4-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-4-1-offset-y: -0.625rem !important; + --pgn-elevation-box-shadow-up-4-1-blur: 1.25rem !important; + --pgn-elevation-box-shadow-up-4-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-4-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-4-2-offset-y: -0.5rem !important; + --pgn-elevation-box-shadow-up-4-2-blur: 1.25rem !important; + --pgn-elevation-box-shadow-up-5-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-5-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-5-1-offset-y: -1.25rem !important; + --pgn-elevation-box-shadow-up-5-1-blur: 2.5rem !important; + --pgn-elevation-box-shadow-up-5-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-up-5-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-up-5-2-offset-y: -0.5rem !important; + --pgn-elevation-box-shadow-up-5-2-blur: 3rem !important; + --pgn-elevation-box-shadow-right-1-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-1-1-offset-x: 0.0625rem !important; + --pgn-elevation-box-shadow-right-1-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-1-1-blur: 0.125rem !important; + --pgn-elevation-box-shadow-right-1-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-1-2-offset-x: 0.0625rem !important; + --pgn-elevation-box-shadow-right-1-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-1-2-blur: 0.25rem !important; + --pgn-elevation-box-shadow-right-2-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-2-1-offset-x: 0.125rem !important; + --pgn-elevation-box-shadow-right-2-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-2-1-blur: 0.25rem !important; + --pgn-elevation-box-shadow-right-2-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-2-2-offset-x: 0.125rem !important; + --pgn-elevation-box-shadow-right-2-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-2-2-blur: 0.5rem !important; + --pgn-elevation-box-shadow-right-3-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-3-1-offset-x: 0.5rem !important; + --pgn-elevation-box-shadow-right-3-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-3-1-blur: 1rem !important; + --pgn-elevation-box-shadow-right-3-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-3-2-offset-x: 0.25rem !important; + --pgn-elevation-box-shadow-right-3-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-3-2-blur: 0.625rem !important; + --pgn-elevation-box-shadow-right-4-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-4-1-offset-x: 0.625rem !important; + --pgn-elevation-box-shadow-right-4-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-4-1-blur: 1.25rem !important; + --pgn-elevation-box-shadow-right-4-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-4-2-offset-x: 0.5rem !important; + --pgn-elevation-box-shadow-right-4-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-4-2-blur: 1.25rem !important; + --pgn-elevation-box-shadow-right-5-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-5-1-offset-x: 1.25rem !important; + --pgn-elevation-box-shadow-right-5-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-5-1-blur: 2.5rem !important; + --pgn-elevation-box-shadow-right-5-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-right-5-2-offset-x: 0.5rem !important; + --pgn-elevation-box-shadow-right-5-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-right-5-2-blur: 3rem !important; + --pgn-elevation-box-shadow-centered-1-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-1-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-1-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-1-1-blur: 0.125rem !important; + --pgn-elevation-box-shadow-centered-1-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-1-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-1-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-1-2-blur: 0.25rem !important; + --pgn-elevation-box-shadow-centered-2-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-2-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-2-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-2-1-blur: 0.25rem !important; + --pgn-elevation-box-shadow-centered-2-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-2-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-2-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-2-2-blur: 0.5rem !important; + --pgn-elevation-box-shadow-centered-3-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-3-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-3-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-3-1-blur: 0.625rem !important; + --pgn-elevation-box-shadow-centered-3-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-3-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-3-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-3-2-blur: 1rem !important; + --pgn-elevation-box-shadow-centered-4-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-4-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-4-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-4-1-blur: 1.25rem !important; + --pgn-elevation-box-shadow-centered-4-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-4-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-4-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-4-2-blur: 1.25rem !important; + --pgn-elevation-box-shadow-centered-5-1-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-5-1-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-5-1-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-5-1-blur: 2.5rem !important; + --pgn-elevation-box-shadow-centered-5-2-color: rgba(0, 0, 0, 0.15) !important; + --pgn-elevation-box-shadow-centered-5-2-offset-x: 0 !important; + --pgn-elevation-box-shadow-centered-5-2-offset-y: 0 !important; + --pgn-elevation-box-shadow-centered-5-2-blur: 3rem !important; + --pgn-other-form-feedback-tooltip-opacity: .9 !important; + --pgn-other-btn-disabled-opacity: .65 !important; + --pgn-other-carousel-control-opacity-base: .5 !important; + --pgn-other-carousel-control-opacity-hover: .9 !important; + --pgn-other-chip-opacity-disabled: .3 !important; + --pgn-other-content-form-control-select-bg-repeat: no-repeat !important; + --pgn-other-content-form-control-select-bg-position-x: right !important; + --pgn-other-content-form-control-select-bg-position-y: center !important; + --pgn-other-modal-opacity: .5 !important; + --pgn-other-search-field-disabled-opacity: .3 !important; + --pgn-other-tooltip-opacity: 1 !important; + --pgn-other-link-emphasized-hover-darken-percentage: 15% !important; + --pgn-color-btn-bg-outline-brand: inherit !important; + --pgn-color-btn-bg-inverse-outline-brand: #00000000 !important; + --pgn-color-btn-bg-outline-danger: inherit !important; + --pgn-color-btn-bg-inverse-outline-danger: #00000000 !important; + --pgn-color-btn-bg-outline-dark: inherit !important; + --pgn-color-btn-bg-inverse-outline-dark: #00000000 !important; + --pgn-color-btn-bg-outline-info: inherit !important; + --pgn-color-btn-bg-inverse-outline-info: inherit !important; + --pgn-color-btn-bg-outline-light: inherit !important; + --pgn-color-btn-bg-inverse-outline-light: inherit !important; + --pgn-color-btn-bg-outline-primary: #00000000 !important; + --pgn-color-btn-bg-inverse-outline-primary: #00000000 !important; + --pgn-color-btn-bg-outline-secondary: inherit !important; + --pgn-color-btn-bg-inverse-outline-secondary: inherit !important; + --pgn-color-btn-bg-outline-success: inherit !important; + --pgn-color-btn-bg-inverse-outline-success: inherit !important; + --pgn-color-btn-bg-tertiary: #00000000 !important; + --pgn-color-btn-bg-inverse-tertiary: #00000000 !important; + --pgn-color-btn-bg-outline-warning: inherit !important; + --pgn-color-btn-bg-inverse-outline-warning: inherit !important; + --pgn-color-btn-border-inverse-brand: #00000000 !important; + --pgn-color-btn-border-inverse-danger: #00000000 !important; + --pgn-color-btn-border-inverse-dark: #00000000 !important; + --pgn-color-btn-border-inverse-info: #00000000 !important; + --pgn-color-btn-border-inverse-light: #00000000 !important; + --pgn-color-btn-border-inverse-primary: #00000000 !important; + --pgn-color-btn-border-inverse-secondary: #00000000 !important; + --pgn-color-btn-border-inverse-success: #00000000 !important; + --pgn-color-btn-border-tertiary: #00000000 !important; + --pgn-color-btn-border-inverse-tertiary: #00000000 !important; + --pgn-color-btn-border-inverse-warning: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-brand: #00000000 !important; + --pgn-color-btn-hover-border-inverse-brand: #00000000 !important; + --pgn-color-btn-hover-border-inverse-danger: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-danger: #00000000 !important; + --pgn-color-btn-hover-border-inverse-dark: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-dark: #00000000 !important; + --pgn-color-btn-hover-border-inverse-info: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-info: #00000000 !important; + --pgn-color-btn-hover-border-inverse-light: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-light: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-primary: #00000000 !important; + --pgn-color-btn-hover-border-inverse-primary: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000 !important; + --pgn-color-btn-hover-border-inverse-secondary: #00000000 !important; + --pgn-color-btn-hover-border-inverse-success: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-success: #00000000 !important; + --pgn-color-btn-hover-border-tertiary: #00000000 !important; + --pgn-color-btn-hover-border-inverse-tertiary: #00000000 !important; + --pgn-color-btn-hover-border-inverse-warning: #00000000 !important; + --pgn-color-btn-hover-border-inverse-outline-warning: #00000000 !important; + --pgn-color-btn-active-border-inverse-brand: #00000000 !important; + --pgn-color-btn-active-border-inverse-outline-brand: #00000000 !important; + --pgn-color-btn-active-border-inverse-danger: #00000000 !important; + --pgn-color-btn-active-border-inverse-outline-danger: #00000000 !important; + --pgn-color-btn-active-border-inverse-dark: #00000000 !important; + --pgn-color-btn-active-border-inverse-outline-dark: #00000000 !important; + --pgn-color-btn-active-border-inverse-info: #00000000 !important; + --pgn-color-btn-active-border-inverse-outline-info: #00000000 !important; + --pgn-color-btn-active-border-inverse-light: inherit !important; + --pgn-color-btn-active-border-inverse-outline-light: #00000000 !important; + --pgn-color-btn-active-border-inverse-outline-primary: #00000000 !important; + --pgn-color-btn-active-border-inverse-primary: #00000000 !important; + --pgn-color-btn-active-border-inverse-outline-secondary: #00000000 !important; + --pgn-color-btn-active-border-inverse-secondary: #00000000 !important; + --pgn-color-btn-active-border-inverse-success: inherit !important; + --pgn-color-btn-active-border-inverse-outline-success: #00000000 !important; + --pgn-color-btn-active-border-tertiary: #00000000 !important; + --pgn-color-btn-active-border-inverse-tertiary: #00000000 !important; + --pgn-color-btn-active-border-inverse-warning: inherit !important; + --pgn-color-btn-active-border-inverse-outline-warning: #00000000 !important; + --pgn-color-btn-focus-text-outline-dark: inherit !important; + --pgn-color-btn-focus-text-inverse-secondary: inherit !important; + --pgn-color-btn-focus-border-inverse-tertiary: #00000000 !important; + --pgn-color-btn-focus-bg-outline-brand: inherit !important; + --pgn-color-btn-focus-bg-inverse-outline-brand: inherit !important; + --pgn-color-btn-focus-bg-outline-danger: inherit !important; + --pgn-color-btn-focus-bg-inverse-outline-danger: inherit !important; + --pgn-color-btn-focus-bg-outline-dark: inherit !important; + --pgn-color-btn-focus-bg-inverse-outline-dark: inherit !important; + --pgn-color-btn-focus-bg-outline-info: inherit !important; + --pgn-color-btn-focus-bg-inverse-outline-info: inherit !important; + --pgn-color-btn-focus-bg-outline-light: #00000000 !important; + --pgn-color-btn-focus-bg-inverse-outline-light: inherit !important; + --pgn-color-btn-focus-bg-outline-primary: inherit !important; + --pgn-color-btn-focus-bg-inverse-outline-primary: inherit !important; + --pgn-color-btn-focus-bg-outline-secondary: #00000000 !important; + --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit !important; + --pgn-color-btn-focus-bg-outline-success: inherit !important; + --pgn-color-btn-focus-bg-inverse-outline-success: inherit !important; + --pgn-color-btn-focus-bg-tertiary: inherit !important; + --pgn-color-btn-focus-bg-inverse-tertiary: inherit !important; + --pgn-color-btn-focus-bg-outline-warning: inherit !important; + --pgn-color-btn-focus-bg-inverse-outline-warning: inherit !important; + --pgn-color-btn-focus-outline-inverse-outline-warning: inherit !important; + --pgn-color-btn-disabled-text-outline-dark: inherit !important; + --pgn-color-btn-disabled-text-outline-secondary: inherit !important; + --pgn-color-btn-disabled-text-inverse-secondary: inherit !important; + --pgn-color-btn-disabled-bg-outline-brand: inherit !important; + --pgn-color-btn-disabled-bg-outline-danger: inherit !important; + --pgn-color-btn-disabled-bg-inverse-danger: #00000000 !important; + --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit !important; + --pgn-color-btn-disabled-bg-outline-dark: inherit !important; + --pgn-color-btn-disabled-bg-inverse-dark: inherit !important; + --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit !important; + --pgn-color-btn-disabled-bg-outline-info: inherit !important; + --pgn-color-btn-disabled-bg-inverse-info: inherit !important; + --pgn-color-btn-disabled-bg-inverse-outline-info: inherit !important; + --pgn-color-btn-disabled-bg-outline-light: inherit !important; + --pgn-color-btn-disabled-bg-inverse-light: inherit !important; + --pgn-color-btn-disabled-bg-inverse-outline-light: inherit !important; + --pgn-color-btn-disabled-bg-outline-primary: inherit !important; + --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit !important; + --pgn-color-btn-disabled-bg-outline-secondary: inherit !important; + --pgn-color-btn-disabled-bg-inverse-secondary: inherit !important; + --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit !important; + --pgn-color-btn-disabled-bg-outline-success: inherit !important; + --pgn-color-btn-disabled-bg-inverse-success: inherit !important; + --pgn-color-btn-disabled-bg-inverse-outline-success: inherit !important; + --pgn-color-btn-disabled-bg-tertiary: inherit !important; + --pgn-color-btn-disabled-bg-inverse-tertiary: inherit !important; + --pgn-color-btn-disabled-bg-outline-warning: inherit !important; + --pgn-color-btn-disabled-bg-inverse-warning: inherit !important; + --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit !important; + --pgn-color-btn-disabled-border-inverse-danger: #00000000 !important; + --pgn-color-btn-disabled-border-inverse-dark: #00000000 !important; + --pgn-color-btn-disabled-border-inverse-info: #00000000 !important; + --pgn-color-btn-disabled-border-inverse-light: #00000000 !important; + --pgn-color-btn-disabled-border-inverse-primary: #00000000 !important; + --pgn-color-btn-disabled-border-secondary: inherit !important; + --pgn-color-btn-disabled-border-inverse-success: #00000000 !important; + --pgn-color-btn-disabled-border-inverse-outline-success: inherit !important; + --pgn-color-btn-disabled-border-inverse-warning: #00000000 !important; + --pgn-color-card-base: inherit !important; + --pgn-color-code-base: #E83E8CFF !important; + --pgn-color-form-control-label-base: inherit !important; + --pgn-color-icon-button-bg-base: #00000000 !important; + --pgn-color-menu-item-bg: #00000000 !important; + --pgn-color-nav-link-border: #00000000 !important; + --pgn-color-nav-tabs-base-bg-hover: #00000000 !important; + --pgn-color-nav-tabs-base-link-active-bg: #00000000 !important; + --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000 !important; + --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066 !important; + --pgn-color-popover-border: #00000033 !important; + --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000 !important; + --pgn-color-progress-bg: #00000000 !important; + --pgn-color-stepper-header-bg-base: #00000000 !important; + --pgn-color-stepper-header-step-border: none !important; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000 !important; + --pgn-color-toast-base: inherit !important; + --pgn-color-list-group-base: inherit !important; + --pgn-color-mark-bg: #FFF243FF !important; + --pgn-color-white: #FFFFFFFF !important; + --pgn-color-black: #000000FF !important; + --pgn-color-blue: #23419FFF !important; + --pgn-color-red: #C32D3AFF !important; + --pgn-color-green: #178253FF !important; + --pgn-color-yellow: #FFD900FF !important; + --pgn-color-teal: #006DAAFF !important; + --pgn-color-accent-a: #00BBF9FF !important; + --pgn-color-accent-b: #FFEE88FF !important; + --pgn-color-gray-100: #EBEBEBFF !important; + --pgn-color-gray-200: #CCCCCCFF !important; + --pgn-color-gray-300: #ADADADFF !important; + --pgn-color-gray-400: #8F8F8FFF !important; + --pgn-color-gray-600: #5C5C5CFF !important; + --pgn-color-gray-700: #454545FF !important; + --pgn-color-gray-800: #333333FF !important; + --pgn-color-gray-900: #212529FF !important; + --pgn-color-gray-base: #707070FF !important; + --pgn-color-primary-base: #059669FF !important; + --pgn-color-brand-base: #9D0054FF !important; + --pgn-color-light-base: #E1DDDBFF !important; + --pgn-color-dark-base: #273F2FFF !important; + --pgn-border-color-nav-tabs-link-border-hover-top: transparent !important; + --pgn-border-color-nav-tabs-link-border-hover-right: transparent !important; + --pgn-border-color-nav-tabs-link-border-hover-left: transparent !important; + --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y) !important; + --pgn-elevation-close-button-text-shadow-color: var(--pgn-color-white) !important; + --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base) !important; + --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base) !important; + --pgn-elevation-form-control-select-border-focus-spread: var(--pgn-size-input-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-primary-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-primary-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-secondary-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-brand-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-brand-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-success-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-success-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-warning-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-warning-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-danger-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-danger-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-light-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-light-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-dark-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-dark-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-black-base-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-icon-button-box-shadow-black-inverse-spread: var(--pgn-size-btn-focus-width) !important; + --pgn-elevation-pagination-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width) !important; + --pgn-elevation-scrollable-body-box-shadow: #0000008C !important; + --pgn-elevation-input-btn-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width) !important; + --pgn-color-bg-base: var(--pgn-color-white) !important; + --pgn-color-text-50-black: #00000080 !important; + --pgn-color-text-50-white: #FFFFFF80 !important; + --pgn-color-active: var(--pgn-color-white) !important; + --pgn-color-border: var(--pgn-color-gray-200) !important; + --pgn-color-theme-bg-gray: var(--pgn-color-gray-100) !important; + --pgn-color-theme-border-gray: var(--pgn-color-gray-200) !important; + --pgn-color-theme-hover-gray: var(--pgn-color-gray-700) !important; + --pgn-color-theme-active-gray: var(--pgn-color-gray-900) !important; + --pgn-color-alert-title: var(--pgn-color-black) !important; + --pgn-color-alert-content: var(--pgn-color-gray-700) !important; + --pgn-color-annotation-text-success: var(--pgn-color-white) !important; + --pgn-color-annotation-text-warning: var(--pgn-color-black) !important; + --pgn-color-annotation-text-error: var(--pgn-color-white) !important; + --pgn-color-annotation-text-dark: var(--pgn-color-white) !important; + --pgn-color-annotation-bg-warning: var(--pgn-color-accent-b) !important; + --pgn-color-annotation-bg-light: var(--pgn-color-white) !important; + --pgn-color-annotation-bg-dark: var(--pgn-color-dark-base) !important; + --pgn-color-badge-text-primary: #FFFFFFFF !important; + --pgn-color-badge-text-light: #454545FF !important; + --pgn-color-badge-text-dark: #FFFFFFFF !important; + --pgn-color-badge-bg-primary: var(--pgn-color-primary-base) !important; + --pgn-color-badge-bg-light: var(--pgn-color-light-base) !important; + --pgn-color-badge-bg-dark: var(--pgn-color-dark-base) !important; + --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white) !important; + --pgn-color-bubble-text-success: var(--pgn-color-white) !important; + --pgn-color-bubble-text-warning: var(--pgn-color-white) !important; + --pgn-color-bubble-text-error: var(--pgn-color-white) !important; + --pgn-color-bubble-text-primary: var(--pgn-color-white) !important; + --pgn-color-bubble-bg-primary: var(--pgn-color-primary-base) !important; + --pgn-color-btn-text-outline-brand: var(--pgn-color-brand-base) !important; + --pgn-color-btn-text-inverse-brand: var(--pgn-color-brand-base) !important; + --pgn-color-btn-text-inverse-outline-brand: var(--pgn-color-white) !important; + --pgn-color-btn-text-inverse-outline-danger: var(--pgn-color-white) !important; + --pgn-color-btn-text-outline-dark: var(--pgn-color-dark-base) !important; + --pgn-color-btn-text-inverse-dark: var(--pgn-color-dark-base) !important; + --pgn-color-btn-text-inverse-outline-dark: var(--pgn-color-white) !important; + --pgn-color-btn-text-inverse-outline-info: var(--pgn-color-white) !important; + --pgn-color-btn-text-outline-light: var(--pgn-color-light-base) !important; + --pgn-color-btn-text-inverse-light: var(--pgn-color-light-base) !important; + --pgn-color-btn-text-inverse-outline-light: var(--pgn-color-white) !important; + --pgn-color-btn-text-outline-primary: var(--pgn-color-primary-base) !important; + --pgn-color-btn-text-inverse-primary: var(--pgn-color-primary-base) !important; + --pgn-color-btn-text-inverse-outline-primary: var(--pgn-color-white) !important; + --pgn-color-btn-text-inverse-outline-secondary: var(--pgn-color-white) !important; + --pgn-color-btn-text-inverse-outline-success: var(--pgn-color-white) !important; + --pgn-color-btn-text-tertiary: var(--pgn-color-gray-700) !important; + --pgn-color-btn-text-inverse-tertiary: var(--pgn-color-white) !important; + --pgn-color-btn-text-inverse-outline-warning: var(--pgn-color-white) !important; + --pgn-color-btn-bg-brand: var(--pgn-color-brand-base) !important; + --pgn-color-btn-bg-dark: var(--pgn-color-dark-base) !important; + --pgn-color-btn-bg-light: var(--pgn-color-light-base) !important; + --pgn-color-btn-bg-primary: var(--pgn-color-primary-base) !important; + --pgn-color-btn-border-outline-brand: var(--pgn-color-brand-base) !important; + --pgn-color-btn-border-inverse-outline-brand: var(--pgn-color-white) !important; + --pgn-color-btn-border-inverse-outline-danger: var(--pgn-color-white) !important; + --pgn-color-btn-border-outline-dark: var(--pgn-color-dark-base) !important; + --pgn-color-btn-border-inverse-outline-dark: var(--pgn-color-white) !important; + --pgn-color-btn-border-inverse-outline-info: var(--pgn-color-white) !important; + --pgn-color-btn-border-outline-light: var(--pgn-color-light-base) !important; + --pgn-color-btn-border-inverse-outline-light: var(--pgn-color-white) !important; + --pgn-color-btn-border-outline-primary: var(--pgn-color-primary-base) !important; + --pgn-color-btn-border-inverse-outline-primary: var(--pgn-color-white) !important; + --pgn-color-btn-border-inverse-outline-secondary: var(--pgn-color-white) !important; + --pgn-color-btn-border-inverse-outline-success: var(--pgn-color-white) !important; + --pgn-color-btn-border-inverse-outline-warning: var(--pgn-color-white) !important; + --pgn-color-btn-hover-text-tertiary: var(--pgn-color-gray-700) !important; + --pgn-color-btn-hover-text-inverse-tertiary: var(--pgn-color-white) !important; + --pgn-color-btn-hover-bg-inverse-tertiary: #FFFFFF1A !important; + --pgn-color-btn-active-text-tertiary: var(--pgn-color-gray-700) !important; + --pgn-color-btn-active-text-inverse-tertiary: var(--pgn-color-white) !important; + --pgn-color-btn-active-bg-inverse-brand: var(--pgn-color-gray-100) !important; + --pgn-color-btn-active-bg-inverse-danger: var(--pgn-color-gray-100) !important; + --pgn-color-btn-active-bg-inverse-dark: var(--pgn-color-gray-100) !important; + --pgn-color-btn-active-bg-inverse-info: var(--pgn-color-gray-100) !important; + --pgn-color-btn-active-bg-inverse-light: var(--pgn-color-gray-100) !important; + --pgn-color-btn-active-bg-inverse-primary: var(--pgn-color-gray-100) !important; + --pgn-color-btn-active-bg-inverse-secondary: var(--pgn-color-gray-100) !important; + --pgn-color-btn-active-bg-inverse-success: var(--pgn-color-gray-100) !important; + --pgn-color-btn-active-bg-inverse-warning: var(--pgn-color-gray-100) !important; + --pgn-color-btn-focus-border-inverse-brand: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-danger: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-outline-danger: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-dark: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-outline-dark: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-info: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-btn-border-inverse-light) !important; + --pgn-color-btn-focus-border-inverse-primary: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-secondary: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-outline-secondary: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white) !important; + --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary) !important; + --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning) !important; + --pgn-color-btn-focus-outline-inverse-light: var(--pgn-color-white) !important; + --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white) !important; + --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white) !important; + --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white) !important; + --pgn-color-btn-disabled-bg-inverse-brand: var(--pgn-color-white) !important; + --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand) !important; + --pgn-color-btn-disabled-bg-inverse-primary: var(--pgn-color-white) !important; + --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary) !important; + --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary) !important; + --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary) !important; + --pgn-color-card-border-base: #00000020 !important; + --pgn-color-carousel-control-base: var(--pgn-color-white) !important; + --pgn-color-carousel-indicator-active-bg: var(--pgn-color-white) !important; + --pgn-color-carousel-caption: var(--pgn-color-white) !important; + --pgn-color-chip-text-light: var(--pgn-color-black) !important; + --pgn-color-chip-text-dark: var(--pgn-color-white) !important; + --pgn-color-chip-bg-light: var(--pgn-color-white) !important; + --pgn-color-chip-outline-dark: var(--pgn-color-white) !important; + --pgn-color-close-button: var(--pgn-color-black) !important; + --pgn-color-code-kbd-base: var(--pgn-color-white) !important; + --pgn-color-code-kbd-bg: var(--pgn-color-gray-700) !important; + --pgn-color-code-pre: var(--pgn-color-gray-900) !important; + --pgn-color-data-table-bg-is-loading: #FFFFFFB3 !important; + --pgn-color-dropdown-border: #00000026 !important; + --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100) !important; + --pgn-color-dropdown-link-base: var(--pgn-color-gray-900) !important; + --pgn-color-dropdown-link-hover-base: #000000FF !important; + --pgn-color-form-input-base: var(--pgn-color-gray-700) !important; + --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100) !important; + --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100) !important; + --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700) !important; + --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580 !important; + --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100) !important; + --pgn-color-form-control-select-bg-size: var(--pgn-color-gray-100) !important; + --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300) !important; + --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-secondary-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-secondary-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-secondary-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-secondary-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-brand-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-brand-hover: var(--pgn-color-brand-base) !important; + --pgn-color-icon-button-bg-brand-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-brand-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-brand-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-brand-active-base: var(--pgn-color-brand-base) !important; + --pgn-color-icon-button-bg-success-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-success-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-success-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-success-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-warning-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-warning-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-warning-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-warning-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-danger-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-danger-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-danger-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-danger-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-light-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-light-hover: var(--pgn-color-light-base) !important; + --pgn-color-icon-button-bg-light-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-light-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-light-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-light-active-base: var(--pgn-color-light-base) !important; + --pgn-color-icon-button-bg-dark-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-dark-hover: var(--pgn-color-dark-base) !important; + --pgn-color-icon-button-bg-dark-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-dark-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-dark-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-dark-active-base: var(--pgn-color-dark-base) !important; + --pgn-color-icon-button-bg-black-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-black-hover: var(--pgn-color-black) !important; + --pgn-color-icon-button-bg-black-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-black-inverse-base: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-black-inverse-focus: var(--pgn-color-icon-button-bg-base) !important; + --pgn-color-icon-button-bg-black-active-base: var(--pgn-color-black) !important; + --pgn-color-icon-button-text-primary-base: var(--pgn-color-primary-base) !important; + --pgn-color-icon-button-text-brand-base: var(--pgn-color-brand-base) !important; + --pgn-color-icon-button-text-brand-inverse-hover: var(--pgn-color-brand-base) !important; + --pgn-color-icon-button-text-brand-inverse-active-base: var(--pgn-color-brand-base) !important; + --pgn-color-icon-button-text-light-base: var(--pgn-color-light-base) !important; + --pgn-color-icon-button-text-light-inverse-hover: var(--pgn-color-light-base) !important; + --pgn-color-icon-button-text-light-inverse-active-base: var(--pgn-color-light-base) !important; + --pgn-color-icon-button-text-dark-base: var(--pgn-color-dark-base) !important; + --pgn-color-icon-button-text-dark-inverse-hover: var(--pgn-color-dark-base) !important; + --pgn-color-icon-button-text-dark-inverse-active-base: var(--pgn-color-dark-base) !important; + --pgn-color-icon-button-text-black-base: var(--pgn-color-black) !important; + --pgn-color-icon-button-text-black-inverse-hover: var(--pgn-color-black) !important; + --pgn-color-icon-button-text-black-inverse-active-base: var(--pgn-color-black) !important; + --pgn-color-icon-button-accent: var(--pgn-color-white) !important; + --pgn-color-icon-button-black: var(--pgn-color-black) !important; + --pgn-color-image-thumbnail-border: var(--pgn-color-gray-200) !important; + --pgn-color-menu-bg: var(--pgn-color-white) !important; + --pgn-color-menu-item-border: var(--pgn-color-menu-item-bg) !important; + --pgn-color-menu-item-hover-border: var(--pgn-color-menu-item-bg) !important; + --pgn-color-modal-content-border: #00000033 !important; + --pgn-color-modal-backdrop-bg: var(--pgn-color-black) !important; + --pgn-color-nav-link-text-base: var(--pgn-color-gray-700) !important; + --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300) !important; + --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover) !important; + --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover) !important; + --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border) !important; + --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white) !important; + --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover) !important; + --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white) !important; + --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white) !important; + --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base) !important; + --pgn-color-nav-divider: var(--pgn-color-gray-100) !important; + --pgn-color-nav-dark: #FFFFFF80 !important; + --pgn-color-nav-light: #00000080 !important; + --pgn-color-navbar-dark-text: #FFFFFF80 !important; + --pgn-color-navbar-dark-hover: #FFFFFFBF !important; + --pgn-color-navbar-dark-disabled: #FFFFFF40 !important; + --pgn-color-navbar-dark-toggler-border: #FFFFFF1A !important; + --pgn-color-navbar-light-text: #00000080 !important; + --pgn-color-navbar-light-hover: #000000B3 !important; + --pgn-color-navbar-light-active: #000000E6 !important; + --pgn-color-navbar-light-disabled: #0000004D !important; + --pgn-color-navbar-light-toggler-border: #0000001A !important; + --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a) !important; + --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b) !important; + --pgn-color-page-banner-text-dark: var(--pgn-color-white) !important; + --pgn-color-page-banner-text-light: var(--pgn-color-black) !important; + --pgn-color-page-banner-text-accent-a: var(--pgn-color-black) !important; + --pgn-color-page-banner-text-accent-b: var(--pgn-color-black) !important; + --pgn-color-page-banner-text-warning: var(--pgn-color-black) !important; + --pgn-color-pagination-text-inverse: var(--pgn-color-white) !important; + --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100) !important; + --pgn-color-pagination-bg-disabled: var(--pgn-color-white) !important; + --pgn-color-pagination-border-base: var(--pgn-color-gray-200) !important; + --pgn-color-pagination-border-hover: var(--pgn-color-gray-200) !important; + --pgn-color-pagination-border-disabled: var(--pgn-color-gray-100) !important; + --pgn-color-pagination-focus-text: var(--pgn-color-black) !important; + --pgn-color-pagination-dropdown-text-inverse: var(--pgn-color-white) !important; + --pgn-color-popover-header-bg: var(--pgn-color-white) !important; + --pgn-color-popover-header-bg-dark: #808080FF !important; + --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF !important; + --pgn-color-popover-arrow-outer: #0000000D !important; + --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700) !important; + --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base) !important; + --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base) !important; + --pgn-color-product-tour-checkpoint-box-shadow: #0000004D !important; + --pgn-color-progress-bar-base: var(--pgn-color-white) !important; + --pgn-color-progress-bar-bg-base: var(--pgn-color-accent-a) !important; + --pgn-color-search-field-border-interaction: var(--pgn-color-black) !important; + --pgn-color-search-field-border-focus: var(--pgn-color-black) !important; + --pgn-color-search-field-form-bg: var(--pgn-color-white) !important; + --pgn-color-sheet-skrim-bg: #ADADAD80 !important; + --pgn-color-sheet-skrim-component-box-shadow: #00000026 !important; + --pgn-color-stepper-header-bg-line: var(--pgn-color-light-base) !important; + --pgn-color-stepper-header-step-base: var(--pgn-color-primary-base) !important; + --pgn-color-stepper-header-step-bg-base: var(--pgn-color-stepper-header-bg-base) !important; + --pgn-color-tab-more-link-dropdown-toggle-text-focus: var(--pgn-color-white) !important; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus: var(--pgn-color-white) !important; + --pgn-color-toast-bg: var(--pgn-color-gray-700) !important; + --pgn-color-toast-border: #0000001A !important; + --pgn-color-toast-header-text: var(--pgn-color-white) !important; + --pgn-color-toast-header-bg: var(--pgn-color-gray-700) !important; + --pgn-color-toast-header-border: #00000080 !important; + --pgn-color-tooltip-text: var(--pgn-color-white) !important; + --pgn-color-tooltip-light: var(--pgn-color-black) !important; + --pgn-color-tooltip-bg-base: var(--pgn-color-black) !important; + --pgn-color-tooltip-bg-light: var(--pgn-color-white) !important; + --pgn-color-tooltip-arrow-light: var(--pgn-color-white) !important; + --pgn-color-body-base: var(--pgn-color-gray-700) !important; + --pgn-color-headings-base: var(--pgn-color-black) !important; + --pgn-color-hr-border: #0000001A !important; + --pgn-color-list-group-bg-base: var(--pgn-color-white) !important; + --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100) !important; + --pgn-color-list-group-border: #00000020 !important; + --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600) !important; + --pgn-color-list-group-action-base: var(--pgn-color-gray-700) !important; + --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200) !important; + --pgn-color-yiq-light: var(--pgn-color-white) !important; + --pgn-color-gray-500: var(--pgn-color-gray-base) !important; + --pgn-color-primary-100: #D1FAE5FF !important; + --pgn-color-primary-200: #A7F3D0FF !important; + --pgn-color-primary-300: #6EE7B7FF !important; + --pgn-color-primary-400: #34D399FF !important; + --pgn-color-primary-500: var(--pgn-color-primary-base) !important; + --pgn-color-primary-600: #047857FF !important; + --pgn-color-primary-700: #065F46FF !important; + --pgn-color-primary-800: #064E3BFF !important; + --pgn-color-primary-900: #022C22FF !important; + --pgn-color-secondary-base: var(--pgn-color-gray-700) !important; + --pgn-color-brand-100: #F9F0F5FF !important; + --pgn-color-brand-200: #E7BFD4FF !important; + --pgn-color-brand-300: #CE80AAFF !important; + --pgn-color-brand-400: #B6407FFF !important; + --pgn-color-brand-500: var(--pgn-color-brand-base) !important; + --pgn-color-brand-600: #8D004CFF !important; + --pgn-color-brand-700: #7E0043FF !important; + --pgn-color-brand-800: #76003FFF !important; + --pgn-color-brand-900: #6E003BFF !important; + --pgn-color-success-base: var(--pgn-color-green) !important; + --pgn-color-info-base: var(--pgn-color-teal) !important; + --pgn-color-warning-base: var(--pgn-color-yellow) !important; + --pgn-color-danger-base: var(--pgn-color-red) !important; + --pgn-color-light-100: #FDFDFDFF !important; + --pgn-color-light-200: #F8F7F6FF !important; + --pgn-color-light-300: #F0EEEDFF !important; + --pgn-color-light-400: #E9E6E4FF !important; + --pgn-color-light-500: var(--pgn-color-light-base) !important; + --pgn-color-light-600: #CBC7C5FF !important; + --pgn-color-light-700: #B4B1AFFF !important; + --pgn-color-light-800: #A9A6A4FF !important; + --pgn-color-light-900: #9E9B99FF !important; + --pgn-color-dark-100: #F2F3F3FF !important; + --pgn-color-dark-200: #C9CFCBFF !important; + --pgn-color-dark-300: #939F97FF !important; + --pgn-color-dark-400: #5D6F63FF !important; + --pgn-color-dark-500: var(--pgn-color-dark-base) !important; + --pgn-color-dark-600: #23392AFF !important; + --pgn-color-dark-700: #1F3226FF !important; + --pgn-color-dark-800: #1D2F23FF !important; + --pgn-color-dark-900: #1B2C21FF !important; + --pgn-color-action-default-gray-100: #D2D2D2FF !important; + --pgn-color-action-default-gray-200: #B3B3B3FF !important; + --pgn-color-action-default-gray-300: #949494FF !important; + --pgn-color-action-default-gray-400: #767676FF !important; + --pgn-color-action-default-gray-600: #424242FF !important; + --pgn-color-action-default-gray-700: #2B2B2BFF !important; + --pgn-color-action-default-gray-800: #1A1A1AFF !important; + --pgn-color-action-default-gray-900: #0A0C0DFF !important; + --pgn-color-action-default-gray-base: #575757FF !important; + --pgn-color-action-default-primary-base: #051627FF !important; + --pgn-color-action-default-brand-base: #6A0039FF !important; + --pgn-color-action-default-light-base: #CAC3BFFF !important; + --pgn-color-action-default-dark-base: #142018FF !important; + --pgn-color-action-default-accent-a: #0095C6FF !important; + --pgn-color-action-default-accent-b: #FFE755FF !important; + --pgn-elevation-dropzone-active-color: var(--pgn-color-primary-500) !important; + --pgn-elevation-form-input-focus-color: var(--pgn-color-primary-500) !important; + --pgn-elevation-form-control-file-focus-color: var(--pgn-color-primary-500) !important; + --pgn-elevation-icon-button-box-shadow-primary-base-color: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-elevation-icon-button-box-shadow-primary-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-elevation-icon-button-box-shadow-brand-base-color: var(--pgn-color-icon-button-text-brand-base) !important; + --pgn-elevation-icon-button-box-shadow-brand-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-elevation-icon-button-box-shadow-success-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-elevation-icon-button-box-shadow-warning-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-elevation-icon-button-box-shadow-danger-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-elevation-icon-button-box-shadow-light-base-color: var(--pgn-color-icon-button-text-light-base) !important; + --pgn-elevation-icon-button-box-shadow-light-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-elevation-icon-button-box-shadow-dark-base-color: var(--pgn-color-icon-button-text-dark-base) !important; + --pgn-elevation-icon-button-box-shadow-dark-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-elevation-icon-button-box-shadow-black-base-color: var(--pgn-color-icon-button-text-black-base) !important; + --pgn-elevation-icon-button-box-shadow-black-inverse-color: var(--pgn-color-icon-button-accent) !important; + --pgn-other-content-form-control-select-bg-offset-y: var(--pgn-spacing-form-input-padding-y-base) !important; + --pgn-color-bg-active: var(--pgn-color-primary-500) !important; + --pgn-color-disabled: var(--pgn-color-gray-500) !important; + --pgn-color-input-focus: var(--pgn-color-primary-500) !important; + --pgn-color-table-border: var(--pgn-color-border) !important; + --pgn-color-theme-bg-primary: var(--pgn-color-primary-100) !important; + --pgn-color-theme-bg-brand: var(--pgn-color-brand-100) !important; + --pgn-color-theme-bg-light: var(--pgn-color-light-100) !important; + --pgn-color-theme-bg-dark: var(--pgn-color-dark-100) !important; + --pgn-color-theme-border-primary: var(--pgn-color-primary-200) !important; + --pgn-color-theme-border-brand: var(--pgn-color-brand-200) !important; + --pgn-color-theme-border-light: var(--pgn-color-light-200) !important; + --pgn-color-theme-border-dark: var(--pgn-color-dark-200) !important; + --pgn-color-theme-focus-primary: var(--pgn-color-primary-500) !important; + --pgn-color-theme-focus-brand: var(--pgn-color-brand-500) !important; + --pgn-color-theme-focus-light: var(--pgn-color-light-500) !important; + --pgn-color-theme-focus-dark: var(--pgn-color-dark-500) !important; + --pgn-color-theme-focus-gray: var(--pgn-color-gray-500) !important; + --pgn-color-theme-default-primary: var(--pgn-color-primary-500) !important; + --pgn-color-theme-default-brand: var(--pgn-color-brand-500) !important; + --pgn-color-theme-default-light: var(--pgn-color-light-500) !important; + --pgn-color-theme-default-dark: var(--pgn-color-dark-500) !important; + --pgn-color-theme-default-gray: var(--pgn-color-gray-500) !important; + --pgn-color-theme-hover-primary: var(--pgn-color-primary-700) !important; + --pgn-color-theme-hover-brand: var(--pgn-color-brand-700) !important; + --pgn-color-theme-hover-light: var(--pgn-color-light-700) !important; + --pgn-color-theme-hover-dark: var(--pgn-color-dark-700) !important; + --pgn-color-theme-active-primary: var(--pgn-color-primary-900) !important; + --pgn-color-theme-active-brand: var(--pgn-color-brand-900) !important; + --pgn-color-theme-active-light: var(--pgn-color-light-900) !important; + --pgn-color-theme-active-dark: var(--pgn-color-dark-900) !important; + --pgn-color-annotation-text-light: var(--pgn-color-primary-500) !important; + --pgn-color-annotation-bg-success: var(--pgn-color-success-base) !important; + --pgn-color-annotation-bg-error: var(--pgn-color-danger-base) !important; + --pgn-color-avatar-border: var(--pgn-color-light-300) !important; + --pgn-color-badge-text-secondary: #FFFFFFFF !important; + --pgn-color-badge-text-success: #FFFFFFFF !important; + --pgn-color-badge-text-danger: #FFFFFFFF !important; + --pgn-color-badge-text-warning: #454545FF !important; + --pgn-color-badge-text-info: #FFFFFFFF !important; + --pgn-color-badge-bg-secondary: var(--pgn-color-secondary-base) !important; + --pgn-color-badge-bg-success: var(--pgn-color-success-base) !important; + --pgn-color-badge-bg-warning: var(--pgn-color-warning-base) !important; + --pgn-color-badge-bg-danger: var(--pgn-color-danger-base) !important; + --pgn-color-badge-bg-info: var(--pgn-color-info-base) !important; + --pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary) !important; + --pgn-color-badge-focus-light: var(--pgn-color-badge-text-light) !important; + --pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark) !important; + --pgn-color-badge-focus-bg-primary: #051627FF !important; + --pgn-color-badge-focus-bg-light: #CAC3BFFF !important; + --pgn-color-badge-focus-bg-dark: #142018FF !important; + --pgn-color-badge-focus-box-shadow-primary: #0A30550D !important; + --pgn-color-badge-focus-box-shadow-light: #E1DDDB0D !important; + --pgn-color-badge-focus-box-shadow-dark: #273F2F0D !important; + --pgn-color-breadcrumb-base: var(--pgn-color-primary-500) !important; + --pgn-color-breadcrumb-active: var(--pgn-color-gray-500) !important; + --pgn-color-breadcrumb-inverse-active: var(--pgn-color-light-500) !important; + --pgn-color-breadcrumb-inverse-spacer: var(--pgn-color-light-700) !important; + --pgn-color-bubble-bg-success: var(--pgn-color-success-base) !important; + --pgn-color-bubble-bg-warning: var(--pgn-color-warning-base) !important; + --pgn-color-bubble-bg-error: var(--pgn-color-danger-base) !important; + --pgn-color-btn-text-brand: #FFFFFFFF !important; + --pgn-color-btn-text-outline-danger: var(--pgn-color-danger-base) !important; + --pgn-color-btn-text-inverse-danger: var(--pgn-color-danger-base) !important; + --pgn-color-btn-text-dark: #FFFFFFFF !important; + --pgn-color-btn-text-outline-info: var(--pgn-color-info-base) !important; + --pgn-color-btn-text-inverse-info: var(--pgn-color-info-base) !important; + --pgn-color-btn-text-light: #454545FF !important; + --pgn-color-btn-text-primary: #FFFFFFFF !important; + --pgn-color-btn-text-outline-secondary: var(--pgn-color-secondary-base) !important; + --pgn-color-btn-text-inverse-secondary: var(--pgn-color-secondary-base) !important; + --pgn-color-btn-text-outline-success: var(--pgn-color-success-base) !important; + --pgn-color-btn-text-inverse-success: var(--pgn-color-success-base) !important; + --pgn-color-btn-text-outline-warning: var(--pgn-color-warning-base) !important; + --pgn-color-btn-text-inverse-warning: var(--pgn-color-warning-base) !important; + --pgn-color-btn-bg-inverse-brand: #FFFFFFFF !important; + --pgn-color-btn-bg-danger: var(--pgn-color-danger-base) !important; + --pgn-color-btn-bg-inverse-dark: #FFFFFFFF !important; + --pgn-color-btn-bg-info: var(--pgn-color-info-base) !important; + --pgn-color-btn-bg-inverse-light: #454545FF !important; + --pgn-color-btn-bg-inverse-primary: #FFFFFFFF !important; + --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-base) !important; + --pgn-color-btn-bg-success: var(--pgn-color-success-base) !important; + --pgn-color-btn-bg-warning: var(--pgn-color-warning-base) !important; + --pgn-color-btn-border-brand: var(--pgn-color-btn-bg-brand) !important; + --pgn-color-btn-border-outline-danger: var(--pgn-color-danger-base) !important; + --pgn-color-btn-border-dark: var(--pgn-color-btn-bg-dark) !important; + --pgn-color-btn-border-outline-info: var(--pgn-color-info-base) !important; + --pgn-color-btn-border-light: var(--pgn-color-btn-bg-light) !important; + --pgn-color-btn-border-primary: var(--pgn-color-btn-bg-primary) !important; + --pgn-color-btn-border-outline-secondary: var(--pgn-color-secondary-base) !important; + --pgn-color-btn-border-outline-success: var(--pgn-color-success-base) !important; + --pgn-color-btn-border-outline-warning: var(--pgn-color-warning-base) !important; + --pgn-color-btn-hover-text-inverse-brand: #770040FF !important; + --pgn-color-btn-hover-text-inverse-dark: #18271DFF !important; + --pgn-color-btn-hover-text-inverse-light: #D0C9C6FF !important; + --pgn-color-btn-hover-text-inverse-primary: #061D33FF !important; + --pgn-color-btn-hover-bg-outline-brand: var(--pgn-color-brand-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-brand: var(--pgn-color-brand-100) !important; + --pgn-color-btn-hover-bg-outline-dark: var(--pgn-color-dark-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-dark: var(--pgn-color-dark-100) !important; + --pgn-color-btn-hover-bg-outline-light: var(--pgn-color-light-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-light: var(--pgn-color-light-100) !important; + --pgn-color-btn-hover-bg-outline-primary: var(--pgn-color-primary-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-primary: var(--pgn-color-primary-100) !important; + --pgn-color-btn-hover-bg-tertiary: var(--pgn-color-light-500) !important; + --pgn-color-btn-hover-border-outline-brand: var(--pgn-color-brand-900) !important; + --pgn-color-btn-hover-border-outline-dark: var(--pgn-color-dark-900) !important; + --pgn-color-btn-hover-border-outline-light: var(--pgn-color-light-900) !important; + --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-primary-900) !important; + --pgn-color-btn-active-text-inverse-brand: #6A0039FF !important; + --pgn-color-btn-active-text-inverse-dark: #142018FF !important; + --pgn-color-btn-active-text-inverse-light: #CAC3BFFF !important; + --pgn-color-btn-active-text-inverse-primary: #051627FF !important; + --pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500) !important; + --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary) !important; + --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand) !important; + --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand) !important; + --pgn-color-btn-focus-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand) !important; + --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger) !important; + --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark) !important; + --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark) !important; + --pgn-color-btn-focus-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info) !important; + --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light) !important; + --pgn-color-btn-focus-text-inverse-light: var(--pgn-color-btn-text-inverse-light) !important; + --pgn-color-btn-focus-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light) !important; + --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-btn-text-outline-primary) !important; + --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary) !important; + --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary) !important; + --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary) !important; + --pgn-color-btn-focus-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success) !important; + --pgn-color-btn-focus-text-tertiary: var(--pgn-color-btn-text-tertiary) !important; + --pgn-color-btn-focus-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary) !important; + --pgn-color-btn-focus-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning) !important; + --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand) !important; + --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-btn-border-inverse-outline-brand) !important; + --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark) !important; + --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info) !important; + --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light) !important; + --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light) !important; + --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary) !important; + --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary) !important; + --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success) !important; + --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning) !important; + --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand) !important; + --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark) !important; + --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light) !important; + --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary) !important; + --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand) !important; + --pgn-color-btn-focus-outline-inverse-danger: var(--pgn-color-btn-focus-border-inverse-danger) !important; + --pgn-color-btn-focus-outline-inverse-outline-danger: var(--pgn-color-btn-focus-border-inverse-danger) !important; + --pgn-color-btn-focus-outline-inverse-dark: var(--pgn-color-btn-focus-border-inverse-dark) !important; + --pgn-color-btn-focus-outline-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark) !important; + --pgn-color-btn-focus-outline-inverse-info: var(--pgn-color-btn-focus-border-inverse-info) !important; + --pgn-color-btn-focus-outline-light: var(--pgn-color-primary-300) !important; + --pgn-color-btn-focus-outline-inverse-primary: var(--pgn-color-btn-focus-border-inverse-primary) !important; + --pgn-color-btn-focus-outline-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary) !important; + --pgn-color-btn-focus-outline-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary) !important; + --pgn-color-btn-focus-outline-inverse-success: var(--pgn-color-btn-focus-border-inverse-success) !important; + --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500) !important; + --pgn-color-btn-disabled-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand) !important; + --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base) !important; + --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger) !important; + --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark) !important; + --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark) !important; + --pgn-color-btn-disabled-text-inverse-info: var(--pgn-color-info-base) !important; + --pgn-color-btn-disabled-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info) !important; + --pgn-color-btn-disabled-text-inverse-light: var(--pgn-color-btn-text-inverse-light) !important; + --pgn-color-btn-disabled-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light) !important; + --pgn-color-btn-disabled-text-inverse-primary: var(--pgn-color-primary-500) !important; + --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary) !important; + --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary) !important; + --pgn-color-btn-disabled-text-inverse-success: var(--pgn-color-success-base) !important; + --pgn-color-btn-disabled-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success) !important; + --pgn-color-btn-disabled-text-tertiary: var(--pgn-color-btn-text-tertiary) !important; + --pgn-color-btn-disabled-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary) !important; + --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base) !important; + --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning) !important; + --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand) !important; + --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark) !important; + --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light) !important; + --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary) !important; + --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand) !important; + --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand) !important; + --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand) !important; + --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger) !important; + --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark) !important; + --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info) !important; + --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light) !important; + --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary) !important; + --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base) !important; + --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary) !important; + --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning) !important; + --pgn-color-card-bg-base: var(--pgn-color-bg-base) !important; + --pgn-color-card-bg-dark: var(--pgn-color-primary-500) !important; + --pgn-color-card-bg-muted: var(--pgn-color-light-200) !important; + --pgn-color-card-border-focus-base: var(--pgn-color-primary-500) !important; + --pgn-color-card-divider-bg: var(--pgn-color-light-400) !important; + --pgn-color-chip-bg-dark: var(--pgn-color-primary-300) !important; + --pgn-color-chip-border-base: var(--pgn-color-light-800) !important; + --pgn-color-chip-border-focus-selected-dark: var(--pgn-color-chip-outline-dark) !important; + --pgn-color-chip-border-focus-selected-light: var(--pgn-color-dark-500) !important; + --pgn-color-chip-label-base: var(--pgn-color-primary-700) !important; + --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark) !important; + --pgn-color-data-table-bg-base: var(--pgn-color-bg-base) !important; + --pgn-color-data-table-border: var(--pgn-color-light-300) !important; + --pgn-color-dropdown-text: var(--pgn-color-body-base) !important; + --pgn-color-dropdown-header: var(--pgn-color-gray-500) !important; + --pgn-color-dropdown-bg: var(--pgn-color-bg-base) !important; + --pgn-color-dropdown-link-hover-bg: var(--pgn-color-light-300) !important; + --pgn-color-dropdown-link-active-base: var(--pgn-color-active) !important; + --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-500) !important; + --pgn-color-dropzone-border-base: var(--pgn-color-gray-500) !important; + --pgn-color-form-input-placeholder: var(--pgn-color-gray-500) !important; + --pgn-color-form-input-plaintext: var(--pgn-color-body-base) !important; + --pgn-color-form-input-border: var(--pgn-color-gray-500) !important; + --pgn-color-form-input-bg-base: var(--pgn-color-bg-base) !important; + --pgn-color-form-input-group-addon-base: var(--pgn-color-form-input-base) !important; + --pgn-color-form-input-focus-base: var(--pgn-color-form-input-base) !important; + --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled) !important; + --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base) !important; + --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base) !important; + --pgn-color-form-control-indicator-active-base: var(--pgn-color-active) !important; + --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base) !important; + --pgn-color-form-control-select-base: var(--pgn-color-form-input-base) !important; + --pgn-color-form-control-select-indicator-base: var(--pgn-color-theme-hover-gray) !important; + --pgn-color-form-control-file-base: var(--pgn-color-form-input-base) !important; + --pgn-color-form-control-file-bg-disabled: var(--pgn-color-form-input-bg-disabled) !important; + --pgn-color-form-control-file-button-bg: var(--pgn-color-form-input-group-addon-bg) !important; + --pgn-color-form-feedback-valid: var(--pgn-color-success-base) !important; + --pgn-color-form-feedback-invalid: var(--pgn-color-danger-base) !important; + --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-secondary-hover: var(--pgn-color-secondary-base) !important; + --pgn-color-icon-button-bg-secondary-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-secondary-active-base: var(--pgn-color-secondary-base) !important; + --pgn-color-icon-button-bg-secondary-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-secondary-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-secondary-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-brand-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-brand-active-hover: var(--pgn-color-icon-button-bg-brand-active-base) !important; + --pgn-color-icon-button-bg-brand-active-focus: var(--pgn-color-icon-button-bg-brand-active-base) !important; + --pgn-color-icon-button-bg-brand-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-brand-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-brand-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-success-hover: var(--pgn-color-success-base) !important; + --pgn-color-icon-button-bg-success-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-success-active-base: var(--pgn-color-success-base) !important; + --pgn-color-icon-button-bg-success-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-success-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-success-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-warning-hover: var(--pgn-color-warning-base) !important; + --pgn-color-icon-button-bg-warning-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-warning-active-base: var(--pgn-color-warning-base) !important; + --pgn-color-icon-button-bg-warning-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-warning-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-warning-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-danger-hover: var(--pgn-color-danger-base) !important; + --pgn-color-icon-button-bg-danger-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-danger-active-base: var(--pgn-color-danger-base) !important; + --pgn-color-icon-button-bg-danger-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-danger-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-danger-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-light-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-light-active-hover: var(--pgn-color-icon-button-bg-light-active-base) !important; + --pgn-color-icon-button-bg-light-active-focus: var(--pgn-color-icon-button-bg-light-active-base) !important; + --pgn-color-icon-button-bg-light-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-light-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-light-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-dark-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-dark-active-hover: var(--pgn-color-icon-button-bg-dark-active-base) !important; + --pgn-color-icon-button-bg-dark-active-focus: var(--pgn-color-icon-button-bg-dark-active-base) !important; + --pgn-color-icon-button-bg-dark-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-dark-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-dark-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-black-inverse-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-black-active-hover: var(--pgn-color-icon-button-bg-black-active-base) !important; + --pgn-color-icon-button-bg-black-active-focus: var(--pgn-color-icon-button-bg-black-active-base) !important; + --pgn-color-icon-button-bg-black-inverse-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-black-inverse-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-bg-black-inverse-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-primary-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-text-primary-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-text-primary-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-primary-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-primary-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-primary-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-text-primary-inverse-active-hover: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-text-primary-base) !important; + --pgn-color-icon-button-text-secondary-base: var(--pgn-color-secondary-base) !important; + --pgn-color-icon-button-text-secondary-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-secondary-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-secondary-inverse-hover: var(--pgn-color-secondary-base) !important; + --pgn-color-icon-button-text-secondary-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-secondary-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-secondary-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-secondary-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-secondary-inverse-active-base: var(--pgn-color-secondary-base) !important; + --pgn-color-icon-button-text-brand-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-brand-focus: var(--pgn-color-icon-button-text-brand-base) !important; + --pgn-color-icon-button-text-brand-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-brand-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-brand-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-brand-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-brand-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-brand-inverse-active-hover: var(--pgn-color-icon-button-text-brand-inverse-active-base) !important; + --pgn-color-icon-button-text-brand-inverse-active-focus: var(--pgn-color-icon-button-text-brand-inverse-active-base) !important; + --pgn-color-icon-button-text-success-base: var(--pgn-color-success-base) !important; + --pgn-color-icon-button-text-success-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-success-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-success-inverse-hover: var(--pgn-color-success-base) !important; + --pgn-color-icon-button-text-success-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-success-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-success-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-success-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-success-inverse-active-base: var(--pgn-color-success-base) !important; + --pgn-color-icon-button-text-warning-base: var(--pgn-color-warning-base) !important; + --pgn-color-icon-button-text-warning-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-warning-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-warning-inverse-hover: var(--pgn-color-warning-base) !important; + --pgn-color-icon-button-text-warning-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-warning-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-warning-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-warning-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-warning-inverse-active-base: var(--pgn-color-warning-base) !important; + --pgn-color-icon-button-text-danger-base: var(--pgn-color-danger-base) !important; + --pgn-color-icon-button-text-danger-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-danger-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-danger-inverse-hover: var(--pgn-color-danger-base) !important; + --pgn-color-icon-button-text-danger-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-danger-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-danger-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-danger-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-danger-inverse-active-base: var(--pgn-color-danger-base) !important; + --pgn-color-icon-button-text-light-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-light-focus: var(--pgn-color-icon-button-text-light-base) !important; + --pgn-color-icon-button-text-light-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-light-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-light-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-light-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-light-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-light-inverse-active-hover: var(--pgn-color-icon-button-text-light-inverse-active-base) !important; + --pgn-color-icon-button-text-light-inverse-active-focus: var(--pgn-color-icon-button-text-light-inverse-active-base) !important; + --pgn-color-icon-button-text-dark-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-dark-focus: var(--pgn-color-icon-button-text-dark-base) !important; + --pgn-color-icon-button-text-dark-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-dark-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-dark-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-dark-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-dark-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-dark-inverse-active-hover: var(--pgn-color-icon-button-text-dark-inverse-active-base) !important; + --pgn-color-icon-button-text-dark-inverse-active-focus: var(--pgn-color-icon-button-text-dark-inverse-active-base) !important; + --pgn-color-icon-button-text-black-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-black-focus: var(--pgn-color-icon-button-text-black-base) !important; + --pgn-color-icon-button-text-black-inverse-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-black-inverse-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-black-active-base: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-black-active-hover: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-black-active-focus: var(--pgn-color-icon-button-accent) !important; + --pgn-color-icon-button-text-black-inverse-active-hover: var(--pgn-color-icon-button-text-black-inverse-active-base) !important; + --pgn-color-icon-button-text-black-inverse-active-focus: var(--pgn-color-icon-button-text-black-inverse-active-base) !important; + --pgn-color-image-figure-caption: var(--pgn-color-gray-500) !important; + --pgn-color-menu-item-color: var(--pgn-color-body-base) !important; + --pgn-color-menu-item-hover-color: var(--pgn-color-btn-hover-text-tertiary) !important; + --pgn-color-menu-item-focus-bg: var(--pgn-color-light-500) !important; + --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500) !important; + --pgn-color-modal-content-bg: var(--pgn-color-bg-base) !important; + --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400) !important; + --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400) !important; + --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500) !important; + --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300) !important; + --pgn-color-nav-tabs-inverse-link-border-active: var(--pgn-color-nav-tabs-inverse-link-text-base) !important; + --pgn-color-nav-tabs-inverse-link-bg-focus: var(--pgn-color-nav-tabs-inverse-link-text-base) !important; + --pgn-color-nav-tabs-inverse-link-tab-content-color: var(--pgn-color-nav-tabs-inverse-link-text-base) !important; + --pgn-color-nav-pills-base-link-active-text: var(--pgn-color-active) !important; + --pgn-color-nav-pills-inverse-link-text-focus: var(--pgn-color-nav-pills-inverse-link-text-base) !important; + --pgn-color-nav-pills-inverse-link-text-active: var(--pgn-color-primary-500) !important; + --pgn-color-nav-pills-inverse-link-text-hover: var(--pgn-color-nav-pills-inverse-link-text-base) !important; + --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base) !important; + --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300) !important; + --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base) !important; + --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus) !important; + --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base) !important; + --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base) !important; + --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base) !important; + --pgn-color-navbar-dark-active: var(--pgn-color-active) !important; + --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active) !important; + --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active) !important; + --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500) !important; + --pgn-color-page-banner-bg-light: var(--pgn-color-light-400) !important; + --pgn-color-pagination-text-active: var(--pgn-color-active) !important; + --pgn-color-pagination-bg-base: var(--pgn-color-bg-base) !important; + --pgn-color-pagination-focus-base: var(--pgn-color-primary-500) !important; + --pgn-color-popover-bg: var(--pgn-color-bg-base) !important; + --pgn-color-popover-header-text: var(--pgn-color-headings-base) !important; + --pgn-color-popover-body: var(--pgn-color-body-base) !important; + --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300) !important; + --pgn-color-progress-bar-bg-annotated: var(--pgn-color-dark-500) !important; + --pgn-color-progress-bar-border: transparent !important; + --pgn-color-search-field-border-base: var(--pgn-color-gray-500) !important; + --pgn-color-search-field-button-bg-primary: var(--pgn-color-primary-500) !important; + --pgn-color-search-field-button-bg-brand: var(--pgn-color-brand-500) !important; + --pgn-color-stepper-header-step-bg-active: var(--pgn-color-gray-500) !important; + --pgn-color-stepper-header-step-bubble-error: var(--pgn-color-danger-base) !important; + --pgn-color-tab-more-link-dropdown-toggle-btn-text-focus: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus) !important; + --pgn-color-tab-more-link-dropdown-toggle-text-active: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus) !important; + --pgn-color-tab-more-link-dropdown-toggle-bg-focus: var(--pgn-color-primary-500) !important; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500) !important; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus) !important; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300) !important; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus) !important; + --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base) !important; + --pgn-color-body-bg: var(--pgn-color-bg-base) !important; + --pgn-color-link-muted-base: var(--pgn-color-primary-500) !important; + --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500) !important; + --pgn-color-link-brand-base: var(--pgn-color-brand-500) !important; + --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500) !important; + --pgn-color-list-group-active-base: var(--pgn-color-active) !important; + --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base) !important; + --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base) !important; + --pgn-color-list-group-action-active-base: var(--pgn-color-body-base) !important; + --pgn-color-text-muted: var(--pgn-color-gray-500) !important; + --pgn-color-blockquote-small: var(--pgn-color-gray-500) !important; + --pgn-color-secondary-100: #F4F4F4FF !important; + --pgn-color-secondary-200: #D1D1D1FF !important; + --pgn-color-secondary-300: #A2A2A2FF !important; + --pgn-color-secondary-400: #747474FF !important; + --pgn-color-secondary-500: var(--pgn-color-secondary-base) !important; + --pgn-color-secondary-600: #3E3E3EFF !important; + --pgn-color-secondary-700: #373737FF !important; + --pgn-color-secondary-800: #343434FF !important; + --pgn-color-secondary-900: #303030FF !important; + --pgn-color-success-100: #F1F8F5FF !important; + --pgn-color-success-200: #C5E0D4FF !important; + --pgn-color-success-300: #8BC1A9FF !important; + --pgn-color-success-400: #51A17EFF !important; + --pgn-color-success-500: var(--pgn-color-success-base) !important; + --pgn-color-success-600: #15754BFF !important; + --pgn-color-success-700: #126842FF !important; + --pgn-color-success-800: #11623EFF !important; + --pgn-color-success-900: #105B3AFF !important; + --pgn-color-info-100: #F0F6FAFF !important; + --pgn-color-info-200: #BFDBEAFF !important; + --pgn-color-info-300: #80B6D5FF !important; + --pgn-color-info-400: #4092BFFF !important; + --pgn-color-info-500: var(--pgn-color-info-base) !important; + --pgn-color-info-600: #006299FF !important; + --pgn-color-info-700: #005788FF !important; + --pgn-color-info-800: #005280FF !important; + --pgn-color-info-900: #004C77FF !important; + --pgn-color-warning-100: #FFFDF0FF !important; + --pgn-color-warning-200: #FFF6BFFF !important; + --pgn-color-warning-300: #FFEC80FF !important; + --pgn-color-warning-400: #FFE340FF !important; + --pgn-color-warning-500: var(--pgn-color-warning-base) !important; + --pgn-color-warning-600: #E6C300FF !important; + --pgn-color-warning-700: #CCAE00FF !important; + --pgn-color-warning-800: #BFA300FF !important; + --pgn-color-warning-900: #B39800FF !important; + --pgn-color-danger-100: #FBF2F3FF !important; + --pgn-color-danger-200: #F0CBCEFF !important; + --pgn-color-danger-300: #E1969DFF !important; + --pgn-color-danger-400: #D2626BFF !important; + --pgn-color-danger-500: var(--pgn-color-danger-base) !important; + --pgn-color-danger-600: #B02934FF !important; + --pgn-color-danger-700: #9C242EFF !important; + --pgn-color-danger-800: #92222CFF !important; + --pgn-color-danger-900: #892029FF !important; + --pgn-color-action-default-gray-500: #575757FF !important; + --pgn-color-action-default-primary-100: #D1DBE1FF !important; + --pgn-color-action-default-primary-200: #A4B1C0FF !important; + --pgn-color-action-default-primary-300: #677F95FF !important; + --pgn-color-action-default-primary-400: #354A5FFF !important; + --pgn-color-action-default-primary-500: #051627FF !important; + --pgn-color-action-default-primary-600: #04111FFF !important; + --pgn-color-action-default-primary-700: #030C16FF !important; + --pgn-color-action-default-primary-800: #020A13FF !important; + --pgn-color-action-default-primary-900: #02080EFF !important; + --pgn-color-action-default-secondary-base: #2B2B2BFF !important; + --pgn-color-action-default-brand-100: #EACCDDFF !important; + --pgn-color-action-default-brand-200: #D99ABBFF !important; + --pgn-color-action-default-brand-300: #C05B91FF !important; + --pgn-color-action-default-brand-400: #903365FF !important; + --pgn-color-action-default-brand-500: #6A0039FF !important; + --pgn-color-action-default-brand-600: #5A0031FF !important; + --pgn-color-action-default-brand-700: #4B0028FF !important; + --pgn-color-action-default-brand-800: #430024FF !important; + --pgn-color-action-default-brand-900: #3B0020FF !important; + --pgn-color-action-default-success-base: #0F5737FF !important; + --pgn-color-action-default-info-base: #004C77FF !important; + --pgn-color-action-default-warning-base: #CCAE00FF !important; + --pgn-color-action-default-danger-base: #9A232EFF !important; + --pgn-color-action-default-light-100: #E4E4E4FF !important; + --pgn-color-action-default-light-200: #E2DED9FF !important; + --pgn-color-action-default-light-300: #D9D4D1FF !important; + --pgn-color-action-default-light-400: #D2CCC8FF !important; + --pgn-color-action-default-light-500: #CAC3BFFF !important; + --pgn-color-action-default-light-600: #B3ADAAFF !important; + --pgn-color-action-default-light-700: #9B9795FF !important; + --pgn-color-action-default-light-800: #908C8AFF !important; + --pgn-color-action-default-light-900: #85817FFF !important; + --pgn-color-action-default-dark-100: #D7DBDBFF !important; + --pgn-color-action-default-dark-200: #AEB7B1FF !important; + --pgn-color-action-default-dark-300: #78877DFF !important; + --pgn-color-action-default-dark-400: #46534AFF !important; + --pgn-color-action-default-dark-500: #142018FF !important; + --pgn-color-action-default-dark-600: #101913FF !important; + --pgn-color-action-default-dark-700: #0B130EFF !important; + --pgn-color-action-default-dark-800: #0A0F0CFF !important; + --pgn-color-action-default-dark-900: #080C09FF !important; + --pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e") !important; + --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e") !important; + --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; + --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; + --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500) !important; + --pgn-elevation-dropzone-hover-color: var(--pgn-color-info-300) !important; + --pgn-elevation-dropzone-focus-color: var(--pgn-color-info-300) !important; + --pgn-elevation-dropzone-error-color: var(--pgn-color-danger-300) !important; + --pgn-elevation-form-control-range-thumb-focus-color: var(--pgn-color-body-bg) !important; + --pgn-elevation-icon-button-box-shadow-secondary-base-color: var(--pgn-color-icon-button-text-secondary-base) !important; + --pgn-elevation-icon-button-box-shadow-success-base-color: var(--pgn-color-icon-button-text-success-base) !important; + --pgn-elevation-icon-button-box-shadow-warning-base-color: var(--pgn-color-icon-button-text-warning-base) !important; + --pgn-elevation-icon-button-box-shadow-danger-base-color: var(--pgn-color-icon-button-text-danger-base) !important; + --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,") !important; + --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,") !important; + --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e") !important; + --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e") !important; + --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e") !important; + --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,') !important; + --pgn-color-input-btn-focus: var(--pgn-color-bg-active) !important; + --pgn-color-table-caption: var(--pgn-color-text-muted) !important; + --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100) !important; + --pgn-color-theme-bg-success: var(--pgn-color-success-100) !important; + --pgn-color-theme-bg-info: var(--pgn-color-info-100) !important; + --pgn-color-theme-bg-warning: var(--pgn-color-warning-100) !important; + --pgn-color-theme-bg-danger: var(--pgn-color-danger-100) !important; + --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200) !important; + --pgn-color-theme-border-success: var(--pgn-color-success-200) !important; + --pgn-color-theme-border-info: var(--pgn-color-info-200) !important; + --pgn-color-theme-border-warning: var(--pgn-color-warning-200) !important; + --pgn-color-theme-border-danger: var(--pgn-color-danger-200) !important; + --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500) !important; + --pgn-color-theme-focus-success: var(--pgn-color-success-500) !important; + --pgn-color-theme-focus-info: var(--pgn-color-info-500) !important; + --pgn-color-theme-focus-warning: var(--pgn-color-warning-500) !important; + --pgn-color-theme-focus-danger: var(--pgn-color-danger-500) !important; + --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500) !important; + --pgn-color-theme-default-success: var(--pgn-color-success-500) !important; + --pgn-color-theme-default-info: var(--pgn-color-info-500) !important; + --pgn-color-theme-default-warning: var(--pgn-color-warning-500) !important; + --pgn-color-theme-default-danger: var(--pgn-color-danger-500) !important; + --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700) !important; + --pgn-color-theme-hover-success: var(--pgn-color-success-700) !important; + --pgn-color-theme-hover-info: var(--pgn-color-info-700) !important; + --pgn-color-theme-hover-warning: var(--pgn-color-warning-700) !important; + --pgn-color-theme-hover-danger: var(--pgn-color-danger-700) !important; + --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900) !important; + --pgn-color-theme-active-success: var(--pgn-color-success-900) !important; + --pgn-color-theme-active-info: var(--pgn-color-info-900) !important; + --pgn-color-theme-active-warning: var(--pgn-color-warning-900) !important; + --pgn-color-theme-active-danger: var(--pgn-color-danger-900) !important; + --pgn-color-badge-focus-secondary: var(--pgn-color-badge-text-secondary) !important; + --pgn-color-badge-focus-success: var(--pgn-color-badge-text-success) !important; + --pgn-color-badge-focus-warning: var(--pgn-color-badge-text-warning) !important; + --pgn-color-badge-focus-danger: var(--pgn-color-badge-text-danger) !important; + --pgn-color-badge-focus-info: var(--pgn-color-badge-text-info) !important; + --pgn-color-badge-focus-bg-secondary: #2B2B2BFF !important; + --pgn-color-badge-focus-bg-success: #0F5737FF !important; + --pgn-color-badge-focus-bg-danger: #9A232EFF !important; + --pgn-color-badge-focus-bg-warning: #CCAE00FF !important; + --pgn-color-badge-focus-bg-info: #004C77FF !important; + --pgn-color-badge-focus-box-shadow-secondary: #4545450D !important; + --pgn-color-badge-focus-box-shadow-success: #1782530D !important; + --pgn-color-badge-focus-box-shadow-danger: #C32D3A0D !important; + --pgn-color-badge-focus-box-shadow-warning: #FFD9000D !important; + --pgn-color-badge-focus-box-shadow-info: #006DAA0D !important; + --pgn-color-btn-text-danger: #FFFFFFFF !important; + --pgn-color-btn-text-info: #FFFFFFFF !important; + --pgn-color-btn-text-secondary: #FFFFFFFF !important; + --pgn-color-btn-text-success: #FFFFFFFF !important; + --pgn-color-btn-text-warning: #454545FF !important; + --pgn-color-btn-bg-inverse-danger: #FFFFFFFF !important; + --pgn-color-btn-bg-inverse-info: #FFFFFFFF !important; + --pgn-color-btn-bg-inverse-secondary: #FFFFFFFF !important; + --pgn-color-btn-bg-inverse-success: #FFFFFFFF !important; + --pgn-color-btn-bg-inverse-warning: #454545FF !important; + --pgn-color-btn-border-danger: var(--pgn-color-btn-bg-danger) !important; + --pgn-color-btn-border-info: var(--pgn-color-btn-bg-info) !important; + --pgn-color-btn-border-secondary: var(--pgn-color-btn-bg-secondary) !important; + --pgn-color-btn-border-success: var(--pgn-color-btn-bg-success) !important; + --pgn-color-btn-border-warning: var(--pgn-color-btn-bg-warning) !important; + --pgn-color-btn-hover-text-outline-brand: var(--pgn-color-theme-hover-brand) !important; + --pgn-color-btn-hover-text-inverse-outline-brand: var(--pgn-color-theme-hover-brand) !important; + --pgn-color-btn-hover-text-inverse-danger: #A42631FF !important; + --pgn-color-btn-hover-text-outline-dark: var(--pgn-color-theme-hover-dark) !important; + --pgn-color-btn-hover-text-inverse-outline-dark: var(--pgn-color-theme-hover-dark) !important; + --pgn-color-btn-hover-text-inverse-info: #005484FF !important; + --pgn-color-btn-hover-text-outline-light: var(--pgn-color-theme-hover-light) !important; + --pgn-color-btn-hover-text-inverse-outline-light: var(--pgn-color-theme-hover-light) !important; + --pgn-color-btn-hover-text-outline-primary: var(--pgn-color-theme-hover-primary) !important; + --pgn-color-btn-hover-text-inverse-outline-primary: var(--pgn-color-theme-hover-primary) !important; + --pgn-color-btn-hover-text-inverse-secondary: #323232FF !important; + --pgn-color-btn-hover-text-inverse-success: #11623EFF !important; + --pgn-color-btn-hover-text-inverse-warning: #D9B800FF !important; + --pgn-color-btn-hover-bg-brand: var(--pgn-color-theme-hover-brand) !important; + --pgn-color-btn-hover-bg-inverse-brand: #ECECECFF !important; + --pgn-color-btn-hover-bg-outline-danger: var(--pgn-color-danger-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-danger: var(--pgn-color-danger-100) !important; + --pgn-color-btn-hover-bg-dark: var(--pgn-color-theme-hover-dark) !important; + --pgn-color-btn-hover-bg-inverse-dark: #ECECECFF !important; + --pgn-color-btn-hover-bg-outline-info: var(--pgn-color-info-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-info: var(--pgn-color-info-100) !important; + --pgn-color-btn-hover-bg-light: var(--pgn-color-theme-hover-light) !important; + --pgn-color-btn-hover-bg-inverse-light: #323232FF !important; + --pgn-color-btn-hover-bg-primary: var(--pgn-color-theme-hover-primary) !important; + --pgn-color-btn-hover-bg-inverse-primary: #ECECECFF !important; + --pgn-color-btn-hover-bg-outline-secondary: var(--pgn-color-secondary-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-secondary: var(--pgn-color-secondary-100) !important; + --pgn-color-btn-hover-bg-outline-success: var(--pgn-color-success-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-success: var(--pgn-color-success-100) !important; + --pgn-color-btn-hover-bg-outline-warning: var(--pgn-color-warning-100) !important; + --pgn-color-btn-hover-bg-inverse-outline-warning: var(--pgn-color-warning-100) !important; + --pgn-color-btn-hover-border-brand: var(--pgn-color-theme-hover-brand) !important; + --pgn-color-btn-hover-border-outline-danger: var(--pgn-color-danger-900) !important; + --pgn-color-btn-hover-border-dark: var(--pgn-color-theme-hover-dark) !important; + --pgn-color-btn-hover-border-outline-info: var(--pgn-color-info-900) !important; + --pgn-color-btn-hover-border-light: var(--pgn-color-theme-hover-light) !important; + --pgn-color-btn-hover-border-primary: var(--pgn-color-theme-hover-primary) !important; + --pgn-color-btn-hover-border-outline-secondary: var(--pgn-color-secondary-900) !important; + --pgn-color-btn-hover-border-outline-success: var(--pgn-color-success-900) !important; + --pgn-color-btn-hover-border-outline-warning: var(--pgn-color-warning-900) !important; + --pgn-color-btn-active-text-inverse-danger: #9A232EFF !important; + --pgn-color-btn-active-text-inverse-info: #004C77FF !important; + --pgn-color-btn-active-text-inverse-secondary: #2B2B2BFF !important; + --pgn-color-btn-active-text-inverse-success: #0F5737FF !important; + --pgn-color-btn-active-text-inverse-warning: #CCAE00FF !important; + --pgn-color-btn-active-bg-brand: var(--pgn-color-theme-active-brand) !important; + --pgn-color-btn-active-bg-outline-brand: var(--pgn-color-theme-bg-brand) !important; + --pgn-color-btn-active-bg-inverse-outline-brand: var(--pgn-color-theme-bg-brand) !important; + --pgn-color-btn-active-bg-dark: var(--pgn-color-theme-active-dark) !important; + --pgn-color-btn-active-bg-outline-dark: var(--pgn-color-theme-bg-dark) !important; + --pgn-color-btn-active-bg-inverse-outline-dark: var(--pgn-color-theme-bg-dark) !important; + --pgn-color-btn-active-bg-light: var(--pgn-color-theme-active-light) !important; + --pgn-color-btn-active-bg-outline-light: var(--pgn-color-theme-bg-light) !important; + --pgn-color-btn-active-bg-inverse-outline-light: var(--pgn-color-theme-bg-light) !important; + --pgn-color-btn-active-bg-primary: var(--pgn-color-theme-active-primary) !important; + --pgn-color-btn-active-bg-outline-primary: var(--pgn-color-theme-bg-primary) !important; + --pgn-color-btn-active-bg-inverse-outline-primary: var(--pgn-color-theme-bg-primary) !important; + --pgn-color-btn-active-border-brand: var(--pgn-color-theme-active-brand) !important; + --pgn-color-btn-active-border-outline-brand: var(--pgn-color-theme-active-brand) !important; + --pgn-color-btn-active-border-dark: var(--pgn-color-theme-active-dark) !important; + --pgn-color-btn-active-border-outline-dark: var(--pgn-color-theme-active-dark) !important; + --pgn-color-btn-active-border-light: var(--pgn-color-theme-active-light) !important; + --pgn-color-btn-active-border-outline-light: var(--pgn-color-theme-active-light) !important; + --pgn-color-btn-active-border-primary: var(--pgn-color-theme-active-primary) !important; + --pgn-color-btn-active-border-outline-primary: var(--pgn-color-theme-active-primary) !important; + --pgn-color-btn-focus-text-brand: var(--pgn-color-btn-text-brand) !important; + --pgn-color-btn-focus-text-inverse-danger: var(--pgn-color-btn-text-inverse-danger) !important; + --pgn-color-btn-focus-text-outline-danger: var(--pgn-color-btn-text-outline-danger) !important; + --pgn-color-btn-focus-text-dark: var(--pgn-color-btn-text-dark) !important; + --pgn-color-btn-focus-text-outline-info: var(--pgn-color-btn-text-outline-info) !important; + --pgn-color-btn-focus-text-inverse-info: var(--pgn-color-btn-text-inverse-info) !important; + --pgn-color-btn-focus-text-light: var(--pgn-color-btn-text-light) !important; + --pgn-color-btn-focus-text-primary: var(--pgn-color-btn-text-primary) !important; + --pgn-color-btn-focus-text-outline-secondary: var(--pgn-color-btn-text-outline-secondary) !important; + --pgn-color-btn-focus-text-outline-success: var(--pgn-color-btn-text-outline-success) !important; + --pgn-color-btn-focus-text-inverse-success: var(--pgn-color-btn-text-inverse-success) !important; + --pgn-color-btn-focus-text-outline-warning: var(--pgn-color-btn-text-outline-warning) !important; + --pgn-color-btn-focus-text-inverse-warning: var(--pgn-color-btn-text-inverse-warning) !important; + --pgn-color-btn-focus-border-brand: var(--pgn-color-btn-border-brand) !important; + --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-btn-border-outline-danger) !important; + --pgn-color-btn-focus-border-dark: var(--pgn-color-btn-focus-bg-dark) !important; + --pgn-color-btn-focus-border-outline-info: var(--pgn-color-btn-border-outline-info) !important; + --pgn-color-btn-focus-border-light: var(--pgn-color-btn-border-light) !important; + --pgn-color-btn-focus-border-primary: var(--pgn-color-btn-border-primary) !important; + --pgn-color-btn-focus-border-secondary: var(--pgn-color-btn-bg-secondary) !important; + --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-btn-border-outline-secondary) !important; + --pgn-color-btn-focus-border-outline-success: var(--pgn-color-btn-border-outline-success) !important; + --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-btn-border-outline-warning) !important; + --pgn-color-btn-focus-bg-inverse-brand: var(--pgn-color-btn-bg-inverse-brand) !important; + --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger) !important; + --pgn-color-btn-focus-bg-inverse-dark: var(--pgn-color-btn-bg-inverse-dark) !important; + --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info) !important; + --pgn-color-btn-focus-bg-inverse-light: var(--pgn-color-btn-bg-inverse-light) !important; + --pgn-color-btn-focus-bg-inverse-primary: var(--pgn-color-btn-bg-inverse-primary) !important; + --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary) !important; + --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success) !important; + --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning) !important; + --pgn-color-btn-focus-outline-brand: var(--pgn-color-theme-focus-brand) !important; + --pgn-color-btn-focus-outline-outline-brand: var(--pgn-color-theme-focus-brand) !important; + --pgn-color-btn-focus-outline-inverse-outline-brand: var(--pgn-color-btn-focus-border-inverse-outline-brand) !important; + --pgn-color-btn-focus-outline-dark: var(--pgn-color-theme-focus-dark) !important; + --pgn-color-btn-focus-outline-outline-dark: var(--pgn-color-theme-focus-dark) !important; + --pgn-color-btn-focus-outline-inverse-outline-info: var(--pgn-color-btn-focus-border-inverse-outline-info) !important; + --pgn-color-btn-focus-outline-outline-light: var(--pgn-color-theme-focus-light) !important; + --pgn-color-btn-focus-outline-inverse-outline-light: var(--pgn-color-btn-focus-border-inverse-outline-light) !important; + --pgn-color-btn-focus-outline-primary: var(--pgn-color-theme-focus-primary) !important; + --pgn-color-btn-focus-outline-outline-primary: var(--pgn-color-theme-focus-primary) !important; + --pgn-color-btn-focus-outline-inverse-outline-success: var(--pgn-color-btn-focus-border-inverse-outline-success) !important; + --pgn-color-btn-focus-outline-tertiary: var(--pgn-color-theme-focus-primary) !important; + --pgn-color-btn-disabled-text-brand: var(--pgn-color-btn-text-brand) !important; + --pgn-color-btn-disabled-text-dark: var(--pgn-color-btn-text-dark) !important; + --pgn-color-btn-disabled-text-outline-info: var(--pgn-color-btn-text-outline-info) !important; + --pgn-color-btn-disabled-text-light: var(--pgn-color-btn-text-light) !important; + --pgn-color-btn-disabled-text-primary: var(--pgn-color-btn-text-primary) !important; + --pgn-color-btn-disabled-text-outline-success: var(--pgn-color-btn-text-outline-success) !important; + --pgn-color-btn-disabled-text-outline-warning: var(--pgn-color-btn-text-outline-warning) !important; + --pgn-color-btn-disabled-bg-danger: var(--pgn-color-btn-bg-danger) !important; + --pgn-color-btn-disabled-bg-info: var(--pgn-color-btn-bg-info) !important; + --pgn-color-btn-disabled-bg-secondary: var(--pgn-color-btn-bg-secondary) !important; + --pgn-color-btn-disabled-bg-success: var(--pgn-color-btn-bg-success) !important; + --pgn-color-btn-disabled-bg-warning: var(--pgn-color-btn-bg-warning) !important; + --pgn-color-btn-disabled-border-brand: var(--pgn-color-btn-border-brand) !important; + --pgn-color-btn-disabled-border-outline-danger: var(--pgn-color-btn-border-outline-danger) !important; + --pgn-color-btn-disabled-border-dark: var(--pgn-color-btn-border-dark) !important; + --pgn-color-btn-disabled-border-info: var(--pgn-color-btn-bg-info) !important; + --pgn-color-btn-disabled-border-outline-info: var(--pgn-color-btn-border-outline-info) !important; + --pgn-color-btn-disabled-border-light: var(--pgn-color-btn-border-light) !important; + --pgn-color-btn-disabled-border-primary: var(--pgn-color-btn-border-primary) !important; + --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success) !important; + --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning) !important; + --pgn-color-btn-disabled-link: var(--pgn-color-disabled) !important; + --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary) !important; + --pgn-color-chip-outline-light: var(--pgn-color-chip-label-base) !important; + --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active) !important; + --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled) !important; + --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500) !important; + --pgn-color-form-input-group-addon-border: var(--pgn-color-form-input-border) !important; + --pgn-color-form-input-focus-border: var(--pgn-color-input-focus) !important; + --pgn-color-form-input-focus-bg: var(--pgn-color-form-input-bg-base) !important; + --pgn-color-form-control-indicator-bg-base: var(--pgn-color-form-input-bg-base) !important; + --pgn-color-form-control-indicator-checked-base: var(--pgn-color-bg-active) !important; + --pgn-color-form-control-indicator-checked-bg-base: var(--pgn-color-bg-active) !important; + --pgn-color-form-control-indicator-active-bg: var(--pgn-color-bg-active) !important; + --pgn-color-form-control-label-disabled: var(--pgn-color-disabled) !important; + --pgn-color-form-control-label-floating-text: #FFFFFF1A !important; + --pgn-color-form-control-checkbox-indicator-indeterminate-bg: var(--pgn-color-bg-active) !important; + --pgn-color-form-control-select-disabled: var(--pgn-color-disabled) !important; + --pgn-color-form-control-select-bg-base: var(--pgn-color-form-input-bg-base) !important; + --pgn-color-form-control-select-border-base: var(--pgn-color-form-input-border) !important; + --pgn-color-form-control-range-thumb-bg-base: var(--pgn-color-bg-active) !important; + --pgn-color-form-control-range-thumb-bg-disabled: var(--pgn-color-disabled) !important; + --pgn-color-form-control-range-thumb-bg-active: #000000FF !important; + --pgn-color-form-control-file-bg-base: var(--pgn-color-form-input-bg-base) !important; + --pgn-color-form-control-file-button-base: var(--pgn-color-form-control-file-base) !important; + --pgn-color-form-control-file-border-base: var(--pgn-color-form-input-border) !important; + --pgn-color-form-feedback-icon-valid: var(--pgn-color-form-feedback-valid) !important; + --pgn-color-form-feedback-icon-invalid: var(--pgn-color-form-feedback-invalid) !important; + --pgn-color-form-feedback-tooltip-valid: #FFFFFFFF !important; + --pgn-color-form-feedback-tooltip-bg-valid: #178253E6 !important; + --pgn-color-form-feedback-tooltip-bg-invalid: #C32D3AE6 !important; + --pgn-color-form-feedback-tooltip-box-shadow-focus-valid: #17825340 !important; + --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #C32D3A40 !important; + --pgn-color-form-feedback-checked-valid: #1FAD6FFF !important; + --pgn-color-form-feedback-checked-invalid: #D64D59FF !important; + --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base) !important; + --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base) !important; + --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base) !important; + --pgn-color-icon-button-bg-success-active-focus: var(--pgn-color-icon-button-bg-success-active-base) !important; + --pgn-color-icon-button-bg-warning-active-hover: var(--pgn-color-icon-button-bg-warning-active-base) !important; + --pgn-color-icon-button-bg-warning-active-focus: var(--pgn-color-icon-button-bg-warning-active-base) !important; + --pgn-color-icon-button-bg-danger-active-hover: var(--pgn-color-icon-button-bg-danger-active-base) !important; + --pgn-color-icon-button-bg-danger-active-focus: var(--pgn-color-icon-button-bg-danger-active-base) !important; + --pgn-color-icon-button-text-secondary-focus: var(--pgn-color-icon-button-text-secondary-base) !important; + --pgn-color-icon-button-text-secondary-inverse-active-hover: var(--pgn-color-icon-button-text-secondary-inverse-active-base) !important; + --pgn-color-icon-button-text-secondary-inverse-active-focus: var(--pgn-color-icon-button-text-secondary-inverse-active-base) !important; + --pgn-color-icon-button-text-success-focus: var(--pgn-color-icon-button-text-success-base) !important; + --pgn-color-icon-button-text-success-inverse-active-hover: var(--pgn-color-icon-button-text-success-inverse-active-base) !important; + --pgn-color-icon-button-text-success-inverse-active-focus: var(--pgn-color-icon-button-text-success-inverse-active-base) !important; + --pgn-color-icon-button-text-warning-focus: var(--pgn-color-icon-button-text-warning-base) !important; + --pgn-color-icon-button-text-warning-inverse-active-hover: var(--pgn-color-icon-button-text-warning-inverse-active-base) !important; + --pgn-color-icon-button-text-warning-inverse-active-focus: var(--pgn-color-icon-button-text-warning-inverse-active-base) !important; + --pgn-color-icon-button-text-danger-focus: var(--pgn-color-icon-button-text-danger-base) !important; + --pgn-color-icon-button-text-danger-inverse-active-hover: var(--pgn-color-icon-button-text-danger-inverse-active-base) !important; + --pgn-color-icon-button-text-danger-inverse-active-focus: var(--pgn-color-icon-button-text-danger-inverse-active-base) !important; + --pgn-color-image-thumbnail-bg: var(--pgn-color-body-bg) !important; + --pgn-color-menu-item-hover-bg: var(--pgn-color-btn-hover-bg-tertiary) !important; + --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom) !important; + --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active) !important; + --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base) !important; + --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active) !important; + --pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base) !important; + --pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base) !important; + --pgn-color-nav-pills-inverse-link-bg-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base) !important; + --pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active) !important; + --pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active) !important; + --pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100) !important; + --pgn-color-pagination-text-disabled: var(--pgn-color-disabled) !important; + --pgn-color-pagination-bg-active: var(--pgn-color-bg-active) !important; + --pgn-color-popover-arrow-base: var(--pgn-color-popover-bg) !important; + --pgn-color-popover-success-bg: var(--pgn-color-success-100) !important; + --pgn-color-popover-success-icon: var(--pgn-color-success-500) !important; + --pgn-color-popover-warning-bg: var(--pgn-color-warning-100) !important; + --pgn-color-popover-warning-icon: var(--pgn-color-warning-500) !important; + --pgn-color-popover-danger-bg: var(--pgn-color-danger-100) !important; + --pgn-color-popover-danger-icon: var(--pgn-color-danger-500) !important; + --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg) !important; + --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error) !important; + --pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus) !important; + --pgn-color-tab-more-link-dropdown-toggle-text-hover: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus) !important; + --pgn-color-tab-more-link-dropdown-toggle-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus) !important; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus) !important; + --pgn-color-link-base: var(--pgn-color-info-500) !important; + --pgn-color-link-inline-base: var(--pgn-color-info-500) !important; + --pgn-color-link-muted-hover: #020911FF !important; + --pgn-color-link-muted-inline-decoration: #0A30554D !important; + --pgn-color-link-muted-inline-hover-base: #020911FF !important; + --pgn-color-link-brand-hover: #51002BFF !important; + --pgn-color-link-brand-inline-decoration: #9D00544D !important; + --pgn-color-link-brand-inline-hover-base: #51002BFF !important; + --pgn-color-list-group-active-bg: var(--pgn-color-bg-active) !important; + --pgn-color-action-default-secondary-100: #DBDBDBFF !important; + --pgn-color-action-default-secondary-200: #B8B8B8FF !important; + --pgn-color-action-default-secondary-300: #898989FF !important; + --pgn-color-action-default-secondary-400: #5A5A5AFF !important; + --pgn-color-action-default-secondary-500: #2B2B2BFF !important; + --pgn-color-action-default-secondary-600: #252525FF !important; + --pgn-color-action-default-secondary-700: #1E1E1EFF !important; + --pgn-color-action-default-secondary-800: #1A1A1AFF !important; + --pgn-color-action-default-secondary-900: #161616FF !important; + --pgn-color-action-default-success-100: #CFE7DDFF !important; + --pgn-color-action-default-success-200: #A4CEBBFF !important; + --pgn-color-action-default-success-300: #6AAF90FF !important; + --pgn-color-action-default-success-400: #407F63FF !important; + --pgn-color-action-default-success-500: #0F5737FF !important; + --pgn-color-action-default-success-600: #0D4A2FFF !important; + --pgn-color-action-default-success-700: #0A3D26FF !important; + --pgn-color-action-default-success-800: #093723FF !important; + --pgn-color-action-default-success-900: #08301EFF !important; + --pgn-color-action-default-info-100: #CADFEDFF !important; + --pgn-color-action-default-info-200: #99C5DDFF !important; + --pgn-color-action-default-info-300: #5AA0C8FF !important; + --pgn-color-action-default-info-400: #337599FF !important; + --pgn-color-action-default-info-500: #004C77FF !important; + --pgn-color-action-default-info-600: #004166FF !important; + --pgn-color-action-default-info-700: #003655FF !important; + --pgn-color-action-default-info-800: #00314DFF !important; + --pgn-color-action-default-info-900: #002B44FF !important; + --pgn-color-action-default-warning-100: #FFF6BDFF !important; + --pgn-color-action-default-warning-200: #FFEF8CFF !important; + --pgn-color-action-default-warning-300: #FFE44DFF !important; + --pgn-color-action-default-warning-400: #FFDC0DFF !important; + --pgn-color-action-default-warning-500: #CCAE00FF !important; + --pgn-color-action-default-warning-600: #B39800FF !important; + --pgn-color-action-default-warning-700: #998300FF !important; + --pgn-color-action-default-warning-800: #8C7700FF !important; + --pgn-color-action-default-warning-900: #806D00FF !important; + --pgn-color-action-default-danger-100: #EFCBCFFF !important; + --pgn-color-action-default-danger-200: #E5A3A9FF !important; + --pgn-color-action-default-danger-300: #D66E78FF !important; + --pgn-color-action-default-danger-400: #C73A46FF !important; + --pgn-color-action-default-danger-500: #9A232EFF !important; + --pgn-color-action-default-danger-600: #871F28FF !important; + --pgn-color-action-default-danger-700: #731A22FF !important; + --pgn-color-action-default-danger-800: #691820FF !important; + --pgn-color-action-default-danger-900: #60161DFF !important; + --pgn-border-color-nav-tabs-link-border-hover-bottom: var(--pgn-color-nav-tabs-base-border-base) !important; + --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text) !important; + --pgn-elevation-form-control-select-border-focus-color: var(--pgn-color-input-btn-focus) !important; + --pgn-elevation-pagination-focus-box-shadow-color: var(--pgn-color-input-btn-focus) !important; + --pgn-elevation-input-btn-focus-box-shadow-color: var(--pgn-color-input-btn-focus) !important; + --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,") !important; + --pgn-other-content-form-control-radio-indicator-icon-checked-base: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e") !important; + --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e") !important; + --pgn-other-content-form-control-select-bg-color: var(--pgn-color-form-control-select-bg-base) !important; + --pgn-other-content-form-control-select-bg-image: var(--pgn-other-content-form-control-select-indicator-icon) !important; + --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important; + --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") !important; + --pgn-color-alert-icon-success: var(--pgn-color-theme-default-success) !important; + --pgn-color-alert-icon-info: var(--pgn-color-theme-default-info) !important; + --pgn-color-alert-icon-danger: var(--pgn-color-theme-default-danger) !important; + --pgn-color-alert-icon-warning: var(--pgn-color-theme-default-warning) !important; + --pgn-color-alert-bg-success: var(--pgn-color-theme-bg-success) !important; + --pgn-color-alert-bg-info: var(--pgn-color-theme-bg-info) !important; + --pgn-color-alert-bg-danger: var(--pgn-color-theme-bg-danger) !important; + --pgn-color-alert-bg-warning: var(--pgn-color-theme-bg-warning) !important; + --pgn-color-alert-border-success: var(--pgn-color-theme-border-success) !important; + --pgn-color-alert-border-info: var(--pgn-color-theme-border-info) !important; + --pgn-color-alert-border-danger: var(--pgn-color-theme-border-danger) !important; + --pgn-color-alert-border-warning: var(--pgn-color-theme-border-warning) !important; + --pgn-color-btn-hover-text-brand: #FFFFFFFF !important; + --pgn-color-btn-hover-text-outline-danger: var(--pgn-color-theme-hover-danger) !important; + --pgn-color-btn-hover-text-inverse-outline-danger: var(--pgn-color-theme-hover-danger) !important; + --pgn-color-btn-hover-text-dark: #FFFFFFFF !important; + --pgn-color-btn-hover-text-outline-info: var(--pgn-color-theme-hover-info) !important; + --pgn-color-btn-hover-text-inverse-outline-info: var(--pgn-color-theme-hover-info) !important; + --pgn-color-btn-hover-text-light: #414141FF !important; + --pgn-color-btn-hover-text-primary: #FFFFFFFF !important; + --pgn-color-btn-hover-text-outline-secondary: var(--pgn-color-theme-hover-secondary) !important; + --pgn-color-btn-hover-text-inverse-outline-secondary: var(--pgn-color-theme-hover-secondary) !important; + --pgn-color-btn-hover-text-outline-success: var(--pgn-color-theme-hover-success) !important; + --pgn-color-btn-hover-text-inverse-outline-success: var(--pgn-color-theme-hover-success) !important; + --pgn-color-btn-hover-text-outline-warning: var(--pgn-color-theme-hover-warning) !important; + --pgn-color-btn-hover-text-inverse-outline-warning: var(--pgn-color-theme-hover-warning) !important; + --pgn-color-btn-hover-bg-danger: var(--pgn-color-theme-hover-danger) !important; + --pgn-color-btn-hover-bg-inverse-danger: #ECECECFF !important; + --pgn-color-btn-hover-bg-info: var(--pgn-color-theme-hover-info) !important; + --pgn-color-btn-hover-bg-inverse-info: #ECECECFF !important; + --pgn-color-btn-hover-bg-secondary: var(--pgn-color-theme-hover-secondary) !important; + --pgn-color-btn-hover-bg-inverse-secondary: #ECECECFF !important; + --pgn-color-btn-hover-bg-success: var(--pgn-color-theme-hover-success) !important; + --pgn-color-btn-hover-bg-inverse-success: #ECECECFF !important; + --pgn-color-btn-hover-bg-warning: var(--pgn-color-theme-hover-warning) !important; + --pgn-color-btn-hover-bg-inverse-warning: #323232FF !important; + --pgn-color-btn-hover-border-danger: var(--pgn-color-theme-hover-danger) !important; + --pgn-color-btn-hover-border-info: var(--pgn-color-theme-hover-info) !important; + --pgn-color-btn-hover-border-secondary: var(--pgn-color-theme-hover-secondary) !important; + --pgn-color-btn-hover-border-success: var(--pgn-color-theme-hover-success) !important; + --pgn-color-btn-hover-border-warning: var(--pgn-color-theme-hover-warning) !important; + --pgn-color-btn-active-text-brand: #FFFFFFFF !important; + --pgn-color-btn-active-text-outline-brand: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-brand: #454545FF !important; + --pgn-color-btn-active-text-dark: #FFFFFFFF !important; + --pgn-color-btn-active-text-outline-dark: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-dark: #454545FF !important; + --pgn-color-btn-active-text-light: #313131FF !important; + --pgn-color-btn-active-text-outline-light: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-light: #454545FF !important; + --pgn-color-btn-active-text-primary: #FFFFFFFF !important; + --pgn-color-btn-active-text-outline-primary: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-primary: #454545FF !important; + --pgn-color-btn-active-bg-danger: var(--pgn-color-theme-active-danger) !important; + --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-theme-bg-danger) !important; + --pgn-color-btn-active-bg-inverse-outline-danger: var(--pgn-color-theme-bg-danger) !important; + --pgn-color-btn-active-bg-info: var(--pgn-color-theme-active-info) !important; + --pgn-color-btn-active-bg-outline-info: var(--pgn-color-theme-bg-info) !important; + --pgn-color-btn-active-bg-inverse-outline-info: var(--pgn-color-theme-bg-info) !important; + --pgn-color-btn-active-bg-secondary: var(--pgn-color-theme-active-secondary) !important; + --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-theme-bg-secondary) !important; + --pgn-color-btn-active-bg-inverse-outline-secondary: var(--pgn-color-theme-bg-secondary) !important; + --pgn-color-btn-active-bg-success: var(--pgn-color-theme-active-success) !important; + --pgn-color-btn-active-bg-outline-success: var(--pgn-color-theme-bg-success) !important; + --pgn-color-btn-active-bg-inverse-outline-success: var(--pgn-color-theme-bg-success) !important; + --pgn-color-btn-active-bg-warning: var(--pgn-color-theme-active-warning) !important; + --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-theme-bg-warning) !important; + --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-bg-warning) !important; + --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger) !important; + --pgn-color-btn-active-border-outline-danger: var(--pgn-color-theme-active-danger) !important; + --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info) !important; + --pgn-color-btn-active-border-outline-info: var(--pgn-color-theme-active-info) !important; + --pgn-color-btn-active-border-secondary: var(--pgn-color-theme-active-secondary) !important; + --pgn-color-btn-active-border-outline-secondary: var(--pgn-color-theme-active-secondary) !important; + --pgn-color-btn-active-border-success: var(--pgn-color-theme-active-success) !important; + --pgn-color-btn-active-border-outline-success: var(--pgn-color-theme-active-success) !important; + --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning) !important; + --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning) !important; + --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger) !important; + --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info) !important; + --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary) !important; + --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success) !important; + --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning) !important; + --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-focus-bg-danger) !important; + --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info) !important; + --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success) !important; + --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning) !important; + --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger) !important; + --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info) !important; + --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary) !important; + --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success) !important; + --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning) !important; + --pgn-color-btn-focus-outline-danger: var(--pgn-color-theme-focus-danger) !important; + --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-theme-focus-danger) !important; + --pgn-color-btn-focus-outline-info: var(--pgn-color-theme-focus-info) !important; + --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-theme-focus-info) !important; + --pgn-color-btn-focus-outline-secondary: var(--pgn-color-theme-focus-secondary) !important; + --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-theme-focus-secondary) !important; + --pgn-color-btn-focus-outline-success: var(--pgn-color-theme-focus-success) !important; + --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-theme-focus-success) !important; + --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning) !important; + --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning) !important; + --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand) !important; + --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger) !important; + --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info) !important; + --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light) !important; + --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary) !important; + --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary) !important; + --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success) !important; + --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning) !important; + --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger) !important; + --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark) !important; + --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light) !important; + --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary) !important; + --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success) !important; + --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning) !important; + --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base) !important; + --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border) !important; + --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg) !important; + --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base) !important; + --pgn-color-form-control-checkbox-indicator-indeterminate-border: var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg) !important; + --pgn-color-form-control-select-border-focus: var(--pgn-color-form-input-focus-border) !important; + --pgn-color-form-control-file-border-focus: var(--pgn-color-form-input-focus-border) !important; + --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover) !important; + --pgn-color-pagination-text-base: var(--pgn-color-link-base) !important; + --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active) !important; + --pgn-color-link-hover: #003C5EFF !important; + --pgn-color-link-inline-decoration: #006DAA4D !important; + --pgn-color-link-inline-hover-base: #003C5EFF !important; + --pgn-color-link-muted-inline-hover-decoration: #020911FF !important; + --pgn-color-link-brand-inline-hover-decoration: #51002BFF !important; + --pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg) !important; + --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,") !important; + --pgn-color-btn-hover-text-danger: #FFFFFFFF !important; + --pgn-color-btn-hover-text-info: #FFFFFFFF !important; + --pgn-color-btn-hover-text-secondary: #FFFFFFFF !important; + --pgn-color-btn-hover-text-success: #FFFFFFFF !important; + --pgn-color-btn-hover-text-warning: #414141FF !important; + --pgn-color-btn-active-text-danger: #FFFFFFFF !important; + --pgn-color-btn-active-text-outline-danger: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-danger: #454545FF !important; + --pgn-color-btn-active-text-info: #FFFFFFFF !important; + --pgn-color-btn-active-text-outline-info: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-info: #454545FF !important; + --pgn-color-btn-active-text-secondary: #FFFFFFFF !important; + --pgn-color-btn-active-text-outline-secondary: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-secondary: #454545FF !important; + --pgn-color-btn-active-text-success: #FFFFFFFF !important; + --pgn-color-btn-active-text-outline-success: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-success: #454545FF !important; + --pgn-color-btn-active-text-warning: #313131FF !important; + --pgn-color-btn-active-text-outline-warning: #454545FF !important; + --pgn-color-btn-active-text-inverse-outline-warning: #454545FF !important; + --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger) !important; + --pgn-color-pagination-text-hover: var(--pgn-color-link-hover) !important; + --pgn-color-link-inline-hover-decoration: #003C5EFF !important; + /** + * ELEVATION + */ + --pgn-elevation-box-shadow-level-1: + var(--pgn-elevation-box-shadow-level-1-1-offset-x) + var(--pgn-elevation-box-shadow-level-1-1-offset-y) + var(--pgn-elevation-box-shadow-level-1-1-blur) + var(--pgn-elevation-box-shadow-level-1-1-color), + var(--pgn-elevation-box-shadow-level-1-2-offset-x) + var(--pgn-elevation-box-shadow-level-1-2-offset-y) + var(--pgn-elevation-box-shadow-level-1-2-blur) + var(--pgn-elevation-box-shadow-level-1-2-color) !important; + + --pgn-elevation-box-shadow-level-2: + var(--pgn-elevation-box-shadow-level-2-1-offset-x) + var(--pgn-elevation-box-shadow-level-2-1-offset-y) + var(--pgn-elevation-box-shadow-level-2-1-blur) + var(--pgn-elevation-box-shadow-level-2-1-color), + var(--pgn-elevation-box-shadow-level-2-2-offset-x) + var(--pgn-elevation-box-shadow-level-2-2-offset-y) + var(--pgn-elevation-box-shadow-level-2-2-blur) + var(--pgn-elevation-box-shadow-level-2-2-color) !important; + + --pgn-elevation-box-shadow-level-3: + var(--pgn-elevation-box-shadow-level-3-1-offset-x) + var(--pgn-elevation-box-shadow-level-3-1-offset-y) + var(--pgn-elevation-box-shadow-level-3-1-blur) + var(--pgn-elevation-box-shadow-level-3-1-color), + var(--pgn-elevation-box-shadow-level-3-2-offset-x) + var(--pgn-elevation-box-shadow-level-3-2-offset-y) + var(--pgn-elevation-box-shadow-level-3-2-blur) + var(--pgn-elevation-box-shadow-level-3-2-color) !important; + + --pgn-elevation-box-shadow-level-4: + var(--pgn-elevation-box-shadow-level-4-1-offset-x) + var(--pgn-elevation-box-shadow-level-4-1-offset-y) + var(--pgn-elevation-box-shadow-level-4-1-blur) + var(--pgn-elevation-box-shadow-level-4-1-color), + var(--pgn-elevation-box-shadow-level-4-2-offset-x) + var(--pgn-elevation-box-shadow-level-4-2-offset-y) + var(--pgn-elevation-box-shadow-level-4-2-blur) + var(--pgn-elevation-box-shadow-level-4-2-color) !important; + + --pgn-elevation-box-shadow-level-5: + var(--pgn-elevation-box-shadow-level-5-1-offset-x) + var(--pgn-elevation-box-shadow-level-5-1-offset-y) + var(--pgn-elevation-box-shadow-level-5-1-blur) + var(--pgn-elevation-box-shadow-level-5-1-color), + var(--pgn-elevation-box-shadow-level-5-2-offset-x) + var(--pgn-elevation-box-shadow-level-5-2-offset-y) + var(--pgn-elevation-box-shadow-level-5-2-blur) + var(--pgn-elevation-box-shadow-level-5-2-color) !important; + + --pgn-elevation-box-shadow-down-1: + var(--pgn-elevation-box-shadow-down-1-1-offset-x) + var(--pgn-elevation-box-shadow-down-1-1-offset-y) + var(--pgn-elevation-box-shadow-down-1-1-blur) + var(--pgn-elevation-box-shadow-down-1-1-color), + var(--pgn-elevation-box-shadow-down-1-2-offset-x) + var(--pgn-elevation-box-shadow-down-1-2-offset-y) + var(--pgn-elevation-box-shadow-down-1-2-blur) + var(--pgn-elevation-box-shadow-down-1-2-color) !important; + + --pgn-elevation-box-shadow-down-2: + var(--pgn-elevation-box-shadow-down-2-1-offset-x) + var(--pgn-elevation-box-shadow-down-2-1-offset-y) + var(--pgn-elevation-box-shadow-down-2-1-blur) + var(--pgn-elevation-box-shadow-down-2-1-color), + var(--pgn-elevation-box-shadow-down-2-2-offset-x) + var(--pgn-elevation-box-shadow-down-2-2-offset-y) + var(--pgn-elevation-box-shadow-down-2-2-blur) + var(--pgn-elevation-box-shadow-down-2-2-color) !important; + + --pgn-elevation-box-shadow-down-3: + var(--pgn-elevation-box-shadow-down-3-1-offset-x) + var(--pgn-elevation-box-shadow-down-3-1-offset-y) + var(--pgn-elevation-box-shadow-down-3-1-blur) + var(--pgn-elevation-box-shadow-down-3-1-color), + var(--pgn-elevation-box-shadow-down-3-2-offset-x) + var(--pgn-elevation-box-shadow-down-3-2-offset-y) + var(--pgn-elevation-box-shadow-down-3-2-blur) + var(--pgn-elevation-box-shadow-down-3-2-color) !important; + + --pgn-elevation-box-shadow-down-4: + var(--pgn-elevation-box-shadow-down-4-1-offset-x) + var(--pgn-elevation-box-shadow-down-4-1-offset-y) + var(--pgn-elevation-box-shadow-down-4-1-blur) + var(--pgn-elevation-box-shadow-down-4-1-color), + var(--pgn-elevation-box-shadow-down-4-2-offset-x) + var(--pgn-elevation-box-shadow-down-4-2-offset-y) + var(--pgn-elevation-box-shadow-down-4-2-blur) + var(--pgn-elevation-box-shadow-down-4-2-color) !important; + + --pgn-elevation-box-shadow-down-5: + var(--pgn-elevation-box-shadow-down-5-1-offset-x) + var(--pgn-elevation-box-shadow-down-5-1-offset-y) + var(--pgn-elevation-box-shadow-down-5-1-blur) + var(--pgn-elevation-box-shadow-down-5-1-color), + var(--pgn-elevation-box-shadow-down-5-2-offset-x) + var(--pgn-elevation-box-shadow-down-5-2-offset-y) + var(--pgn-elevation-box-shadow-down-5-2-blur) + var(--pgn-elevation-box-shadow-down-5-2-color) !important; + + --pgn-elevation-box-shadow-left-1: + var(--pgn-elevation-box-shadow-left-1-1-offset-x) + var(--pgn-elevation-box-shadow-left-1-1-offset-y) + var(--pgn-elevation-box-shadow-left-1-1-blur) + var(--pgn-elevation-box-shadow-left-1-1-color), + var(--pgn-elevation-box-shadow-left-1-2-offset-x) + var(--pgn-elevation-box-shadow-left-1-2-offset-y) + var(--pgn-elevation-box-shadow-left-1-2-blur) + var(--pgn-elevation-box-shadow-left-1-2-color) !important; + + --pgn-elevation-box-shadow-left-2: + var(--pgn-elevation-box-shadow-left-2-1-offset-x) + var(--pgn-elevation-box-shadow-left-2-1-offset-y) + var(--pgn-elevation-box-shadow-left-2-1-blur) + var(--pgn-elevation-box-shadow-left-2-1-color), + var(--pgn-elevation-box-shadow-left-2-2-offset-x) + var(--pgn-elevation-box-shadow-left-2-2-offset-y) + var(--pgn-elevation-box-shadow-left-2-2-blur) + var(--pgn-elevation-box-shadow-left-2-2-color) !important; + + --pgn-elevation-box-shadow-left-3: + var(--pgn-elevation-box-shadow-left-3-1-offset-x) + var(--pgn-elevation-box-shadow-left-3-1-offset-y) + var(--pgn-elevation-box-shadow-left-3-1-blur) + var(--pgn-elevation-box-shadow-left-3-1-color), + var(--pgn-elevation-box-shadow-left-3-2-offset-x) + var(--pgn-elevation-box-shadow-left-3-2-offset-y) + var(--pgn-elevation-box-shadow-left-3-2-blur) + var(--pgn-elevation-box-shadow-left-3-2-color) !important; + + --pgn-elevation-box-shadow-left-4: + var(--pgn-elevation-box-shadow-left-4-1-offset-x) + var(--pgn-elevation-box-shadow-left-4-1-offset-y) + var(--pgn-elevation-box-shadow-left-4-1-blur) + var(--pgn-elevation-box-shadow-left-4-1-color), + var(--pgn-elevation-box-shadow-left-4-2-offset-x) + var(--pgn-elevation-box-shadow-left-4-2-offset-y) + var(--pgn-elevation-box-shadow-left-4-2-blur) + var(--pgn-elevation-box-shadow-left-4-2-color) !important; + + --pgn-elevation-box-shadow-left-5: + var(--pgn-elevation-box-shadow-left-5-1-offset-x) + var(--pgn-elevation-box-shadow-left-5-1-offset-y) + var(--pgn-elevation-box-shadow-left-5-1-blur) + var(--pgn-elevation-box-shadow-left-5-1-color), + var(--pgn-elevation-box-shadow-left-5-2-offset-x) + var(--pgn-elevation-box-shadow-left-5-2-offset-y) + var(--pgn-elevation-box-shadow-left-5-2-blur) + var(--pgn-elevation-box-shadow-left-5-2-color) !important; + + --pgn-elevation-box-shadow-up-1: + var(--pgn-elevation-box-shadow-up-1-1-offset-x) + var(--pgn-elevation-box-shadow-up-1-1-offset-y) + var(--pgn-elevation-box-shadow-up-1-1-blur) + var(--pgn-elevation-box-shadow-up-1-1-color), + var(--pgn-elevation-box-shadow-up-1-2-offset-x) + var(--pgn-elevation-box-shadow-up-1-2-offset-y) + var(--pgn-elevation-box-shadow-up-1-2-blur) + var(--pgn-elevation-box-shadow-up-1-2-color) !important; + + --pgn-elevation-box-shadow-up-2: + var(--pgn-elevation-box-shadow-up-2-1-offset-x) + var(--pgn-elevation-box-shadow-up-2-1-offset-y) + var(--pgn-elevation-box-shadow-up-2-1-blur) + var(--pgn-elevation-box-shadow-up-2-1-color), + var(--pgn-elevation-box-shadow-up-2-2-offset-x) + var(--pgn-elevation-box-shadow-up-2-2-offset-y) + var(--pgn-elevation-box-shadow-up-2-2-blur) + var(--pgn-elevation-box-shadow-up-2-2-color) !important; + + --pgn-elevation-box-shadow-up-3: + var(--pgn-elevation-box-shadow-up-3-1-offset-x) + var(--pgn-elevation-box-shadow-up-3-1-offset-y) + var(--pgn-elevation-box-shadow-up-3-1-blur) + var(--pgn-elevation-box-shadow-up-3-1-color), + var(--pgn-elevation-box-shadow-up-3-2-offset-x) + var(--pgn-elevation-box-shadow-up-3-2-offset-y) + var(--pgn-elevation-box-shadow-up-3-2-blur) + var(--pgn-elevation-box-shadow-up-3-2-color) !important; + + --pgn-elevation-box-shadow-up-4: + var(--pgn-elevation-box-shadow-up-4-1-offset-x) + var(--pgn-elevation-box-shadow-up-4-1-offset-y) + var(--pgn-elevation-box-shadow-up-4-1-blur) + var(--pgn-elevation-box-shadow-up-4-1-color), + var(--pgn-elevation-box-shadow-up-4-2-offset-x) + var(--pgn-elevation-box-shadow-up-4-2-offset-y) + var(--pgn-elevation-box-shadow-up-4-2-blur) + var(--pgn-elevation-box-shadow-up-4-2-color) !important; + + --pgn-elevation-box-shadow-up-5: + var(--pgn-elevation-box-shadow-up-5-1-offset-x) + var(--pgn-elevation-box-shadow-up-5-1-offset-y) + var(--pgn-elevation-box-shadow-up-5-1-blur) + var(--pgn-elevation-box-shadow-up-5-1-color), + var(--pgn-elevation-box-shadow-up-5-2-offset-x) + var(--pgn-elevation-box-shadow-up-5-2-offset-y) + var(--pgn-elevation-box-shadow-up-5-2-blur) + var(--pgn-elevation-box-shadow-up-5-2-color) !important; + + --pgn-elevation-box-shadow-right-1: + var(--pgn-elevation-box-shadow-right-1-1-offset-x) + var(--pgn-elevation-box-shadow-right-1-1-offset-y) + var(--pgn-elevation-box-shadow-right-1-1-blur) + var(--pgn-elevation-box-shadow-right-1-1-color), + var(--pgn-elevation-box-shadow-right-1-2-offset-x) + var(--pgn-elevation-box-shadow-right-1-2-offset-y) + var(--pgn-elevation-box-shadow-right-1-2-blur) + var(--pgn-elevation-box-shadow-right-1-2-color) !important; + + --pgn-elevation-box-shadow-right-2: + var(--pgn-elevation-box-shadow-right-2-1-offset-x) + var(--pgn-elevation-box-shadow-right-2-1-offset-y) + var(--pgn-elevation-box-shadow-right-2-1-blur) + var(--pgn-elevation-box-shadow-right-2-1-color), + var(--pgn-elevation-box-shadow-right-2-2-offset-x) + var(--pgn-elevation-box-shadow-right-2-2-offset-y) + var(--pgn-elevation-box-shadow-right-2-2-blur) + var(--pgn-elevation-box-shadow-right-2-2-color) !important; + + --pgn-elevation-box-shadow-right-3: + var(--pgn-elevation-box-shadow-right-3-1-offset-x) + var(--pgn-elevation-box-shadow-right-3-1-offset-y) + var(--pgn-elevation-box-shadow-right-3-1-blur) + var(--pgn-elevation-box-shadow-right-3-1-color), + var(--pgn-elevation-box-shadow-right-3-2-offset-x) + var(--pgn-elevation-box-shadow-right-3-2-offset-y) + var(--pgn-elevation-box-shadow-right-3-2-blur) + var(--pgn-elevation-box-shadow-right-3-2-color) !important; + + --pgn-elevation-box-shadow-right-4: + var(--pgn-elevation-box-shadow-right-4-1-offset-x) + var(--pgn-elevation-box-shadow-right-4-1-offset-y) + var(--pgn-elevation-box-shadow-right-4-1-blur) + var(--pgn-elevation-box-shadow-right-4-1-color), + var(--pgn-elevation-box-shadow-right-4-2-offset-x) + var(--pgn-elevation-box-shadow-right-4-2-offset-y) + var(--pgn-elevation-box-shadow-right-4-2-blur) + var(--pgn-elevation-box-shadow-right-4-2-color) !important; + + --pgn-elevation-box-shadow-right-5: + var(--pgn-elevation-box-shadow-right-5-1-offset-x) + var(--pgn-elevation-box-shadow-right-5-1-offset-y) + var(--pgn-elevation-box-shadow-right-5-1-blur) + var(--pgn-elevation-box-shadow-right-5-1-color), + var(--pgn-elevation-box-shadow-right-5-2-offset-x) + var(--pgn-elevation-box-shadow-right-5-2-offset-y) + var(--pgn-elevation-box-shadow-right-5-2-blur) + var(--pgn-elevation-box-shadow-right-5-2-color) !important; + + --pgn-elevation-box-shadow-centered-1: + var(--pgn-elevation-box-shadow-centered-1-1-offset-x) + var(--pgn-elevation-box-shadow-centered-1-1-offset-y) + var(--pgn-elevation-box-shadow-centered-1-1-blur) + var(--pgn-elevation-box-shadow-centered-1-1-color), + var(--pgn-elevation-box-shadow-centered-1-2-offset-x) + var(--pgn-elevation-box-shadow-centered-1-2-offset-y) + var(--pgn-elevation-box-shadow-centered-1-2-blur) + var(--pgn-elevation-box-shadow-centered-1-2-color) !important; + + --pgn-elevation-box-shadow-centered-2: + var(--pgn-elevation-box-shadow-centered-2-1-offset-x) + var(--pgn-elevation-box-shadow-centered-2-1-offset-y) + var(--pgn-elevation-box-shadow-centered-2-1-blur) + var(--pgn-elevation-box-shadow-centered-2-1-color), + var(--pgn-elevation-box-shadow-centered-2-2-offset-x) + var(--pgn-elevation-box-shadow-centered-2-2-offset-y) + var(--pgn-elevation-box-shadow-centered-2-2-blur) + var(--pgn-elevation-box-shadow-centered-2-2-color) !important; + + --pgn-elevation-box-shadow-centered-3: + var(--pgn-elevation-box-shadow-centered-3-1-offset-x) + var(--pgn-elevation-box-shadow-centered-3-1-offset-y) + var(--pgn-elevation-box-shadow-centered-3-1-blur) + var(--pgn-elevation-box-shadow-centered-3-1-color), + var(--pgn-elevation-box-shadow-centered-3-2-offset-x) + var(--pgn-elevation-box-shadow-centered-3-2-offset-y) + var(--pgn-elevation-box-shadow-centered-3-2-blur) + var(--pgn-elevation-box-shadow-centered-3-2-color) !important; + + --pgn-elevation-box-shadow-centered-4: + var(--pgn-elevation-box-shadow-centered-4-1-offset-x) + var(--pgn-elevation-box-shadow-centered-4-1-offset-y) + var(--pgn-elevation-box-shadow-centered-4-1-blur) + var(--pgn-elevation-box-shadow-centered-4-1-color), + var(--pgn-elevation-box-shadow-centered-4-2-offset-x) + var(--pgn-elevation-box-shadow-centered-4-2-offset-y) + var(--pgn-elevation-box-shadow-centered-4-2-blur) + var(--pgn-elevation-box-shadow-centered-4-2-color) !important; + + --pgn-elevation-box-shadow-centered-5: + var(--pgn-elevation-box-shadow-centered-5-1-offset-x) + var(--pgn-elevation-box-shadow-centered-5-1-offset-y) + var(--pgn-elevation-box-shadow-centered-5-1-blur) + var(--pgn-elevation-box-shadow-centered-5-1-color), + var(--pgn-elevation-box-shadow-centered-5-2-offset-x) + var(--pgn-elevation-box-shadow-centered-5-2-offset-y) + var(--pgn-elevation-box-shadow-centered-5-2-blur) + var(--pgn-elevation-box-shadow-centered-5-2-color) !important; +} + +/** + * Do not edit directly, this file was auto-generated. + * See /tokens/README.md for more details. + */ + +.bg-accent-a { + background-color: var(--pgn-color-accent-a) !important; +} + +a.bg-accent-a:hover, +a.bg-accent-a:focus, +button.bg-accent-a:hover, +button.bg-accent-a:focus { + background-color: var(--pgn-color-action-default-accent-a) !important; +} + +.text-accent-a { + color: var(--pgn-color-accent-a) !important; +} + +a.text-accent-a:hover, +a.text-accent-a:focus { + color: var(--pgn-color-action-default-accent-a) !important; +} + +.border-accent-a { + border-color: var(--pgn-color-accent-a) !important; +} + +.bg-accent-b { + background-color: var(--pgn-color-accent-b) !important; +} + +a.bg-accent-b:hover, +a.bg-accent-b:focus, +button.bg-accent-b:hover, +button.bg-accent-b:focus { + background-color: var(--pgn-color-action-default-accent-b) !important; +} + +.text-accent-b { + color: var(--pgn-color-accent-b) !important; +} + +a.text-accent-b:hover, +a.text-accent-b:focus { + color: var(--pgn-color-action-default-accent-b) !important; +} + +.border-accent-b { + border-color: var(--pgn-color-accent-b) !important; +} + +.bg-gray-100 { + background-color: var(--pgn-color-gray-100) !important; +} + +a.bg-gray-100:hover, +a.bg-gray-100:focus, +button.bg-gray-100:hover, +button.bg-gray-100:focus { + background-color: var(--pgn-color-action-default-gray-100) !important; +} + +.text-gray-100 { + color: var(--pgn-color-gray-100) !important; +} + +a.text-gray-100:hover, +a.text-gray-100:focus { + color: var(--pgn-color-action-default-gray-100) !important; +} + +.border-gray-100 { + border-color: var(--pgn-color-gray-100) !important; +} + +.bg-gray-200 { + background-color: var(--pgn-color-gray-200) !important; +} + +a.bg-gray-200:hover, +a.bg-gray-200:focus, +button.bg-gray-200:hover, +button.bg-gray-200:focus { + background-color: var(--pgn-color-action-default-gray-200) !important; +} + +.text-gray-200 { + color: var(--pgn-color-gray-200) !important; +} + +a.text-gray-200:hover, +a.text-gray-200:focus { + color: var(--pgn-color-action-default-gray-200) !important; +} + +.border-gray-200 { + border-color: var(--pgn-color-gray-200) !important; +} + +.bg-gray-300 { + background-color: var(--pgn-color-gray-300) !important; +} + +a.bg-gray-300:hover, +a.bg-gray-300:focus, +button.bg-gray-300:hover, +button.bg-gray-300:focus { + background-color: var(--pgn-color-action-default-gray-300) !important; +} + +.text-gray-300 { + color: var(--pgn-color-gray-300) !important; +} + +a.text-gray-300:hover, +a.text-gray-300:focus { + color: var(--pgn-color-action-default-gray-300) !important; +} + +.border-gray-300 { + border-color: var(--pgn-color-gray-300) !important; +} + +.bg-gray-400 { + background-color: var(--pgn-color-gray-400) !important; +} + +a.bg-gray-400:hover, +a.bg-gray-400:focus, +button.bg-gray-400:hover, +button.bg-gray-400:focus { + background-color: var(--pgn-color-action-default-gray-400) !important; +} + +.text-gray-400 { + color: var(--pgn-color-gray-400) !important; +} + +a.text-gray-400:hover, +a.text-gray-400:focus { + color: var(--pgn-color-action-default-gray-400) !important; +} + +.border-gray-400 { + border-color: var(--pgn-color-gray-400) !important; +} + +.bg-gray-500 { + background-color: var(--pgn-color-gray-500) !important; +} + +a.bg-gray-500:hover, +a.bg-gray-500:focus, +button.bg-gray-500:hover, +button.bg-gray-500:focus { + background-color: var(--pgn-color-action-default-gray-500) !important; +} + +.text-gray-500 { + color: var(--pgn-color-gray-500) !important; +} + +a.text-gray-500:hover, +a.text-gray-500:focus { + color: var(--pgn-color-action-default-gray-500) !important; +} + +.border-gray-500 { + border-color: var(--pgn-color-gray-500) !important; +} + +.bg-gray-600 { + background-color: var(--pgn-color-gray-600) !important; +} + +a.bg-gray-600:hover, +a.bg-gray-600:focus, +button.bg-gray-600:hover, +button.bg-gray-600:focus { + background-color: var(--pgn-color-action-default-gray-600) !important; +} + +.text-gray-600 { + color: var(--pgn-color-gray-600) !important; +} + +a.text-gray-600:hover, +a.text-gray-600:focus { + color: var(--pgn-color-action-default-gray-600) !important; +} + +.border-gray-600 { + border-color: var(--pgn-color-gray-600) !important; +} + +.bg-gray-700 { + background-color: var(--pgn-color-gray-700) !important; +} + +a.bg-gray-700:hover, +a.bg-gray-700:focus, +button.bg-gray-700:hover, +button.bg-gray-700:focus { + background-color: var(--pgn-color-action-default-gray-700) !important; +} + +.text-gray-700 { + color: var(--pgn-color-gray-700) !important; +} + +a.text-gray-700:hover, +a.text-gray-700:focus { + color: var(--pgn-color-action-default-gray-700) !important; +} + +.border-gray-700 { + border-color: var(--pgn-color-gray-700) !important; +} + +.bg-gray-800 { + background-color: var(--pgn-color-gray-800) !important; +} + +a.bg-gray-800:hover, +a.bg-gray-800:focus, +button.bg-gray-800:hover, +button.bg-gray-800:focus { + background-color: var(--pgn-color-action-default-gray-800) !important; +} + +.text-gray-800 { + color: var(--pgn-color-gray-800) !important; +} + +a.text-gray-800:hover, +a.text-gray-800:focus { + color: var(--pgn-color-action-default-gray-800) !important; +} + +.border-gray-800 { + border-color: var(--pgn-color-gray-800) !important; +} + +.bg-gray-900 { + background-color: var(--pgn-color-gray-900) !important; +} + +a.bg-gray-900:hover, +a.bg-gray-900:focus, +button.bg-gray-900:hover, +button.bg-gray-900:focus { + background-color: var(--pgn-color-action-default-gray-900) !important; +} + +.text-gray-900 { + color: var(--pgn-color-gray-900) !important; +} + +a.text-gray-900:hover, +a.text-gray-900:focus { + color: var(--pgn-color-action-default-gray-900) !important; +} + +.border-gray-900 { + border-color: var(--pgn-color-gray-900) !important; +} + +.bg-gray { + background-color: var(--pgn-color-gray-base) !important; +} + +a.bg-gray:hover, +a.bg-gray:focus, +button.bg-gray:hover, +button.bg-gray:focus { + background-color: var(--pgn-color-action-default-gray-base) !important; +} + +.text-gray { + color: var(--pgn-color-gray-base) !important; +} + +a.text-gray:hover, +a.text-gray:focus { + color: var(--pgn-color-action-default-gray-base) !important; +} + +.border-gray { + border-color: var(--pgn-color-gray-base) !important; +} + +.bg-primary-100 { + background-color: var(--pgn-color-primary-100) !important; +} + +a.bg-primary-100:hover, +a.bg-primary-100:focus, +button.bg-primary-100:hover, +button.bg-primary-100:focus { + background-color: var(--pgn-color-action-default-primary-100) !important; +} + +.text-primary-100 { + color: var(--pgn-color-primary-100) !important; +} + +a.text-primary-100:hover, +a.text-primary-100:focus { + color: var(--pgn-color-action-default-primary-100) !important; +} + +.border-primary-100 { + border-color: var(--pgn-color-primary-100) !important; +} + +.bg-primary-200 { + background-color: var(--pgn-color-primary-200) !important; +} + +a.bg-primary-200:hover, +a.bg-primary-200:focus, +button.bg-primary-200:hover, +button.bg-primary-200:focus { + background-color: var(--pgn-color-action-default-primary-200) !important; +} + +.text-primary-200 { + color: var(--pgn-color-primary-200) !important; +} + +a.text-primary-200:hover, +a.text-primary-200:focus { + color: var(--pgn-color-action-default-primary-200) !important; +} + +.border-primary-200 { + border-color: var(--pgn-color-primary-200) !important; +} + +.bg-primary-300 { + background-color: var(--pgn-color-primary-300) !important; +} + +a.bg-primary-300:hover, +a.bg-primary-300:focus, +button.bg-primary-300:hover, +button.bg-primary-300:focus { + background-color: var(--pgn-color-action-default-primary-300) !important; +} + +.text-primary-300 { + color: var(--pgn-color-primary-300) !important; +} + +a.text-primary-300:hover, +a.text-primary-300:focus { + color: var(--pgn-color-action-default-primary-300) !important; +} + +.border-primary-300 { + border-color: var(--pgn-color-primary-300) !important; +} + +.bg-primary-400 { + background-color: var(--pgn-color-primary-400) !important; +} + +a.bg-primary-400:hover, +a.bg-primary-400:focus, +button.bg-primary-400:hover, +button.bg-primary-400:focus { + background-color: var(--pgn-color-action-default-primary-400) !important; +} + +.text-primary-400 { + color: var(--pgn-color-primary-400) !important; +} + +a.text-primary-400:hover, +a.text-primary-400:focus { + color: var(--pgn-color-action-default-primary-400) !important; +} + +.border-primary-400 { + border-color: var(--pgn-color-primary-400) !important; +} + +.bg-primary-500 { + background-color: var(--pgn-color-primary-500) !important; +} + +a.bg-primary-500:hover, +a.bg-primary-500:focus, +button.bg-primary-500:hover, +button.bg-primary-500:focus { + background-color: var(--pgn-color-action-default-primary-500) !important; +} + +.text-primary-500 { + color: var(--pgn-color-primary-500) !important; +} + +a.text-primary-500:hover, +a.text-primary-500:focus { + color: var(--pgn-color-action-default-primary-500) !important; +} + +.border-primary-500 { + border-color: var(--pgn-color-primary-500) !important; +} + +.bg-primary-600 { + background-color: var(--pgn-color-primary-600) !important; +} + +a.bg-primary-600:hover, +a.bg-primary-600:focus, +button.bg-primary-600:hover, +button.bg-primary-600:focus { + background-color: var(--pgn-color-action-default-primary-600) !important; +} + +.text-primary-600 { + color: var(--pgn-color-primary-600) !important; +} + +a.text-primary-600:hover, +a.text-primary-600:focus { + color: var(--pgn-color-action-default-primary-600) !important; +} + +.border-primary-600 { + border-color: var(--pgn-color-primary-600) !important; +} + +.bg-primary-700 { + background-color: var(--pgn-color-primary-700) !important; +} + +a.bg-primary-700:hover, +a.bg-primary-700:focus, +button.bg-primary-700:hover, +button.bg-primary-700:focus { + background-color: var(--pgn-color-action-default-primary-700) !important; +} + +.text-primary-700 { + color: var(--pgn-color-primary-700) !important; +} + +a.text-primary-700:hover, +a.text-primary-700:focus { + color: var(--pgn-color-action-default-primary-700) !important; +} + +.border-primary-700 { + border-color: var(--pgn-color-primary-700) !important; +} + +.bg-primary-800 { + background-color: var(--pgn-color-primary-800) !important; +} + +a.bg-primary-800:hover, +a.bg-primary-800:focus, +button.bg-primary-800:hover, +button.bg-primary-800:focus { + background-color: var(--pgn-color-action-default-primary-800) !important; +} + +.text-primary-800 { + color: var(--pgn-color-primary-800) !important; +} + +a.text-primary-800:hover, +a.text-primary-800:focus { + color: var(--pgn-color-action-default-primary-800) !important; +} + +.border-primary-800 { + border-color: var(--pgn-color-primary-800) !important; +} + +.bg-primary-900 { + background-color: var(--pgn-color-primary-900) !important; +} + +a.bg-primary-900:hover, +a.bg-primary-900:focus, +button.bg-primary-900:hover, +button.bg-primary-900:focus { + background-color: var(--pgn-color-action-default-primary-900) !important; +} + +.text-primary-900 { + color: var(--pgn-color-primary-900) !important; +} + +a.text-primary-900:hover, +a.text-primary-900:focus { + color: var(--pgn-color-action-default-primary-900) !important; +} + +.border-primary-900 { + border-color: var(--pgn-color-primary-900) !important; +} + +.bg-primary { + background-color: var(--pgn-color-primary-base) !important; +} + +a.bg-primary:hover, +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: var(--pgn-color-action-default-primary-base) !important; +} + +.text-primary { + color: var(--pgn-color-primary-base) !important; +} + +a.text-primary:hover, +a.text-primary:focus { + color: var(--pgn-color-action-default-primary-base) !important; +} + +.border-primary { + border-color: var(--pgn-color-primary-base) !important; +} + +.bg-secondary-100 { + background-color: var(--pgn-color-secondary-100) !important; +} + +a.bg-secondary-100:hover, +a.bg-secondary-100:focus, +button.bg-secondary-100:hover, +button.bg-secondary-100:focus { + background-color: var(--pgn-color-action-default-secondary-100) !important; +} + +.text-secondary-100 { + color: var(--pgn-color-secondary-100) !important; +} + +a.text-secondary-100:hover, +a.text-secondary-100:focus { + color: var(--pgn-color-action-default-secondary-100) !important; +} + +.border-secondary-100 { + border-color: var(--pgn-color-secondary-100) !important; +} + +.bg-secondary-200 { + background-color: var(--pgn-color-secondary-200) !important; +} + +a.bg-secondary-200:hover, +a.bg-secondary-200:focus, +button.bg-secondary-200:hover, +button.bg-secondary-200:focus { + background-color: var(--pgn-color-action-default-secondary-200) !important; +} + +.text-secondary-200 { + color: var(--pgn-color-secondary-200) !important; +} + +a.text-secondary-200:hover, +a.text-secondary-200:focus { + color: var(--pgn-color-action-default-secondary-200) !important; +} + +.border-secondary-200 { + border-color: var(--pgn-color-secondary-200) !important; +} + +.bg-secondary-300 { + background-color: var(--pgn-color-secondary-300) !important; +} + +a.bg-secondary-300:hover, +a.bg-secondary-300:focus, +button.bg-secondary-300:hover, +button.bg-secondary-300:focus { + background-color: var(--pgn-color-action-default-secondary-300) !important; +} + +.text-secondary-300 { + color: var(--pgn-color-secondary-300) !important; +} + +a.text-secondary-300:hover, +a.text-secondary-300:focus { + color: var(--pgn-color-action-default-secondary-300) !important; +} + +.border-secondary-300 { + border-color: var(--pgn-color-secondary-300) !important; +} + +.bg-secondary-400 { + background-color: var(--pgn-color-secondary-400) !important; +} + +a.bg-secondary-400:hover, +a.bg-secondary-400:focus, +button.bg-secondary-400:hover, +button.bg-secondary-400:focus { + background-color: var(--pgn-color-action-default-secondary-400) !important; +} + +.text-secondary-400 { + color: var(--pgn-color-secondary-400) !important; +} + +a.text-secondary-400:hover, +a.text-secondary-400:focus { + color: var(--pgn-color-action-default-secondary-400) !important; +} + +.border-secondary-400 { + border-color: var(--pgn-color-secondary-400) !important; +} + +.bg-secondary-500 { + background-color: var(--pgn-color-secondary-500) !important; +} + +a.bg-secondary-500:hover, +a.bg-secondary-500:focus, +button.bg-secondary-500:hover, +button.bg-secondary-500:focus { + background-color: var(--pgn-color-action-default-secondary-500) !important; +} + +.text-secondary-500 { + color: var(--pgn-color-secondary-500) !important; +} + +a.text-secondary-500:hover, +a.text-secondary-500:focus { + color: var(--pgn-color-action-default-secondary-500) !important; +} + +.border-secondary-500 { + border-color: var(--pgn-color-secondary-500) !important; +} + +.bg-secondary-600 { + background-color: var(--pgn-color-secondary-600) !important; +} + +a.bg-secondary-600:hover, +a.bg-secondary-600:focus, +button.bg-secondary-600:hover, +button.bg-secondary-600:focus { + background-color: var(--pgn-color-action-default-secondary-600) !important; +} + +.text-secondary-600 { + color: var(--pgn-color-secondary-600) !important; +} + +a.text-secondary-600:hover, +a.text-secondary-600:focus { + color: var(--pgn-color-action-default-secondary-600) !important; +} + +.border-secondary-600 { + border-color: var(--pgn-color-secondary-600) !important; +} + +.bg-secondary-700 { + background-color: var(--pgn-color-secondary-700) !important; +} + +a.bg-secondary-700:hover, +a.bg-secondary-700:focus, +button.bg-secondary-700:hover, +button.bg-secondary-700:focus { + background-color: var(--pgn-color-action-default-secondary-700) !important; +} + +.text-secondary-700 { + color: var(--pgn-color-secondary-700) !important; +} + +a.text-secondary-700:hover, +a.text-secondary-700:focus { + color: var(--pgn-color-action-default-secondary-700) !important; +} + +.border-secondary-700 { + border-color: var(--pgn-color-secondary-700) !important; +} + +.bg-secondary-800 { + background-color: var(--pgn-color-secondary-800) !important; +} + +a.bg-secondary-800:hover, +a.bg-secondary-800:focus, +button.bg-secondary-800:hover, +button.bg-secondary-800:focus { + background-color: var(--pgn-color-action-default-secondary-800) !important; +} + +.text-secondary-800 { + color: var(--pgn-color-secondary-800) !important; +} + +a.text-secondary-800:hover, +a.text-secondary-800:focus { + color: var(--pgn-color-action-default-secondary-800) !important; +} + +.border-secondary-800 { + border-color: var(--pgn-color-secondary-800) !important; +} + +.bg-secondary-900 { + background-color: var(--pgn-color-secondary-900) !important; +} + +a.bg-secondary-900:hover, +a.bg-secondary-900:focus, +button.bg-secondary-900:hover, +button.bg-secondary-900:focus { + background-color: var(--pgn-color-action-default-secondary-900) !important; +} + +.text-secondary-900 { + color: var(--pgn-color-secondary-900) !important; +} + +a.text-secondary-900:hover, +a.text-secondary-900:focus { + color: var(--pgn-color-action-default-secondary-900) !important; +} + +.border-secondary-900 { + border-color: var(--pgn-color-secondary-900) !important; +} + +.bg-secondary { + background-color: var(--pgn-color-secondary-base) !important; +} + +a.bg-secondary:hover, +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: var(--pgn-color-action-default-secondary-base) !important; +} + +.text-secondary { + color: var(--pgn-color-secondary-base) !important; +} + +a.text-secondary:hover, +a.text-secondary:focus { + color: var(--pgn-color-action-default-secondary-base) !important; +} + +.border-secondary { + border-color: var(--pgn-color-secondary-base) !important; +} + +.bg-brand-100 { + background-color: var(--pgn-color-brand-100) !important; +} + +a.bg-brand-100:hover, +a.bg-brand-100:focus, +button.bg-brand-100:hover, +button.bg-brand-100:focus { + background-color: var(--pgn-color-action-default-brand-100) !important; +} + +.text-brand-100 { + color: var(--pgn-color-brand-100) !important; +} + +a.text-brand-100:hover, +a.text-brand-100:focus { + color: var(--pgn-color-action-default-brand-100) !important; +} + +.border-brand-100 { + border-color: var(--pgn-color-brand-100) !important; +} + +.bg-brand-200 { + background-color: var(--pgn-color-brand-200) !important; +} + +a.bg-brand-200:hover, +a.bg-brand-200:focus, +button.bg-brand-200:hover, +button.bg-brand-200:focus { + background-color: var(--pgn-color-action-default-brand-200) !important; +} + +.text-brand-200 { + color: var(--pgn-color-brand-200) !important; +} + +a.text-brand-200:hover, +a.text-brand-200:focus { + color: var(--pgn-color-action-default-brand-200) !important; +} + +.border-brand-200 { + border-color: var(--pgn-color-brand-200) !important; +} + +.bg-brand-300 { + background-color: var(--pgn-color-brand-300) !important; +} + +a.bg-brand-300:hover, +a.bg-brand-300:focus, +button.bg-brand-300:hover, +button.bg-brand-300:focus { + background-color: var(--pgn-color-action-default-brand-300) !important; +} + +.text-brand-300 { + color: var(--pgn-color-brand-300) !important; +} + +a.text-brand-300:hover, +a.text-brand-300:focus { + color: var(--pgn-color-action-default-brand-300) !important; +} + +.border-brand-300 { + border-color: var(--pgn-color-brand-300) !important; +} + +.bg-brand-400 { + background-color: var(--pgn-color-brand-400) !important; +} + +a.bg-brand-400:hover, +a.bg-brand-400:focus, +button.bg-brand-400:hover, +button.bg-brand-400:focus { + background-color: var(--pgn-color-action-default-brand-400) !important; +} + +.text-brand-400 { + color: var(--pgn-color-brand-400) !important; +} + +a.text-brand-400:hover, +a.text-brand-400:focus { + color: var(--pgn-color-action-default-brand-400) !important; +} + +.border-brand-400 { + border-color: var(--pgn-color-brand-400) !important; +} + +.bg-brand-500 { + background-color: var(--pgn-color-brand-500) !important; +} + +a.bg-brand-500:hover, +a.bg-brand-500:focus, +button.bg-brand-500:hover, +button.bg-brand-500:focus { + background-color: var(--pgn-color-action-default-brand-500) !important; +} + +.text-brand-500 { + color: var(--pgn-color-brand-500) !important; +} + +a.text-brand-500:hover, +a.text-brand-500:focus { + color: var(--pgn-color-action-default-brand-500) !important; +} + +.border-brand-500 { + border-color: var(--pgn-color-brand-500) !important; +} + +.bg-brand-600 { + background-color: var(--pgn-color-brand-600) !important; +} + +a.bg-brand-600:hover, +a.bg-brand-600:focus, +button.bg-brand-600:hover, +button.bg-brand-600:focus { + background-color: var(--pgn-color-action-default-brand-600) !important; +} + +.text-brand-600 { + color: var(--pgn-color-brand-600) !important; +} + +a.text-brand-600:hover, +a.text-brand-600:focus { + color: var(--pgn-color-action-default-brand-600) !important; +} + +.border-brand-600 { + border-color: var(--pgn-color-brand-600) !important; +} + +.bg-brand-700 { + background-color: var(--pgn-color-brand-700) !important; +} + +a.bg-brand-700:hover, +a.bg-brand-700:focus, +button.bg-brand-700:hover, +button.bg-brand-700:focus { + background-color: var(--pgn-color-action-default-brand-700) !important; +} + +.text-brand-700 { + color: var(--pgn-color-brand-700) !important; +} + +a.text-brand-700:hover, +a.text-brand-700:focus { + color: var(--pgn-color-action-default-brand-700) !important; +} + +.border-brand-700 { + border-color: var(--pgn-color-brand-700) !important; +} + +.bg-brand-800 { + background-color: var(--pgn-color-brand-800) !important; +} + +a.bg-brand-800:hover, +a.bg-brand-800:focus, +button.bg-brand-800:hover, +button.bg-brand-800:focus { + background-color: var(--pgn-color-action-default-brand-800) !important; +} + +.text-brand-800 { + color: var(--pgn-color-brand-800) !important; +} + +a.text-brand-800:hover, +a.text-brand-800:focus { + color: var(--pgn-color-action-default-brand-800) !important; +} + +.border-brand-800 { + border-color: var(--pgn-color-brand-800) !important; +} + +.bg-brand-900 { + background-color: var(--pgn-color-brand-900) !important; +} + +a.bg-brand-900:hover, +a.bg-brand-900:focus, +button.bg-brand-900:hover, +button.bg-brand-900:focus { + background-color: var(--pgn-color-action-default-brand-900) !important; +} + +.text-brand-900 { + color: var(--pgn-color-brand-900) !important; +} + +a.text-brand-900:hover, +a.text-brand-900:focus { + color: var(--pgn-color-action-default-brand-900) !important; +} + +.border-brand-900 { + border-color: var(--pgn-color-brand-900) !important; +} + +.bg-brand { + background-color: var(--pgn-color-brand-base) !important; +} + +a.bg-brand:hover, +a.bg-brand:focus, +button.bg-brand:hover, +button.bg-brand:focus { + background-color: var(--pgn-color-action-default-brand-base) !important; +} + +.text-brand { + color: var(--pgn-color-brand-base) !important; +} + +a.text-brand:hover, +a.text-brand:focus { + color: var(--pgn-color-action-default-brand-base) !important; +} + +.border-brand { + border-color: var(--pgn-color-brand-base) !important; +} + +.bg-success-100 { + background-color: var(--pgn-color-success-100) !important; +} + +a.bg-success-100:hover, +a.bg-success-100:focus, +button.bg-success-100:hover, +button.bg-success-100:focus { + background-color: var(--pgn-color-action-default-success-100) !important; +} + +.text-success-100 { + color: var(--pgn-color-success-100) !important; +} + +a.text-success-100:hover, +a.text-success-100:focus { + color: var(--pgn-color-action-default-success-100) !important; +} + +.border-success-100 { + border-color: var(--pgn-color-success-100) !important; +} + +.bg-success-200 { + background-color: var(--pgn-color-success-200) !important; +} + +a.bg-success-200:hover, +a.bg-success-200:focus, +button.bg-success-200:hover, +button.bg-success-200:focus { + background-color: var(--pgn-color-action-default-success-200) !important; +} + +.text-success-200 { + color: var(--pgn-color-success-200) !important; +} + +a.text-success-200:hover, +a.text-success-200:focus { + color: var(--pgn-color-action-default-success-200) !important; +} + +.border-success-200 { + border-color: var(--pgn-color-success-200) !important; +} + +.bg-success-300 { + background-color: var(--pgn-color-success-300) !important; +} + +a.bg-success-300:hover, +a.bg-success-300:focus, +button.bg-success-300:hover, +button.bg-success-300:focus { + background-color: var(--pgn-color-action-default-success-300) !important; +} + +.text-success-300 { + color: var(--pgn-color-success-300) !important; +} + +a.text-success-300:hover, +a.text-success-300:focus { + color: var(--pgn-color-action-default-success-300) !important; +} + +.border-success-300 { + border-color: var(--pgn-color-success-300) !important; +} + +.bg-success-400 { + background-color: var(--pgn-color-success-400) !important; +} + +a.bg-success-400:hover, +a.bg-success-400:focus, +button.bg-success-400:hover, +button.bg-success-400:focus { + background-color: var(--pgn-color-action-default-success-400) !important; +} + +.text-success-400 { + color: var(--pgn-color-success-400) !important; +} + +a.text-success-400:hover, +a.text-success-400:focus { + color: var(--pgn-color-action-default-success-400) !important; +} + +.border-success-400 { + border-color: var(--pgn-color-success-400) !important; +} + +.bg-success-500 { + background-color: var(--pgn-color-success-500) !important; +} + +a.bg-success-500:hover, +a.bg-success-500:focus, +button.bg-success-500:hover, +button.bg-success-500:focus { + background-color: var(--pgn-color-action-default-success-500) !important; +} + +.text-success-500 { + color: var(--pgn-color-success-500) !important; +} + +a.text-success-500:hover, +a.text-success-500:focus { + color: var(--pgn-color-action-default-success-500) !important; +} + +.border-success-500 { + border-color: var(--pgn-color-success-500) !important; +} + +.bg-success-600 { + background-color: var(--pgn-color-success-600) !important; +} + +a.bg-success-600:hover, +a.bg-success-600:focus, +button.bg-success-600:hover, +button.bg-success-600:focus { + background-color: var(--pgn-color-action-default-success-600) !important; +} + +.text-success-600 { + color: var(--pgn-color-success-600) !important; +} + +a.text-success-600:hover, +a.text-success-600:focus { + color: var(--pgn-color-action-default-success-600) !important; +} + +.border-success-600 { + border-color: var(--pgn-color-success-600) !important; +} + +.bg-success-700 { + background-color: var(--pgn-color-success-700) !important; +} + +a.bg-success-700:hover, +a.bg-success-700:focus, +button.bg-success-700:hover, +button.bg-success-700:focus { + background-color: var(--pgn-color-action-default-success-700) !important; +} + +.text-success-700 { + color: var(--pgn-color-success-700) !important; +} + +a.text-success-700:hover, +a.text-success-700:focus { + color: var(--pgn-color-action-default-success-700) !important; +} + +.border-success-700 { + border-color: var(--pgn-color-success-700) !important; +} + +.bg-success-800 { + background-color: var(--pgn-color-success-800) !important; +} + +a.bg-success-800:hover, +a.bg-success-800:focus, +button.bg-success-800:hover, +button.bg-success-800:focus { + background-color: var(--pgn-color-action-default-success-800) !important; +} + +.text-success-800 { + color: var(--pgn-color-success-800) !important; +} + +a.text-success-800:hover, +a.text-success-800:focus { + color: var(--pgn-color-action-default-success-800) !important; +} + +.border-success-800 { + border-color: var(--pgn-color-success-800) !important; +} + +.bg-success-900 { + background-color: var(--pgn-color-success-900) !important; +} + +a.bg-success-900:hover, +a.bg-success-900:focus, +button.bg-success-900:hover, +button.bg-success-900:focus { + background-color: var(--pgn-color-action-default-success-900) !important; +} + +.text-success-900 { + color: var(--pgn-color-success-900) !important; +} + +a.text-success-900:hover, +a.text-success-900:focus { + color: var(--pgn-color-action-default-success-900) !important; +} + +.border-success-900 { + border-color: var(--pgn-color-success-900) !important; +} + +.bg-success { + background-color: var(--pgn-color-success-base) !important; +} + +a.bg-success:hover, +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: var(--pgn-color-action-default-success-base) !important; +} + +.text-success { + color: var(--pgn-color-success-base) !important; +} + +a.text-success:hover, +a.text-success:focus { + color: var(--pgn-color-action-default-success-base) !important; +} + +.border-success { + border-color: var(--pgn-color-success-base) !important; +} + +.bg-info-100 { + background-color: var(--pgn-color-info-100) !important; +} + +a.bg-info-100:hover, +a.bg-info-100:focus, +button.bg-info-100:hover, +button.bg-info-100:focus { + background-color: var(--pgn-color-action-default-info-100) !important; +} + +.text-info-100 { + color: var(--pgn-color-info-100) !important; +} + +a.text-info-100:hover, +a.text-info-100:focus { + color: var(--pgn-color-action-default-info-100) !important; +} + +.border-info-100 { + border-color: var(--pgn-color-info-100) !important; +} + +.bg-info-200 { + background-color: var(--pgn-color-info-200) !important; +} + +a.bg-info-200:hover, +a.bg-info-200:focus, +button.bg-info-200:hover, +button.bg-info-200:focus { + background-color: var(--pgn-color-action-default-info-200) !important; +} + +.text-info-200 { + color: var(--pgn-color-info-200) !important; +} + +a.text-info-200:hover, +a.text-info-200:focus { + color: var(--pgn-color-action-default-info-200) !important; +} + +.border-info-200 { + border-color: var(--pgn-color-info-200) !important; +} + +.bg-info-300 { + background-color: var(--pgn-color-info-300) !important; +} + +a.bg-info-300:hover, +a.bg-info-300:focus, +button.bg-info-300:hover, +button.bg-info-300:focus { + background-color: var(--pgn-color-action-default-info-300) !important; +} + +.text-info-300 { + color: var(--pgn-color-info-300) !important; +} + +a.text-info-300:hover, +a.text-info-300:focus { + color: var(--pgn-color-action-default-info-300) !important; +} + +.border-info-300 { + border-color: var(--pgn-color-info-300) !important; +} + +.bg-info-400 { + background-color: var(--pgn-color-info-400) !important; +} + +a.bg-info-400:hover, +a.bg-info-400:focus, +button.bg-info-400:hover, +button.bg-info-400:focus { + background-color: var(--pgn-color-action-default-info-400) !important; +} + +.text-info-400 { + color: var(--pgn-color-info-400) !important; +} + +a.text-info-400:hover, +a.text-info-400:focus { + color: var(--pgn-color-action-default-info-400) !important; +} + +.border-info-400 { + border-color: var(--pgn-color-info-400) !important; +} + +.bg-info-500 { + background-color: var(--pgn-color-info-500) !important; +} + +a.bg-info-500:hover, +a.bg-info-500:focus, +button.bg-info-500:hover, +button.bg-info-500:focus { + background-color: var(--pgn-color-action-default-info-500) !important; +} + +.text-info-500 { + color: var(--pgn-color-info-500) !important; +} + +a.text-info-500:hover, +a.text-info-500:focus { + color: var(--pgn-color-action-default-info-500) !important; +} + +.border-info-500 { + border-color: var(--pgn-color-info-500) !important; +} + +.bg-info-600 { + background-color: var(--pgn-color-info-600) !important; +} + +a.bg-info-600:hover, +a.bg-info-600:focus, +button.bg-info-600:hover, +button.bg-info-600:focus { + background-color: var(--pgn-color-action-default-info-600) !important; +} + +.text-info-600 { + color: var(--pgn-color-info-600) !important; +} + +a.text-info-600:hover, +a.text-info-600:focus { + color: var(--pgn-color-action-default-info-600) !important; +} + +.border-info-600 { + border-color: var(--pgn-color-info-600) !important; +} + +.bg-info-700 { + background-color: var(--pgn-color-info-700) !important; +} + +a.bg-info-700:hover, +a.bg-info-700:focus, +button.bg-info-700:hover, +button.bg-info-700:focus { + background-color: var(--pgn-color-action-default-info-700) !important; +} + +.text-info-700 { + color: var(--pgn-color-info-700) !important; +} + +a.text-info-700:hover, +a.text-info-700:focus { + color: var(--pgn-color-action-default-info-700) !important; +} + +.border-info-700 { + border-color: var(--pgn-color-info-700) !important; +} + +.bg-info-800 { + background-color: var(--pgn-color-info-800) !important; +} + +a.bg-info-800:hover, +a.bg-info-800:focus, +button.bg-info-800:hover, +button.bg-info-800:focus { + background-color: var(--pgn-color-action-default-info-800) !important; +} + +.text-info-800 { + color: var(--pgn-color-info-800) !important; +} + +a.text-info-800:hover, +a.text-info-800:focus { + color: var(--pgn-color-action-default-info-800) !important; +} + +.border-info-800 { + border-color: var(--pgn-color-info-800) !important; +} + +.bg-info-900 { + background-color: var(--pgn-color-info-900) !important; +} + +a.bg-info-900:hover, +a.bg-info-900:focus, +button.bg-info-900:hover, +button.bg-info-900:focus { + background-color: var(--pgn-color-action-default-info-900) !important; +} + +.text-info-900 { + color: var(--pgn-color-info-900) !important; +} + +a.text-info-900:hover, +a.text-info-900:focus { + color: var(--pgn-color-action-default-info-900) !important; +} + +.border-info-900 { + border-color: var(--pgn-color-info-900) !important; +} + +.bg-info { + background-color: var(--pgn-color-info-base) !important; +} + +a.bg-info:hover, +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: var(--pgn-color-action-default-info-base) !important; +} + +.text-info { + color: var(--pgn-color-info-base) !important; +} + +a.text-info:hover, +a.text-info:focus { + color: var(--pgn-color-action-default-info-base) !important; +} + +.border-info { + border-color: var(--pgn-color-info-base) !important; +} + +.bg-warning-100 { + background-color: var(--pgn-color-warning-100) !important; +} + +a.bg-warning-100:hover, +a.bg-warning-100:focus, +button.bg-warning-100:hover, +button.bg-warning-100:focus { + background-color: var(--pgn-color-action-default-warning-100) !important; +} + +.text-warning-100 { + color: var(--pgn-color-warning-100) !important; +} + +a.text-warning-100:hover, +a.text-warning-100:focus { + color: var(--pgn-color-action-default-warning-100) !important; +} + +.border-warning-100 { + border-color: var(--pgn-color-warning-100) !important; +} + +.bg-warning-200 { + background-color: var(--pgn-color-warning-200) !important; +} + +a.bg-warning-200:hover, +a.bg-warning-200:focus, +button.bg-warning-200:hover, +button.bg-warning-200:focus { + background-color: var(--pgn-color-action-default-warning-200) !important; +} + +.text-warning-200 { + color: var(--pgn-color-warning-200) !important; +} + +a.text-warning-200:hover, +a.text-warning-200:focus { + color: var(--pgn-color-action-default-warning-200) !important; +} + +.border-warning-200 { + border-color: var(--pgn-color-warning-200) !important; +} + +.bg-warning-300 { + background-color: var(--pgn-color-warning-300) !important; +} + +a.bg-warning-300:hover, +a.bg-warning-300:focus, +button.bg-warning-300:hover, +button.bg-warning-300:focus { + background-color: var(--pgn-color-action-default-warning-300) !important; +} + +.text-warning-300 { + color: var(--pgn-color-warning-300) !important; +} + +a.text-warning-300:hover, +a.text-warning-300:focus { + color: var(--pgn-color-action-default-warning-300) !important; +} + +.border-warning-300 { + border-color: var(--pgn-color-warning-300) !important; +} + +.bg-warning-400 { + background-color: var(--pgn-color-warning-400) !important; +} + +a.bg-warning-400:hover, +a.bg-warning-400:focus, +button.bg-warning-400:hover, +button.bg-warning-400:focus { + background-color: var(--pgn-color-action-default-warning-400) !important; +} + +.text-warning-400 { + color: var(--pgn-color-warning-400) !important; +} + +a.text-warning-400:hover, +a.text-warning-400:focus { + color: var(--pgn-color-action-default-warning-400) !important; +} + +.border-warning-400 { + border-color: var(--pgn-color-warning-400) !important; +} + +.bg-warning-500 { + background-color: var(--pgn-color-warning-500) !important; +} + +a.bg-warning-500:hover, +a.bg-warning-500:focus, +button.bg-warning-500:hover, +button.bg-warning-500:focus { + background-color: var(--pgn-color-action-default-warning-500) !important; +} + +.text-warning-500 { + color: var(--pgn-color-warning-500) !important; +} + +a.text-warning-500:hover, +a.text-warning-500:focus { + color: var(--pgn-color-action-default-warning-500) !important; +} + +.border-warning-500 { + border-color: var(--pgn-color-warning-500) !important; +} + +.bg-warning-600 { + background-color: var(--pgn-color-warning-600) !important; +} + +a.bg-warning-600:hover, +a.bg-warning-600:focus, +button.bg-warning-600:hover, +button.bg-warning-600:focus { + background-color: var(--pgn-color-action-default-warning-600) !important; +} + +.text-warning-600 { + color: var(--pgn-color-warning-600) !important; +} + +a.text-warning-600:hover, +a.text-warning-600:focus { + color: var(--pgn-color-action-default-warning-600) !important; +} + +.border-warning-600 { + border-color: var(--pgn-color-warning-600) !important; +} + +.bg-warning-700 { + background-color: var(--pgn-color-warning-700) !important; +} + +a.bg-warning-700:hover, +a.bg-warning-700:focus, +button.bg-warning-700:hover, +button.bg-warning-700:focus { + background-color: var(--pgn-color-action-default-warning-700) !important; +} + +.text-warning-700 { + color: var(--pgn-color-warning-700) !important; +} + +a.text-warning-700:hover, +a.text-warning-700:focus { + color: var(--pgn-color-action-default-warning-700) !important; +} + +.border-warning-700 { + border-color: var(--pgn-color-warning-700) !important; +} + +.bg-warning-800 { + background-color: var(--pgn-color-warning-800) !important; +} + +a.bg-warning-800:hover, +a.bg-warning-800:focus, +button.bg-warning-800:hover, +button.bg-warning-800:focus { + background-color: var(--pgn-color-action-default-warning-800) !important; +} + +.text-warning-800 { + color: var(--pgn-color-warning-800) !important; +} + +a.text-warning-800:hover, +a.text-warning-800:focus { + color: var(--pgn-color-action-default-warning-800) !important; +} + +.border-warning-800 { + border-color: var(--pgn-color-warning-800) !important; +} + +.bg-warning-900 { + background-color: var(--pgn-color-warning-900) !important; +} + +a.bg-warning-900:hover, +a.bg-warning-900:focus, +button.bg-warning-900:hover, +button.bg-warning-900:focus { + background-color: var(--pgn-color-action-default-warning-900) !important; +} + +.text-warning-900 { + color: var(--pgn-color-warning-900) !important; +} + +a.text-warning-900:hover, +a.text-warning-900:focus { + color: var(--pgn-color-action-default-warning-900) !important; +} + +.border-warning-900 { + border-color: var(--pgn-color-warning-900) !important; +} + +.bg-warning { + background-color: var(--pgn-color-warning-base) !important; +} + +a.bg-warning:hover, +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: var(--pgn-color-action-default-warning-base) !important; +} + +.text-warning { + color: var(--pgn-color-warning-base) !important; +} + +a.text-warning:hover, +a.text-warning:focus { + color: var(--pgn-color-action-default-warning-base) !important; +} + +.border-warning { + border-color: var(--pgn-color-warning-base) !important; +} + +.bg-danger-100 { + background-color: var(--pgn-color-danger-100) !important; +} + +a.bg-danger-100:hover, +a.bg-danger-100:focus, +button.bg-danger-100:hover, +button.bg-danger-100:focus { + background-color: var(--pgn-color-action-default-danger-100) !important; +} + +.text-danger-100 { + color: var(--pgn-color-danger-100) !important; +} + +a.text-danger-100:hover, +a.text-danger-100:focus { + color: var(--pgn-color-action-default-danger-100) !important; +} + +.border-danger-100 { + border-color: var(--pgn-color-danger-100) !important; +} + +.bg-danger-200 { + background-color: var(--pgn-color-danger-200) !important; +} + +a.bg-danger-200:hover, +a.bg-danger-200:focus, +button.bg-danger-200:hover, +button.bg-danger-200:focus { + background-color: var(--pgn-color-action-default-danger-200) !important; +} + +.text-danger-200 { + color: var(--pgn-color-danger-200) !important; +} + +a.text-danger-200:hover, +a.text-danger-200:focus { + color: var(--pgn-color-action-default-danger-200) !important; +} + +.border-danger-200 { + border-color: var(--pgn-color-danger-200) !important; +} + +.bg-danger-300 { + background-color: var(--pgn-color-danger-300) !important; +} + +a.bg-danger-300:hover, +a.bg-danger-300:focus, +button.bg-danger-300:hover, +button.bg-danger-300:focus { + background-color: var(--pgn-color-action-default-danger-300) !important; +} + +.text-danger-300 { + color: var(--pgn-color-danger-300) !important; +} + +a.text-danger-300:hover, +a.text-danger-300:focus { + color: var(--pgn-color-action-default-danger-300) !important; +} + +.border-danger-300 { + border-color: var(--pgn-color-danger-300) !important; +} + +.bg-danger-400 { + background-color: var(--pgn-color-danger-400) !important; +} + +a.bg-danger-400:hover, +a.bg-danger-400:focus, +button.bg-danger-400:hover, +button.bg-danger-400:focus { + background-color: var(--pgn-color-action-default-danger-400) !important; +} + +.text-danger-400 { + color: var(--pgn-color-danger-400) !important; +} + +a.text-danger-400:hover, +a.text-danger-400:focus { + color: var(--pgn-color-action-default-danger-400) !important; +} + +.border-danger-400 { + border-color: var(--pgn-color-danger-400) !important; +} + +.bg-danger-500 { + background-color: var(--pgn-color-danger-500) !important; +} + +a.bg-danger-500:hover, +a.bg-danger-500:focus, +button.bg-danger-500:hover, +button.bg-danger-500:focus { + background-color: var(--pgn-color-action-default-danger-500) !important; +} + +.text-danger-500 { + color: var(--pgn-color-danger-500) !important; +} + +a.text-danger-500:hover, +a.text-danger-500:focus { + color: var(--pgn-color-action-default-danger-500) !important; +} + +.border-danger-500 { + border-color: var(--pgn-color-danger-500) !important; +} + +.bg-danger-600 { + background-color: var(--pgn-color-danger-600) !important; +} + +a.bg-danger-600:hover, +a.bg-danger-600:focus, +button.bg-danger-600:hover, +button.bg-danger-600:focus { + background-color: var(--pgn-color-action-default-danger-600) !important; +} + +.text-danger-600 { + color: var(--pgn-color-danger-600) !important; +} + +a.text-danger-600:hover, +a.text-danger-600:focus { + color: var(--pgn-color-action-default-danger-600) !important; +} + +.border-danger-600 { + border-color: var(--pgn-color-danger-600) !important; +} + +.bg-danger-700 { + background-color: var(--pgn-color-danger-700) !important; +} + +a.bg-danger-700:hover, +a.bg-danger-700:focus, +button.bg-danger-700:hover, +button.bg-danger-700:focus { + background-color: var(--pgn-color-action-default-danger-700) !important; +} + +.text-danger-700 { + color: var(--pgn-color-danger-700) !important; +} + +a.text-danger-700:hover, +a.text-danger-700:focus { + color: var(--pgn-color-action-default-danger-700) !important; +} + +.border-danger-700 { + border-color: var(--pgn-color-danger-700) !important; +} + +.bg-danger-800 { + background-color: var(--pgn-color-danger-800) !important; +} + +a.bg-danger-800:hover, +a.bg-danger-800:focus, +button.bg-danger-800:hover, +button.bg-danger-800:focus { + background-color: var(--pgn-color-action-default-danger-800) !important; +} + +.text-danger-800 { + color: var(--pgn-color-danger-800) !important; +} + +a.text-danger-800:hover, +a.text-danger-800:focus { + color: var(--pgn-color-action-default-danger-800) !important; +} + +.border-danger-800 { + border-color: var(--pgn-color-danger-800) !important; +} + +.bg-danger-900 { + background-color: var(--pgn-color-danger-900) !important; +} + +a.bg-danger-900:hover, +a.bg-danger-900:focus, +button.bg-danger-900:hover, +button.bg-danger-900:focus { + background-color: var(--pgn-color-action-default-danger-900) !important; +} + +.text-danger-900 { + color: var(--pgn-color-danger-900) !important; +} + +a.text-danger-900:hover, +a.text-danger-900:focus { + color: var(--pgn-color-action-default-danger-900) !important; +} + +.border-danger-900 { + border-color: var(--pgn-color-danger-900) !important; +} + +.bg-danger { + background-color: var(--pgn-color-danger-base) !important; +} + +a.bg-danger:hover, +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: var(--pgn-color-action-default-danger-base) !important; +} + +.text-danger { + color: var(--pgn-color-danger-base) !important; +} + +a.text-danger:hover, +a.text-danger:focus { + color: var(--pgn-color-action-default-danger-base) !important; +} + +.border-danger { + border-color: var(--pgn-color-danger-base) !important; +} + +.bg-light-100 { + background-color: var(--pgn-color-light-100) !important; +} + +a.bg-light-100:hover, +a.bg-light-100:focus, +button.bg-light-100:hover, +button.bg-light-100:focus { + background-color: var(--pgn-color-action-default-light-100) !important; +} + +.text-light-100 { + color: var(--pgn-color-light-100) !important; +} + +a.text-light-100:hover, +a.text-light-100:focus { + color: var(--pgn-color-action-default-light-100) !important; +} + +.border-light-100 { + border-color: var(--pgn-color-light-100) !important; +} + +.bg-light-200 { + background-color: var(--pgn-color-light-200) !important; +} + +a.bg-light-200:hover, +a.bg-light-200:focus, +button.bg-light-200:hover, +button.bg-light-200:focus { + background-color: var(--pgn-color-action-default-light-200) !important; +} + +.text-light-200 { + color: var(--pgn-color-light-200) !important; +} + +a.text-light-200:hover, +a.text-light-200:focus { + color: var(--pgn-color-action-default-light-200) !important; +} + +.border-light-200 { + border-color: var(--pgn-color-light-200) !important; +} + +.bg-light-300 { + background-color: var(--pgn-color-light-300) !important; +} + +a.bg-light-300:hover, +a.bg-light-300:focus, +button.bg-light-300:hover, +button.bg-light-300:focus { + background-color: var(--pgn-color-action-default-light-300) !important; +} + +.text-light-300 { + color: var(--pgn-color-light-300) !important; +} + +a.text-light-300:hover, +a.text-light-300:focus { + color: var(--pgn-color-action-default-light-300) !important; +} + +.border-light-300 { + border-color: var(--pgn-color-light-300) !important; +} + +.bg-light-400 { + background-color: var(--pgn-color-light-400) !important; +} + +a.bg-light-400:hover, +a.bg-light-400:focus, +button.bg-light-400:hover, +button.bg-light-400:focus { + background-color: var(--pgn-color-action-default-light-400) !important; +} + +.text-light-400 { + color: var(--pgn-color-light-400) !important; +} + +a.text-light-400:hover, +a.text-light-400:focus { + color: var(--pgn-color-action-default-light-400) !important; +} + +.border-light-400 { + border-color: var(--pgn-color-light-400) !important; +} + +.bg-light-500 { + background-color: var(--pgn-color-light-500) !important; +} + +a.bg-light-500:hover, +a.bg-light-500:focus, +button.bg-light-500:hover, +button.bg-light-500:focus { + background-color: var(--pgn-color-action-default-light-500) !important; +} + +.text-light-500 { + color: var(--pgn-color-light-500) !important; +} + +a.text-light-500:hover, +a.text-light-500:focus { + color: var(--pgn-color-action-default-light-500) !important; +} + +.border-light-500 { + border-color: var(--pgn-color-light-500) !important; +} + +.bg-light-600 { + background-color: var(--pgn-color-light-600) !important; +} + +a.bg-light-600:hover, +a.bg-light-600:focus, +button.bg-light-600:hover, +button.bg-light-600:focus { + background-color: var(--pgn-color-action-default-light-600) !important; +} + +.text-light-600 { + color: var(--pgn-color-light-600) !important; +} + +a.text-light-600:hover, +a.text-light-600:focus { + color: var(--pgn-color-action-default-light-600) !important; +} + +.border-light-600 { + border-color: var(--pgn-color-light-600) !important; +} + +.bg-light-700 { + background-color: var(--pgn-color-light-700) !important; +} + +a.bg-light-700:hover, +a.bg-light-700:focus, +button.bg-light-700:hover, +button.bg-light-700:focus { + background-color: var(--pgn-color-action-default-light-700) !important; +} + +.text-light-700 { + color: var(--pgn-color-light-700) !important; +} + +a.text-light-700:hover, +a.text-light-700:focus { + color: var(--pgn-color-action-default-light-700) !important; +} + +.border-light-700 { + border-color: var(--pgn-color-light-700) !important; +} + +.bg-light-800 { + background-color: var(--pgn-color-light-800) !important; +} + +a.bg-light-800:hover, +a.bg-light-800:focus, +button.bg-light-800:hover, +button.bg-light-800:focus { + background-color: var(--pgn-color-action-default-light-800) !important; +} + +.text-light-800 { + color: var(--pgn-color-light-800) !important; +} + +a.text-light-800:hover, +a.text-light-800:focus { + color: var(--pgn-color-action-default-light-800) !important; +} + +.border-light-800 { + border-color: var(--pgn-color-light-800) !important; +} + +.bg-light-900 { + background-color: var(--pgn-color-light-900) !important; +} + +a.bg-light-900:hover, +a.bg-light-900:focus, +button.bg-light-900:hover, +button.bg-light-900:focus { + background-color: var(--pgn-color-action-default-light-900) !important; +} + +.text-light-900 { + color: var(--pgn-color-light-900) !important; +} + +a.text-light-900:hover, +a.text-light-900:focus { + color: var(--pgn-color-action-default-light-900) !important; +} + +.border-light-900 { + border-color: var(--pgn-color-light-900) !important; +} + +.bg-light { + background-color: var(--pgn-color-light-base) !important; +} + +a.bg-light:hover, +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: var(--pgn-color-action-default-light-base) !important; +} + +.text-light { + color: var(--pgn-color-light-base) !important; +} + +a.text-light:hover, +a.text-light:focus { + color: var(--pgn-color-action-default-light-base) !important; +} + +.border-light { + border-color: var(--pgn-color-light-base) !important; +} + +.bg-dark-100 { + background-color: var(--pgn-color-dark-100) !important; +} + +a.bg-dark-100:hover, +a.bg-dark-100:focus, +button.bg-dark-100:hover, +button.bg-dark-100:focus { + background-color: var(--pgn-color-action-default-dark-100) !important; +} + +.text-dark-100 { + color: var(--pgn-color-dark-100) !important; +} + +a.text-dark-100:hover, +a.text-dark-100:focus { + color: var(--pgn-color-action-default-dark-100) !important; +} + +.border-dark-100 { + border-color: var(--pgn-color-dark-100) !important; +} + +.bg-dark-200 { + background-color: var(--pgn-color-dark-200) !important; +} + +a.bg-dark-200:hover, +a.bg-dark-200:focus, +button.bg-dark-200:hover, +button.bg-dark-200:focus { + background-color: var(--pgn-color-action-default-dark-200) !important; +} + +.text-dark-200 { + color: var(--pgn-color-dark-200) !important; +} + +a.text-dark-200:hover, +a.text-dark-200:focus { + color: var(--pgn-color-action-default-dark-200) !important; +} + +.border-dark-200 { + border-color: var(--pgn-color-dark-200) !important; +} + +.bg-dark-300 { + background-color: var(--pgn-color-dark-300) !important; +} + +a.bg-dark-300:hover, +a.bg-dark-300:focus, +button.bg-dark-300:hover, +button.bg-dark-300:focus { + background-color: var(--pgn-color-action-default-dark-300) !important; +} + +.text-dark-300 { + color: var(--pgn-color-dark-300) !important; +} + +a.text-dark-300:hover, +a.text-dark-300:focus { + color: var(--pgn-color-action-default-dark-300) !important; +} + +.border-dark-300 { + border-color: var(--pgn-color-dark-300) !important; +} + +.bg-dark-400 { + background-color: var(--pgn-color-dark-400) !important; +} + +a.bg-dark-400:hover, +a.bg-dark-400:focus, +button.bg-dark-400:hover, +button.bg-dark-400:focus { + background-color: var(--pgn-color-action-default-dark-400) !important; +} + +.text-dark-400 { + color: var(--pgn-color-dark-400) !important; +} + +a.text-dark-400:hover, +a.text-dark-400:focus { + color: var(--pgn-color-action-default-dark-400) !important; +} + +.border-dark-400 { + border-color: var(--pgn-color-dark-400) !important; +} + +.bg-dark-500 { + background-color: var(--pgn-color-dark-500) !important; +} + +a.bg-dark-500:hover, +a.bg-dark-500:focus, +button.bg-dark-500:hover, +button.bg-dark-500:focus { + background-color: var(--pgn-color-action-default-dark-500) !important; +} + +.text-dark-500 { + color: var(--pgn-color-dark-500) !important; +} + +a.text-dark-500:hover, +a.text-dark-500:focus { + color: var(--pgn-color-action-default-dark-500) !important; +} + +.border-dark-500 { + border-color: var(--pgn-color-dark-500) !important; +} + +.bg-dark-600 { + background-color: var(--pgn-color-dark-600) !important; +} + +a.bg-dark-600:hover, +a.bg-dark-600:focus, +button.bg-dark-600:hover, +button.bg-dark-600:focus { + background-color: var(--pgn-color-action-default-dark-600) !important; +} + +.text-dark-600 { + color: var(--pgn-color-dark-600) !important; +} + +a.text-dark-600:hover, +a.text-dark-600:focus { + color: var(--pgn-color-action-default-dark-600) !important; +} + +.border-dark-600 { + border-color: var(--pgn-color-dark-600) !important; +} + +.bg-dark-700 { + background-color: var(--pgn-color-dark-700) !important; +} + +a.bg-dark-700:hover, +a.bg-dark-700:focus, +button.bg-dark-700:hover, +button.bg-dark-700:focus { + background-color: var(--pgn-color-action-default-dark-700) !important; +} + +.text-dark-700 { + color: var(--pgn-color-dark-700) !important; +} + +a.text-dark-700:hover, +a.text-dark-700:focus { + color: var(--pgn-color-action-default-dark-700) !important; +} + +.border-dark-700 { + border-color: var(--pgn-color-dark-700) !important; +} + +.bg-dark-800 { + background-color: var(--pgn-color-dark-800) !important; +} + +a.bg-dark-800:hover, +a.bg-dark-800:focus, +button.bg-dark-800:hover, +button.bg-dark-800:focus { + background-color: var(--pgn-color-action-default-dark-800) !important; +} + +.text-dark-800 { + color: var(--pgn-color-dark-800) !important; +} + +a.text-dark-800:hover, +a.text-dark-800:focus { + color: var(--pgn-color-action-default-dark-800) !important; +} + +.border-dark-800 { + border-color: var(--pgn-color-dark-800) !important; +} + +.bg-dark-900 { + background-color: var(--pgn-color-dark-900) !important; +} + +a.bg-dark-900:hover, +a.bg-dark-900:focus, +button.bg-dark-900:hover, +button.bg-dark-900:focus { + background-color: var(--pgn-color-action-default-dark-900) !important; +} + +.text-dark-900 { + color: var(--pgn-color-dark-900) !important; +} + +a.text-dark-900:hover, +a.text-dark-900:focus { + color: var(--pgn-color-action-default-dark-900) !important; +} + +.border-dark-900 { + border-color: var(--pgn-color-dark-900) !important; +} + +.bg-dark { + background-color: var(--pgn-color-dark-base) !important; +} + +a.bg-dark:hover, +a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { + background-color: var(--pgn-color-action-default-dark-base) !important; +} + +.text-dark { + color: var(--pgn-color-dark-base) !important; +} + +a.text-dark:hover, +a.text-dark:focus { + color: var(--pgn-color-action-default-dark-base) !important; +} + +.border-dark { + border-color: var(--pgn-color-dark-base) !important; +} \ No newline at end of file diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Bold.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Bold.otf new file mode 100644 index 000000000..c2cb631ac Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Bold.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-BoldItalic.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-BoldItalic.otf new file mode 100644 index 000000000..95e53dd16 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-BoldItalic.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Extrabold.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Extrabold.otf new file mode 100644 index 000000000..7515ff802 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Extrabold.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-ExtraboldItalic.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-ExtraboldItalic.otf new file mode 100644 index 000000000..0e39b51e3 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-ExtraboldItalic.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Extralight.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Extralight.otf new file mode 100644 index 000000000..c1ca88272 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Extralight.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-ExtralightItalic.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-ExtralightItalic.otf new file mode 100644 index 000000000..a835f8755 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-ExtralightItalic.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Heavy.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Heavy.otf new file mode 100644 index 000000000..02edb6dd0 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Heavy.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-HeavyItalic.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-HeavyItalic.otf new file mode 100644 index 000000000..c0a51228a Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-HeavyItalic.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Light.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Light.otf new file mode 100644 index 000000000..f8c61fd96 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Light.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-LightItalic.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-LightItalic.otf new file mode 100644 index 000000000..3ef14209e Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-LightItalic.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Medium.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Medium.otf new file mode 100644 index 000000000..e7155847f Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Medium.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-MediumItalic.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-MediumItalic.otf new file mode 100644 index 000000000..f31559a64 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-MediumItalic.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Regular.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Regular.otf new file mode 100644 index 000000000..ebf1e5ce7 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-Regular.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-RegularItalic.otf b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-RegularItalic.otf new file mode 100644 index 000000000..d86d453f7 Binary files /dev/null and b/tutorindigo/templates/indigo/lms/static/fonts/RockfordSans-RegularItalic.otf differ diff --git a/tutorindigo/templates/indigo/lms/static/images/favicon.ico b/tutorindigo/templates/indigo/lms/static/images/favicon.ico index 5bc7c23de..4269e7253 100644 Binary files a/tutorindigo/templates/indigo/lms/static/images/favicon.ico and b/tutorindigo/templates/indigo/lms/static/images/favicon.ico differ diff --git a/tutorindigo/templates/indigo/lms/static/images/logo-white.png b/tutorindigo/templates/indigo/lms/static/images/logo-white.png index 07f2a0d32..7ca297a5e 100644 Binary files a/tutorindigo/templates/indigo/lms/static/images/logo-white.png and b/tutorindigo/templates/indigo/lms/static/images/logo-white.png differ diff --git a/tutorindigo/templates/indigo/lms/static/images/logo-white.svg b/tutorindigo/templates/indigo/lms/static/images/logo-white.svg new file mode 100644 index 000000000..a3ab03e0e --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/images/logo-white.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tutorindigo/templates/indigo/lms/static/images/logo.png b/tutorindigo/templates/indigo/lms/static/images/logo.png index a222e4c74..7ca297a5e 100644 Binary files a/tutorindigo/templates/indigo/lms/static/images/logo.png and b/tutorindigo/templates/indigo/lms/static/images/logo.png differ diff --git a/tutorindigo/templates/indigo/lms/static/images/logo.svg b/tutorindigo/templates/indigo/lms/static/images/logo.svg new file mode 100644 index 000000000..a3ab03e0e --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/images/logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss index 1b6c9a98f..9e86e07ef 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss @@ -1,28 +1,28 @@ // Include custom header body { - .nav-skip { - - &:focus { - left: 50%; - position: absolute; - top: 5px; - height: auto; - background-color: $black; - margin: 0; - opacity: 0.8; - color: white; - text-decoration: none; - outline: none; - text-align: center; - width: auto; - font-size: 1rem; - line-height: 1.45; - padding: 0 5px; - transform: translateX(-50%); - z-index: 9999; - clip: auto; + .nav-skip { + + &:focus { + left: 50%; + position: absolute; + top: 5px; + height: auto; + background-color: $black; + margin: 0; + opacity: 0.8; + color: white; + text-decoration: none; + outline: none; + text-align: center; + width: auto; + font-size: 1rem; + line-height: 1.45; + padding: 0 5px; + transform: translateX(-50%); + z-index: 9999; + clip: auto; + } } - } } header.global-header { @@ -30,131 +30,263 @@ header.global-header { padding: 0; overflow: visible; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.10); + &:after { content: ""; clear: both; display: block; } + .main-header { display: flex; align-items: center; - height: 50px; - - @include media-breakpoint-up(lg) { - display: unset; - height: auto; - } } + .header-logo { margin: 0; + flex-shrink: 0; + a { - margin: 0 0 0 35px; - height: auto; - @include media-breakpoint-up(lg) { - margin: 0; - margin: 6px 0 0; - } + display: flex; + align-items: center; + padding: 1rem 0; + margin-left: 0; + margin-top: -0.05em; .logo { - height: 48px; + height: 28px; margin: 0; - + margin-right: 1rem; body.indigo-dark-theme & { display: none; } } + .logo-white { display: none; + height: 28px; body.indigo-dark-theme & { display: inline-block; } } } + .course-header { display: none; } } + .nav-links { - width: 100%; + flex: 1; + display: flex; + align-items: center; + height: 100%; + justify-content: center; + .main { - margin: 0 0 0 38px; + display: flex; + align-items: center; + margin: 0; + gap: 0.5rem; + .nav-tab { a { - font-size: 14px; + display: inline-flex; + align-items: center; + gap: 0.375rem; + font-size: 0.9rem; font-weight: 500; - line-height: 22px; - padding: 20px 0; - color: $light-dark; - margin: 0 16px 0 0; - border-bottom: 2px solid transparent; - &.active, &:hover { - color: $dark; - border-bottom: 2px solid $primary; + letter-spacing: 0.01em; + padding: 5px 10px; + border-radius: 8px; + color: #374151; + border-bottom: none; + text-decoration: none; + transition: background 150ms ease, color 150ms ease; + + &:hover { + background: #D1FAE5; + color: #059669; + border-bottom: 0; + } + + &.active { + background: #D1FAE5; + color: #059669; + font-weight: 700; + border-bottom: 0; + } + + .lw-nav-icon { + width: 1rem; + height: 1rem; + flex-shrink: 0; } } } - } - .secondary { - margin: 0; - position: relative; - justify-content: end; - .toggle-user-dropdown { - padding: 9px 15px; - background: $primary-light; - color: $primary; - font-size: 14px; - font-weight: 500; - line-height: 20px; - border-radius: 6px; - margin: 12px 0; - &:after { - margin: 4px 0 0 4px; - border: 2px solid $primary; - border-width: 2px 2px 0 0; - transform: rotate(135deg); - content: ""; - height: 5px; - position: relative; - top: 2px; - width: 5px; - display: inline-block; - vertical-align: top; + + // Search — last mainMenu item, matches MFE lw-search-item + .lw-search-item { + display: inline-flex; + align-items: center; + margin-left: 0.75rem; + + // Suppress pill highlight on the search nav item + &:hover, + &:focus-within { + background: none !important; + color: inherit !important; } - .username { - font: -webkit-control; + + .lw-search-wrapper { + position: relative; + display: inline-flex; + align-items: center; + margin-right: 0.5rem; + + .lw-search-icon { + position: absolute; + left: 0.625rem; + width: 1rem; + height: 1rem; + color: #64748B; + pointer-events: none; + } + + .lw-search-input { + border-radius: 6px; + border: 1.5px solid #F8FAFC; + padding: 0.375rem 1rem 0.375rem 2.125rem; + font-size: 0.875rem; + color: #374151; + background: #f9fafb; + width: 8rem; + outline: none; + transition: border-color 150ms ease, background 150ms ease; + + &:focus { + border-color: #9ca3af; + background: #fff; + } + + &::placeholder { + color: #64748B; + } + + &::-webkit-search-decoration, + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } + } } } - .dropdown-user-menu { - position: absolute; - right: 0; - top: 60px; - width: 224px; - border-radius: 6px; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10); - border: none; - overflow: hidden; - .dropdown-item { - border: none !important; - &.hide-desktop { - @include media-breakpoint-up(lg) { - display: none; - } + } + + } + + .secondary { + margin: 0; + position: relative; + justify-content: end; + gap: 0.5rem; + + // Bell — matches MFE .custom-header-container .lw-notification-btn + .lw-notification-btn { + border: 0; + background: none; + padding: 0; + padding-right: 8px; + color: #374151; + cursor: pointer; + display: inline-flex; + align-items: center; + box-shadow: none; + } + + // Avatar button + .lw-avatar-btn { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.5rem; + background: $primary-light; + border-radius: 9999px; + cursor: pointer; + margin: 10px 0; + color: $primary; + + &:after { + display: none; + } + + .lw-avatar-img { + width: 28px; + height: 28px; + border-radius: 50%; + object-fit: cover; + } + + svg { + color: $primary; + } + } + + .toggle-user-dropdown { + padding: 9px 15px; + color: $primary; + font-size: 14px; + background: 0; + font-weight: 500; + line-height: 20px; + border-radius: 6px; + margin: 0; + + .username { + font: -webkit-control; + } + } + + .dropdown-user-menu { + position: absolute; + right: 0; + top: 60px; + width: 224px; + border-radius: 6px; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10); + border: none; + overflow: hidden; + + .dropdown-item { + border: none !important; + + &.hide-desktop { + @include media-breakpoint-up(lg) { + display: none; } - a { - box-sizing: border-box; - padding: 10px; - font-size: 14px; - line-height: 20px; - color: $light-dark; - &:hover { - background: $primary-light; - color: $dark; ; - } + } + + &.lw-dropdown-divider { + border-top: 1px solid #e5e7eb !important; + margin-top: 4px; + padding-top: 4px; + } + + a { + box-sizing: border-box; + padding: 10px; + font-size: 14px; + line-height: 20px; + color: $light-dark; + + &:hover { + background: $primary-light; + color: $dark; } } } } } + .hamburger-menu { height: 17px; width: 20px; @@ -167,15 +299,19 @@ header.global-header { .line { height: 2px; - &:nth-child(2), &:nth-child(3) { + + &:nth-child(2), + &:nth-child(3) { top: 6px; } + &:nth-child(4) { top: 12px; } } } } + .mobile-menu { position: absolute; left: 0; @@ -185,6 +321,7 @@ header.global-header { border: none; border-bottom: 2px solid $primary; width: 100%; + .mobile-nav-link { a { font-weight: normal; @@ -193,113 +330,30 @@ header.global-header { line-height: 20px; color: $light-dark; border: none; - &:hover, &.active { + + &:hover, + &.active { background: $primary-light; color: $dark; } } } } + .header-container { - margin: 0 auto; - padding: 0 15px; - max-width: 1600px; - box-sizing: border-box; - &:after { - display: block; - clear: both; - content: ""; - } + padding-right: calc(24px * 0.5 + 24px); + padding-left: calc(24px * 0.5 + 24px); } -.theme-toggle-button{ - position: relative; - display: {% if INDIGO_ENABLE_DARK_TOGGLE %}flex{% else %}none{% endif %}; - align-items: center; - margin-right: 0 !important; - - @include media-breakpoint-up(lg) { - margin-right: 1.5rem !important; - } - - .light-theme-icon, .dark-theme-icon{ - width: 18px; - height: 1.5rem; - color: $primary; - & svg { - width: inherit; - height: inherit; - } - } - - #toggle-switch { - display: flex; - margin: 0 5px; - - label { - margin: 0; - } - -/* The switch - the box around the slider */ - .switch { - position: relative; - display: inline-block; - width: 45px; - height: 24px; - - /* Hide default HTML checkbox */ - input { - opacity: 0; - width: 0; - height: 0; - - &:focus { - ~ .slider { - outline: 2px solid $primary; - outline-offset: 1px; - } - } - } - - /* The slider */ - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: $light-theme-switch-bg-color; - transition: .4s; - - &::before{ - position: absolute; - content: ""; - height: 20px; - width: 20px; - left: 3px; - bottom: 2px; - background-color: white; - transition: .4s; - } - - &.round{ - border-radius: 34px; - &::before{ - border-radius: 50%; - } - } - } - } - } -} body.indigo-dark-theme { background: $body-bg-d !important; color: $text-color-d !important; + .window-wrap { background: $body-bg-d; } + .mobile-menu { position: absolute; left: 0; @@ -309,56 +363,104 @@ body.indigo-dark-theme { border: none; border-bottom: 2px solid $primary; width: 100%; + .mobile-nav-link { a { background: #454545; color: $text-color-d; - &:hover, &.active { + + &:hover, + &.active { background: #323232; color: $text-color-d; } } } } + header.global-header { background: $body-bg-d; box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.8), 0px 1px 3px 0px rgba(255, 255, 255, 0.1); + .nav-links { .main { .nav-tab { a { color: $text-color-d; - &.active, &:hover { + border-bottom: none; + + &:hover { + background: rgba(255, 255, 255, 0.1); color: $text-color-d; - border-bottom: 2px solid $text-color-d; + border-bottom: 0; + } + + &.active { + background: rgba(209, 250, 229, 0.15); + color: #6ee7b7; + border-bottom: 0; } } } + + .lw-search-item .lw-search-wrapper .lw-search-input { + background: #2d2d2d; + border-color: #444; + color: $text-color-d; + + &::placeholder { + color: #888; + } + } } + .secondary { + .lw-notification-btn { + color: $text-color-d; + + &:hover, + &:focus { + color: #6ee7b7; + } + } + + .lw-avatar-btn { + background: $primary-d; + color: $btn-color-d; + + svg { + color: $btn-color-d; + } + } + .toggle-user-dropdown { background: $primary-d; color: $btn-color-d; + &:after { border-color: $btn-color-d; } } + .dropdown-user-menu { background: $light-overlay-d; box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8), 0px 4px 6px -2px rgba(255, 255, 255, 0.05), 0px 10px 15px -3px rgba(255, 255, 255, 0.1); + .dropdown-item { a { color: $text-color-primary; background: none; + &:hover { background: $body-bg-d; - color: $text-color-d; ; + color: $text-color-d; } } } } } } + .hamburger-menu { .line { background: $text-color-d; @@ -366,24 +468,29 @@ body.indigo-dark-theme { } } -// theme toggle switch - .theme-toggle-button{ - .light-theme-icon, .dark-theme-icon{ + // theme toggle switch + .theme-toggle-button { + + .light-theme-icon, + .dark-theme-icon { color: $text-color-primary; } + #toggle-switch { .switch { input { - &:focus { - ~ .slider { - outline-color: $primary-d; + &:focus { + ~.slider { + outline-color: $primary-d; + } } - } } + /* The slider */ .slider { background-color: $dark-theme-switch-bg-color; - &::before{ + + &::before { transform: translateX(19px); box-shadow: 0 0 1px $primary-d; } diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss index b22e821ec..9fa5f85a5 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss @@ -1720,4 +1720,4 @@ body.indigo-dark-theme { @import '../../../xblock/xblock'; @import '../../../views/teams'; @import '../../../views/wiki'; -@import '../../../courseware/responsive-nav'; +@import '../../../courseware/responsive-nav'; \ No newline at end of file diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_fonts.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_fonts.scss index 8720c730b..20eeafbe8 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_fonts.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_fonts.scss @@ -46,3 +46,136 @@ font-weight: 700; font-style: italic; } + +///////// Sans (Rockford Sans) +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Extralight.otf') format('opentype'); + font-weight: 200; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-ExtralightItalic.otf') format('opentype'); + font-weight: 200; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Light.otf') format('opentype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-LightItalic.otf') format('opentype'); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Regular.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-RegularItalic.otf') format('opentype'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Medium.otf') format('opentype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-MediumItalic.otf') format('opentype'); + font-weight: 500; + font-style: italic; +} + +// Note: this font set has no dedicated SemiBold cut. Alias weight 600 to the +// Medium face so existing `font-weight: 600;` rules (about page, bookmarks, +// programs, header/nav) get an exact match instead of the browser rounding +// up to Bold (700). +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Medium.otf') format('opentype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-MediumItalic.otf') format('opentype'); + font-weight: 600; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Bold.otf') format('opentype'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-BoldItalic.otf') format('opentype'); + font-weight: 700; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Extrabold.otf') format('opentype'); + font-weight: 800; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-ExtraboldItalic.otf') format('opentype'); + font-weight: 800; + font-style: italic; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-Heavy.otf') format('opentype'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: 'Rockford Sans'; + src: + url('#{$static-path}/fonts/RockfordSans-HeavyItalic.otf') format('opentype'); + font-weight: 900; + font-style: italic; +} diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss index b2b9d521e..7d73e826f 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss @@ -2,10 +2,11 @@ $primary: {{ INDIGO_PRIMARY_COLOR }}; $primary-light: #F2F7F8; // Theme fonts -$font-family-title: 'Inter', sans-serif; -$serif: Crimson; -$f-sans-serif: Crimson, 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); +$font-family-title: 'Rockford Sans', sans-serif; +$serif: 'Rockford Sans'; +$f-sans-serif: 'Rockford Sans', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; +$font-weight-base: 200; +$headings-font-weight: 400; // Initialize the Open edX Bootstrap theme @import 'edx-bootstrap/sass/open-edx/theme'; @@ -42,4 +43,4 @@ $warning-400: #ffe340; $warning-700: #9c4607; $warning-accent-700: #fffcf5; -$page-color-transition: transparent .2s ease, color .2s ease; +$page-color-transition: transparent .2s ease, color .2s ease; \ No newline at end of file diff --git a/tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html b/tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html index abfb69ef5..f5b199a0d 100644 --- a/tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html +++ b/tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html @@ -1,60 +1,112 @@ ## mako -<%page expression_filter="h" args="online_help_token"/> +<%page expression_filter="h" args="online_help_token" /> -<%namespace name='static' file='../static_content.html'/> -<%namespace file='../main.html' import="login_query"/> +<%namespace name='static' file='../static_content.html' /> +<%namespace file='../main.html' import="login_query" /> <%! from django.urls import reverse from django.utils.translation import gettext as _ +from openedx.core.djangolib.markup import HTML from openedx.core.djangoapps.site_configuration import helpers as configuration_helpers + +ICON_PATHS = { + 'Home': ( + '' + '' + '' + '' + ), + 'LibraryBooks': ( + '' + '' + '' + '' + '' + ), + 'ClockHour3': ( + '' + '' + '' + '' + ), + 'Search': ( + '' + '' + ), + 'HelpHexagon': ( + '' + '' + '' + '' + ), +} + +SVG_OPEN = ( + '' %> <% - show_explore_courses = settings.FEATURES.get('COURSES_ARE_BROWSABLE') self.real_user = getattr(user, 'real_user', user) - enable_help_link = settings.FEATURES.get('ENABLE_HELP_LINK') - - support_link = configuration_helpers.get_value('SUPPORT_SITE_LINK', settings.SUPPORT_SITE_LINK) - doc_link = get_online_help_info(online_help_token)['doc_url'] - - if online_help_token == "instructor": - help_link = doc_link - elif support_link: - help_link = support_link - else: - help_link = doc_link + nav_links = getattr(settings, 'HEADER_NAV_LINKS', [ + {"title": "My Courses", "url": reverse('dashboard'), "icon": "Home"}, + {"title": "Discover", "url": "/courses", "icon": "Search"}, + ]) + search_url = next((l['url'] for l in nav_links if l.get('icon') == 'Search'), '/courses') %>
-
- % if show_dashboard_tabs: -
- - ${_("My Courses")} - -
- % if show_program_listing: -
- - ${_("Programs")} - -
- % endif - % endif - % if show_explore_courses: -
- - ${_('Discover')} - +
+ % for link in nav_links: + <% + is_active = (link['url'] == request.path or + request.path.startswith(link['url'].rstrip('/') + '/')) + icon_name = link.get('icon', 'Home') + icon_svg = HTML(SVG_OPEN + ICON_PATHS.get(icon_name, ICON_PATHS['Home']) + SVG_CLOSE) + %> +
+ + ${icon_svg} + ${_(link['title'])} + +
+ % endfor + + ## Search — last mainMenu item, matches MFE lw-search-item +
+
+ ${HTML( + '' + )} +
- % endif -
-
- <%include file="./theme-toggle-button.html" /> - <%include file="user_dropdown.html"/> +
+ +
+ ## Bell — matches MFE secondaryMenu (lw-notification-btn) + + <%include file="user_dropdown.html" /> +
diff --git a/tutorindigo/templates/indigo/lms/templates/header/navbar-not-authenticated.html b/tutorindigo/templates/indigo/lms/templates/header/navbar-not-authenticated.html index 10dca56fc..a7143823e 100644 --- a/tutorindigo/templates/indigo/lms/templates/header/navbar-not-authenticated.html +++ b/tutorindigo/templates/indigo/lms/templates/header/navbar-not-authenticated.html @@ -12,47 +12,42 @@ %> <% - mktg_site_enabled = static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)) - courses_are_browsable = settings.FEATURES.get('COURSES_ARE_BROWSABLE') allows_login = not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register - can_discover_courses = settings.FEATURES.get('ENABLE_COURSE_DISCOVERY') - allow_public_account_creation = static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')) and settings.FEATURES.get('SHOW_REGISTRATION_LINKS', True) + allow_public_account_creation = ( + static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')) + and settings.FEATURES.get('SHOW_REGISTRATION_LINKS', True) + ) + + ## Same source of truth as authenticated header and MFEs + nav_links = getattr(settings, 'HEADER_NAV_LINKS', [ + {"title": "Discover", "url": "/courses"}, + ]) %> - +