UNPKG

@ouds/web

Version:

OUDS Web is a Bootstrap based, Orange branded accessible and ergonomic components library.

2,466 lines (2,348 loc) 74.4 kB
/*! * OUDS Web Grid v0.5.0 (https://web.unified-design-system.orange.com/) * Copyright 2014-2025 The OUDS Web Authors * Copyright 2014-2025 Orange SA * Licensed under MIT (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/ouds/main/LICENSE) * This a fork of Bootstrap: Initial license below * Bootstrap Grid v5.3.5 (https://getbootstrap.com/) * Copyright 2011-2025 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ :root, [data-bs-theme=light], :root[data-bs-theme=light] [data-bs-theme=root], :root[data-bs-theme=dark] [data-bs-theme=root-inverted] { --bs-color-action-disabled: rgba(0, 0, 0, 0.2); --bs-color-action-enabled: #000; --bs-color-action-focus: rgba(0, 0, 0, 0.68); --bs-color-action-highlighted: #000; --bs-color-action-hover: rgba(0, 0, 0, 0.68); --bs-color-action-loading: #f15e00; --bs-color-action-negative-enabled: #db0002; --bs-color-action-negative-focus: #b20002; --bs-color-action-negative-hover: #b20002; --bs-color-action-negative-loading: #800001; --bs-color-action-negative-pressed: #800001; --bs-color-action-pressed: #f15e00; --bs-color-action-selected: #f15e00; --bs-color-action-support-enabled: rgba(0, 0, 0, 0.04); --bs-color-action-support-focus: rgba(0, 0, 0, 0.08); --bs-color-action-support-hover: rgba(0, 0, 0, 0.08); --bs-color-action-support-loading: rgba(0, 0, 0, 0.12); --bs-color-action-support-pressed: rgba(0, 0, 0, 0.12); --bs-color-action-visited: #5b2f98; --bs-color-always-black: #000; --bs-color-always-on-black: #eee; --bs-color-always-on-white: #000; --bs-color-always-white: #fff; --bs-color-bg-emphasized: #141414; --bs-color-bg-primary: #fff; --bs-color-bg-secondary: #f4f4f4; --bs-color-bg-tertiary: #f9f5f0; --bs-color-border-brand-primary: #f15e00; --bs-color-border-default: rgba(0, 0, 0, 0.2); --bs-color-border-emphasized: #000; --bs-color-border-focus-inset: #fff; --bs-color-border-focus: #000; --bs-color-border-muted: rgba(0, 0, 0, 0.08); --bs-color-border-on-brand-primary: #000; --bs-color-content-brand-primary: #f15e00; --bs-color-content-default: #000; --bs-color-content-disabled: rgba(0, 0, 0, 0.2); --bs-color-content-muted: rgba(0, 0, 0, 0.68); --bs-color-content-on-action-disabled: #fff; --bs-color-content-on-action-enabled: #fff; --bs-color-content-on-action-focus: #fff; --bs-color-content-on-action-highlighted: #fff; --bs-color-content-on-action-hover: #fff; --bs-color-content-on-action-loading: #fff; --bs-color-content-on-action-pressed: #fff; --bs-color-content-on-brand-primary: #000; --bs-color-content-on-overlay-emphasized: #fff; --bs-color-content-on-status-accent-emphasized: #000; --bs-color-content-on-status-accent-muted: #000; --bs-color-content-on-status-info-emphasized: #000; --bs-color-content-on-status-info-muted: #000; --bs-color-content-on-status-negative-emphasized: #fff; --bs-color-content-on-status-negative-muted: #000; --bs-color-content-on-status-neutral-emphasized: #fff; --bs-color-content-on-status-neutral-muted: #000; --bs-color-content-on-status-positive-emphasized: #000; --bs-color-content-on-status-positive-muted: #000; --bs-color-content-on-status-warning-emphasized: #000; --bs-color-content-on-status-warning-muted: #000; --bs-color-content-status-accent: #ffd000; --bs-color-content-status-info: #26b2ff; --bs-color-content-status-negative: #db0002; --bs-color-content-status-positive: #3de35a; --bs-color-content-status-warning: #ffd000; --bs-color-decorative-accent-1-default: #50be87; --bs-color-decorative-accent-1-emphasized: #2e7b54; --bs-color-decorative-accent-1-muted: #c0e8d4; --bs-color-decorative-accent-2-default: #4ab4e6; --bs-color-decorative-accent-2-emphasized: #136186; --bs-color-decorative-accent-2-muted: #a5daf3; --bs-color-decorative-accent-3-default: #ffd000; --bs-color-decorative-accent-3-emphasized: #ffb400; --bs-color-decorative-accent-3-muted: #ffed99; --bs-color-decorative-accent-4-default: #a885d8; --bs-color-decorative-accent-4-emphasized: #2c174a; --bs-color-decorative-accent-4-muted: #e0d4f2; --bs-color-decorative-accent-5-default: #ffb4e6; --bs-color-decorative-accent-5-emphasized: #ff80d4; --bs-color-decorative-accent-5-muted: #ffe5f6; --bs-color-decorative-brand-primary: #ff7900; --bs-color-decorative-brand-secondary: #000; --bs-color-decorative-brand-tertiary: #fff; --bs-color-decorative-neutral-emphasized-higher: #333; --bs-color-decorative-neutral-emphasized-low: #555; --bs-color-decorative-neutral-emphasized-lower: #5c5c5c; --bs-color-decorative-neutral-emphasized-lowest: #666; --bs-color-decorative-neutral-muted-high: #ccc; --bs-color-decorative-neutral-muted-higher: #999; --bs-color-decorative-neutral-muted-highest: #858585; --bs-color-decorative-neutral-muted-low: #e0e0e0; --bs-color-decorative-neutral-muted-lower: #eee; --bs-color-decorative-neutral-muted-lowest: #f4f4f4; --bs-color-decorative-neutral-muted-medium: #d6d6d6; --bs-color-decorative-skin-tint-100: #fbebdf; --bs-color-decorative-skin-tint-200: #f4cfb2; --bs-color-decorative-skin-tint-300: #e3b591; --bs-color-decorative-skin-tint-400: #c19372; --bs-color-decorative-skin-tint-500: #cf7e3f; --bs-color-decorative-skin-tint-600: #aa6631; --bs-color-decorative-skin-tint-700: #7e4f2a; --bs-color-decorative-skin-tint-800: #553720; --bs-color-decorative-skin-tint-900: #2e2014; --bs-color-opacity-lower: rgba(0, 0, 0, 0.08); --bs-color-opacity-lowest: rgba(0, 0, 0, 0.04); --bs-color-opacity-transparent: rgba(0, 0, 0, 0); --bs-color-overlay-default: #fff; --bs-color-overlay-drag: rgba(0, 0, 0, 0.04); --bs-color-overlay-emphasized: #272727; --bs-color-overlay-modal: #fff; --bs-color-surface-brand-primary: #ff7900; --bs-color-surface-status-accent-emphasized: #ffd000; --bs-color-surface-status-accent-muted: #f9f5f0; --bs-color-surface-status-info-emphasized: #26b2ff; --bs-color-surface-status-info-muted: rgba(38, 178, 255, 0.08); --bs-color-surface-status-negative-emphasized: #db0002; --bs-color-surface-status-negative-muted: rgba(234, 3, 5, 0.08); --bs-color-surface-status-neutral-emphasized: rgba(0, 0, 0, 0.84); --bs-color-surface-status-neutral-muted: rgba(0, 0, 0, 0.04); --bs-color-surface-status-positive-emphasized: #3de35a; --bs-color-surface-status-positive-muted: rgba(61, 227, 90, 0.12); --bs-color-surface-status-warning-emphasized: #ffd000; --bs-color-surface-status-warning-muted: rgba(255, 208, 0, 0.16); --bs-elevation-color-default: rgba(0, 0, 0, 0.24); --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); --bs-elevation-color-emphasized: rgba(0, 0, 0, 0.16); --bs-elevation-color-none: rgba(0, 0, 0, 0); --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); } [data-bs-theme=dark], :root[data-bs-theme=dark] [data-bs-theme=root], :root[data-bs-theme=light] [data-bs-theme=root-inverted] { --bs-color-action-disabled: rgba(255, 255, 255, 0.2); --bs-color-action-enabled: #eee; --bs-color-action-focus: rgba(255, 255, 255, 0.64); --bs-color-action-highlighted: #eee; --bs-color-action-hover: rgba(255, 255, 255, 0.64); --bs-color-action-loading: #ff7900; --bs-color-action-negative-enabled: #ff8081; --bs-color-action-negative-focus: #ffb2b3; --bs-color-action-negative-hover: #ffb2b3; --bs-color-action-negative-loading: #ffe5e6; --bs-color-action-negative-pressed: #ffe5e6; --bs-color-action-pressed: #ff7900; --bs-color-action-selected: #ff7900; --bs-color-action-support-enabled: rgba(255, 255, 255, 0.04); --bs-color-action-support-focus: rgba(255, 255, 255, 0.08); --bs-color-action-support-hover: rgba(255, 255, 255, 0.08); --bs-color-action-support-loading: rgba(255, 255, 255, 0.12); --bs-color-action-support-pressed: rgba(255, 255, 255, 0.12); --bs-color-action-visited: #a885d8; --bs-color-bg-emphasized: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; --bs-color-bg-tertiary: #23211a; --bs-color-border-brand-primary: #ff7900; --bs-color-border-default: rgba(255, 255, 255, 0.2); --bs-color-border-emphasized: rgba(255, 255, 255, 0.92); --bs-color-border-focus: #eee; --bs-color-border-focus-inset: #141414; --bs-color-border-muted: rgba(255, 255, 255, 0.08); --bs-color-border-on-brand-primary: #000; --bs-color-content-brand-primary: #ff7900; --bs-color-content-default: #eee; --bs-color-content-disabled: rgba(255, 255, 255, 0.2); --bs-color-content-muted: rgba(255, 255, 255, 0.64); --bs-color-content-on-action-disabled: #000; --bs-color-content-on-action-enabled: #000; --bs-color-content-on-action-focus: #000; --bs-color-content-on-action-highlighted: #000; --bs-color-content-on-action-hover: #000; --bs-color-content-on-action-loading: #000; --bs-color-content-on-action-pressed: #000; --bs-color-content-on-brand-primary: #000; --bs-color-content-on-overlay-emphasized: #000; --bs-color-content-on-status-accent-emphasized: #000; --bs-color-content-on-status-accent-muted: #eee; --bs-color-content-on-status-info-emphasized: #000; --bs-color-content-on-status-info-muted: #eee; --bs-color-content-on-status-negative-emphasized: #000; --bs-color-content-on-status-negative-muted: #eee; --bs-color-content-on-status-neutral-emphasized: #000; --bs-color-content-on-status-neutral-muted: #eee; --bs-color-content-on-status-positive-emphasized: #000; --bs-color-content-on-status-positive-muted: #eee; --bs-color-content-on-status-warning-emphasized: #000; --bs-color-content-on-status-warning-muted: #eee; --bs-color-content-status-accent: #ffd000; --bs-color-content-status-info: #26b2ff; --bs-color-content-status-negative: #db0002; --bs-color-content-status-positive: #3de35a; --bs-color-content-status-warning: #ffd000; --bs-color-opacity-lower: rgba(255, 255, 255, 0.08); --bs-color-opacity-lowest: rgba(255, 255, 255, 0.04); --bs-color-opacity-transparent: rgba(255, 255, 255, 0); --bs-color-overlay-default: rgba(255, 255, 255, 0.08); --bs-color-overlay-drag: rgba(255, 255, 255, 0.2); --bs-color-overlay-emphasized: #eee; --bs-color-overlay-modal: #333; --bs-color-surface-brand-primary: #ff7900; --bs-color-surface-status-accent-emphasized: #ffe270; --bs-color-surface-status-accent-muted: #23211a; --bs-color-surface-status-info-emphasized: #8ad5ff; --bs-color-surface-status-info-muted: #003857; --bs-color-surface-status-negative-emphasized: #ff8081; --bs-color-surface-status-negative-muted: #4d0001; --bs-color-surface-status-neutral-emphasized: rgba(255, 255, 255, 0.92); --bs-color-surface-status-neutral-muted: rgba(255, 255, 255, 0.08); --bs-color-surface-status-positive-emphasized: #94f0a4; --bs-color-surface-status-positive-muted: #0a4715; --bs-color-surface-status-warning-emphasized: #ffe270; --bs-color-surface-status-warning-muted: #3d3100; } :root, [data-bs-theme=light], :root[data-bs-theme=light] [data-bs-theme=root], :root[data-bs-theme=dark] [data-bs-theme=root-inverted] { --bs-button-mono-color-bg-default-hover: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-default-pressed: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-default-loading: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-default-focus: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-minimal-hover: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-minimal-pressed: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-minimal-loading: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-minimal-focus: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-strong-enabled: #000; --bs-button-mono-color-bg-strong-hover: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-strong-pressed: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-strong-loading: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-strong-disabled: rgba(0, 0, 0, 0.28); --bs-button-mono-color-bg-strong-focus: rgba(0, 0, 0, 0.68); --bs-button-mono-color-content-default-enabled: #000; --bs-button-mono-color-content-default-hover: #fff; --bs-button-mono-color-content-default-pressed: #000; --bs-button-mono-color-content-default-loading: #000; --bs-button-mono-color-content-default-disabled: rgba(0, 0, 0, 0.28); --bs-button-mono-color-content-default-focus: #fff; --bs-button-mono-color-content-minimal-enabled: #000; --bs-button-mono-color-content-minimal-hover: #fff; --bs-button-mono-color-content-minimal-pressed: #000; --bs-button-mono-color-content-minimal-loading: #000; --bs-button-mono-color-content-minimal-disabled: rgba(0, 0, 0, 0.28); --bs-button-mono-color-content-minimal-focus: #fff; --bs-button-mono-color-content-strong-enabled: #fff; --bs-button-mono-color-content-strong-hover: #fff; --bs-button-mono-color-content-strong-pressed: #000; --bs-button-mono-color-content-strong-loading: #000; --bs-button-mono-color-content-strong-disabled: rgba(255, 255, 255, 0.64); --bs-button-mono-color-content-strong-focus: #fff; --bs-button-mono-color-border-default-enabled: #000; --bs-button-mono-color-border-default-disabled: rgba(0, 0, 0, 0.28); --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); --bs-link-mono-color-content-disabled: rgba(0, 0, 0, 0.28); --bs-link-mono-color-content-focus: #000; --bs-switch-color-cursor: #fff; --bs-switch-color-track-selected: #3de35a; --bs-switch-color-track-selected-interaction: #1ecd3c; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); --bs-tabs-color-bg-default: rgba(255, 255, 255, 0); --bs-tabs-color-bg-sticky: rgba(255, 255, 255, 0); --bs-tabs-color-gradient-drag-overlay-end: rgba(255, 255, 255, 0.04); --bs-button-social-color-content-focus: #fff; } [data-bs-theme=dark], :root[data-bs-theme=dark] [data-bs-theme=root], :root[data-bs-theme=light] [data-bs-theme=root-inverted] { --bs-button-mono-color-bg-default-hover: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-default-pressed: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-default-loading: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-default-focus: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-minimal-hover: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-minimal-pressed: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-minimal-loading: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-minimal-focus: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-strong-enabled: #fff; --bs-button-mono-color-bg-strong-hover: rgba(255, 255, 255, 0.8); --bs-button-mono-color-bg-strong-pressed: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-strong-loading: rgba(0, 0, 0, 0.68); --bs-button-mono-color-bg-strong-disabled: rgba(255, 255, 255, 0.44); --bs-button-mono-color-bg-strong-focus: rgba(255, 255, 255, 0.8); --bs-button-mono-color-content-default-enabled: #fff; --bs-button-mono-color-content-default-hover: #000; --bs-button-mono-color-content-default-pressed: #fff; --bs-button-mono-color-content-default-loading: #fff; --bs-button-mono-color-content-default-disabled: rgba(255, 255, 255, 0.44); --bs-button-mono-color-content-default-focus: #000; --bs-button-mono-color-content-minimal-enabled: #fff; --bs-button-mono-color-content-minimal-hover: #000; --bs-button-mono-color-content-minimal-pressed: #fff; --bs-button-mono-color-content-minimal-loading: #fff; --bs-button-mono-color-content-minimal-disabled: rgba(255, 255, 255, 0.44); --bs-button-mono-color-content-minimal-focus: #000; --bs-button-mono-color-content-strong-enabled: #000; --bs-button-mono-color-content-strong-hover: #000; --bs-button-mono-color-content-strong-pressed: #fff; --bs-button-mono-color-content-strong-loading: #fff; --bs-button-mono-color-content-strong-disabled: rgba(0, 0, 0, 0.44); --bs-button-mono-color-content-strong-focus: #000; --bs-button-mono-color-border-default-enabled: #fff; --bs-button-mono-color-border-default-disabled: rgba(255, 255, 255, 0.44); --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); --bs-link-mono-color-content-disabled: rgba(255, 255, 255, 0.44); --bs-link-mono-color-content-focus: #fff; --bs-switch-color-cursor: #141414; --bs-switch-color-track-selected: #1ecd3c; --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); --bs-tabs-color-bg-default: rgba(0, 0, 0, 0); --bs-tabs-color-bg-sticky: rgba(0, 0, 0, 0); --bs-tabs-color-gradient-drag-overlay-end: rgba(0, 0, 0, 0.04); --bs-button-social-color-content-focus: #000; } .container-fluid { width: 100%; padding-left: var(--bs-container-margin-x); padding-right: var(--bs-container-margin-x); margin-left: auto; margin-right: auto; --bs-container-margin-x: 16px; } @media (min-width: 390px) { .container-fluid { --bs-container-margin-x: 24px; } } @media (min-width: 480px) { .container-fluid { --bs-container-margin-x: 28px; } } @media (min-width: 736px) { .container-fluid { --bs-container-margin-x: 32px; } } @media (min-width: 1024px) { .container-fluid { --bs-container-margin-x: 40px; } } @media (min-width: 1320px) { .container-fluid { --bs-container-margin-x: 56px; } } @media (min-width: 1640px) { .container-fluid { --bs-container-margin-x: 80px; } } @media (min-width: 1880px) { .container-fluid { --bs-container-margin-x: 112px; } } @media (min-width: 1640px) { .container-max-width { --bs-container-margin-x: 80px; max-width: 1680px; } .container-max-width .row { --bs-gutter-x: 32px; } } :root { --bs-breakpoint-2xs: 0; --bs-breakpoint-xs: 390px; --bs-breakpoint-sm: 480px; --bs-breakpoint-md: 736px; --bs-breakpoint-lg: 1024px; --bs-breakpoint-xl: 1320px; --bs-breakpoint-2xl: 1640px; --bs-breakpoint-3xl: 1880px; } .row { --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-right: calc(-0.5 * var(--bs-gutter-x)); --bs-gutter-x: 8px; } @media (min-width: 390px) { .row { --bs-gutter-x: 16px; } } @media (min-width: 480px) { .row { --bs-gutter-x: 16px; } } @media (min-width: 736px) { .row { --bs-gutter-x: 24px; } } @media (min-width: 1024px) { .row { --bs-gutter-x: 24px; } } @media (min-width: 1320px) { .row { --bs-gutter-x: 32px; } } @media (min-width: 1640px) { .row { --bs-gutter-x: 32px; } } @media (min-width: 1880px) { .row { --bs-gutter-x: 40px; } } .row > * { box-sizing: border-box; flex-shrink: 0; width: 100%; max-width: 100%; padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .col { flex: 1 0 0; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2 { flex: 0 0 auto; width: 16.66666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.33333333%; } .col-5 { flex: 0 0 auto; width: 41.66666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.33333333%; } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.33333333%; } .col-11 { flex: 0 0 auto; width: 91.66666667%; } .col-12 { flex: 0 0 auto; width: 100%; } .offset-1 { margin-right: 8.33333333%; } .offset-2 { margin-right: 16.66666667%; } .offset-3 { margin-right: 25%; } .offset-4 { margin-right: 33.33333333%; } .offset-5 { margin-right: 41.66666667%; } .offset-6 { margin-right: 50%; } .offset-7 { margin-right: 58.33333333%; } .offset-8 { margin-right: 66.66666667%; } .offset-9 { margin-right: 75%; } .offset-10 { margin-right: 83.33333333%; } .offset-11 { margin-right: 91.66666667%; } .g-none, .gx-none { --bs-gutter-x: 0px !important; } .g-none, .gy-none { --bs-gutter-y: 0px !important; } .g-3xs, .gx-3xs { --bs-gutter-x: 2px !important; } .g-3xs, .gy-3xs { --bs-gutter-y: 2px !important; } .g-2xs, .gx-2xs { --bs-gutter-x: 4px !important; } .g-2xs, .gy-2xs { --bs-gutter-y: 4px !important; } .g-xs, .gx-xs { --bs-gutter-x: 8px !important; } .g-xs, .gy-xs { --bs-gutter-y: 8px !important; } .g-sm, .gx-sm { --bs-gutter-x: 12px !important; } .g-sm, .gy-sm { --bs-gutter-y: 12px !important; } .g-md, .gx-md { --bs-gutter-x: 16px !important; } .g-md, .gy-md { --bs-gutter-y: 16px !important; } .g-lg, .gx-lg { --bs-gutter-x: 24px !important; } .g-lg, .gy-lg { --bs-gutter-y: 24px !important; } .g-xl, .gx-xl { --bs-gutter-x: 32px !important; } .g-xl, .gy-xl { --bs-gutter-y: 32px !important; } .g-2xl, .gx-2xl { --bs-gutter-x: 40px !important; } .g-2xl, .gy-2xl { --bs-gutter-y: 40px !important; } .g-3xl, .gx-3xl { --bs-gutter-x: 48px !important; } .g-3xl, .gy-3xl { --bs-gutter-y: 48px !important; } .g-4xl, .gx-4xl { --bs-gutter-x: 56px !important; } .g-4xl, .gy-4xl { --bs-gutter-y: 56px !important; } .g-5xl, .gx-5xl { --bs-gutter-x: 64px !important; } .g-5xl, .gy-5xl { --bs-gutter-y: 64px !important; } @media (min-width: 390px) { .col-xs { flex: 1 0 0; } .row-cols-xs-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xs-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xs-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xs-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-xs-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xs-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xs-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-xs-auto { flex: 0 0 auto; width: auto; } .col-xs-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xs-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xs-3 { flex: 0 0 auto; width: 25%; } .col-xs-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xs-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xs-6 { flex: 0 0 auto; width: 50%; } .col-xs-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xs-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xs-9 { flex: 0 0 auto; width: 75%; } .col-xs-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xs-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xs-12 { flex: 0 0 auto; width: 100%; } .offset-xs-0 { margin-right: 0; } .offset-xs-1 { margin-right: 8.33333333%; } .offset-xs-2 { margin-right: 16.66666667%; } .offset-xs-3 { margin-right: 25%; } .offset-xs-4 { margin-right: 33.33333333%; } .offset-xs-5 { margin-right: 41.66666667%; } .offset-xs-6 { margin-right: 50%; } .offset-xs-7 { margin-right: 58.33333333%; } .offset-xs-8 { margin-right: 66.66666667%; } .offset-xs-9 { margin-right: 75%; } .offset-xs-10 { margin-right: 83.33333333%; } .offset-xs-11 { margin-right: 91.66666667%; } .g-xs-none, .gx-xs-none { --bs-gutter-x: 0px !important; } .g-xs-none, .gy-xs-none { --bs-gutter-y: 0px !important; } .g-xs-3xs, .gx-xs-3xs { --bs-gutter-x: 2px !important; } .g-xs-3xs, .gy-xs-3xs { --bs-gutter-y: 2px !important; } .g-xs-2xs, .gx-xs-2xs { --bs-gutter-x: 4px !important; } .g-xs-2xs, .gy-xs-2xs { --bs-gutter-y: 4px !important; } .g-xs-xs, .gx-xs-xs { --bs-gutter-x: 8px !important; } .g-xs-xs, .gy-xs-xs { --bs-gutter-y: 8px !important; } .g-xs-sm, .gx-xs-sm { --bs-gutter-x: 12px !important; } .g-xs-sm, .gy-xs-sm { --bs-gutter-y: 12px !important; } .g-xs-md, .gx-xs-md { --bs-gutter-x: 16px !important; } .g-xs-md, .gy-xs-md { --bs-gutter-y: 16px !important; } .g-xs-lg, .gx-xs-lg { --bs-gutter-x: 24px !important; } .g-xs-lg, .gy-xs-lg { --bs-gutter-y: 24px !important; } .g-xs-xl, .gx-xs-xl { --bs-gutter-x: 32px !important; } .g-xs-xl, .gy-xs-xl { --bs-gutter-y: 32px !important; } .g-xs-2xl, .gx-xs-2xl { --bs-gutter-x: 40px !important; } .g-xs-2xl, .gy-xs-2xl { --bs-gutter-y: 40px !important; } .g-xs-3xl, .gx-xs-3xl { --bs-gutter-x: 48px !important; } .g-xs-3xl, .gy-xs-3xl { --bs-gutter-y: 48px !important; } .g-xs-4xl, .gx-xs-4xl { --bs-gutter-x: 56px !important; } .g-xs-4xl, .gy-xs-4xl { --bs-gutter-y: 56px !important; } .g-xs-5xl, .gx-xs-5xl { --bs-gutter-x: 64px !important; } .g-xs-5xl, .gy-xs-5xl { --bs-gutter-y: 64px !important; } } @media (min-width: 480px) { .col-sm { flex: 1 0 0; } .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } .offset-sm-0 { margin-right: 0; } .offset-sm-1 { margin-right: 8.33333333%; } .offset-sm-2 { margin-right: 16.66666667%; } .offset-sm-3 { margin-right: 25%; } .offset-sm-4 { margin-right: 33.33333333%; } .offset-sm-5 { margin-right: 41.66666667%; } .offset-sm-6 { margin-right: 50%; } .offset-sm-7 { margin-right: 58.33333333%; } .offset-sm-8 { margin-right: 66.66666667%; } .offset-sm-9 { margin-right: 75%; } .offset-sm-10 { margin-right: 83.33333333%; } .offset-sm-11 { margin-right: 91.66666667%; } .g-sm-none, .gx-sm-none { --bs-gutter-x: 0px !important; } .g-sm-none, .gy-sm-none { --bs-gutter-y: 0px !important; } .g-sm-3xs, .gx-sm-3xs { --bs-gutter-x: 2px !important; } .g-sm-3xs, .gy-sm-3xs { --bs-gutter-y: 2px !important; } .g-sm-2xs, .gx-sm-2xs { --bs-gutter-x: 4px !important; } .g-sm-2xs, .gy-sm-2xs { --bs-gutter-y: 4px !important; } .g-sm-xs, .gx-sm-xs { --bs-gutter-x: 8px !important; } .g-sm-xs, .gy-sm-xs { --bs-gutter-y: 8px !important; } .g-sm-sm, .gx-sm-sm { --bs-gutter-x: 12px !important; } .g-sm-sm, .gy-sm-sm { --bs-gutter-y: 12px !important; } .g-sm-md, .gx-sm-md { --bs-gutter-x: 16px !important; } .g-sm-md, .gy-sm-md { --bs-gutter-y: 16px !important; } .g-sm-lg, .gx-sm-lg { --bs-gutter-x: 24px !important; } .g-sm-lg, .gy-sm-lg { --bs-gutter-y: 24px !important; } .g-sm-xl, .gx-sm-xl { --bs-gutter-x: 32px !important; } .g-sm-xl, .gy-sm-xl { --bs-gutter-y: 32px !important; } .g-sm-2xl, .gx-sm-2xl { --bs-gutter-x: 40px !important; } .g-sm-2xl, .gy-sm-2xl { --bs-gutter-y: 40px !important; } .g-sm-3xl, .gx-sm-3xl { --bs-gutter-x: 48px !important; } .g-sm-3xl, .gy-sm-3xl { --bs-gutter-y: 48px !important; } .g-sm-4xl, .gx-sm-4xl { --bs-gutter-x: 56px !important; } .g-sm-4xl, .gy-sm-4xl { --bs-gutter-y: 56px !important; } .g-sm-5xl, .gx-sm-5xl { --bs-gutter-x: 64px !important; } .g-sm-5xl, .gy-sm-5xl { --bs-gutter-y: 64px !important; } } @media (min-width: 736px) { .col-md { flex: 1 0 0; } .row-cols-md-auto > * { flex: 0 0 auto; width: auto; } .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-md-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-md-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-5 { flex: 0 0 auto; width: 41.66666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } .offset-md-0 { margin-right: 0; } .offset-md-1 { margin-right: 8.33333333%; } .offset-md-2 { margin-right: 16.66666667%; } .offset-md-3 { margin-right: 25%; } .offset-md-4 { margin-right: 33.33333333%; } .offset-md-5 { margin-right: 41.66666667%; } .offset-md-6 { margin-right: 50%; } .offset-md-7 { margin-right: 58.33333333%; } .offset-md-8 { margin-right: 66.66666667%; } .offset-md-9 { margin-right: 75%; } .offset-md-10 { margin-right: 83.33333333%; } .offset-md-11 { margin-right: 91.66666667%; } .g-md-none, .gx-md-none { --bs-gutter-x: 0px !important; } .g-md-none, .gy-md-none { --bs-gutter-y: 0px !important; } .g-md-3xs, .gx-md-3xs { --bs-gutter-x: 2px !important; } .g-md-3xs, .gy-md-3xs { --bs-gutter-y: 2px !important; } .g-md-2xs, .gx-md-2xs { --bs-gutter-x: 4px !important; } .g-md-2xs, .gy-md-2xs { --bs-gutter-y: 4px !important; } .g-md-xs, .gx-md-xs { --bs-gutter-x: 8px !important; } .g-md-xs, .gy-md-xs { --bs-gutter-y: 8px !important; } .g-md-sm, .gx-md-sm { --bs-gutter-x: 12px !important; } .g-md-sm, .gy-md-sm { --bs-gutter-y: 12px !important; } .g-md-md, .gx-md-md { --bs-gutter-x: 16px !important; } .g-md-md, .gy-md-md { --bs-gutter-y: 16px !important; } .g-md-lg, .gx-md-lg { --bs-gutter-x: 24px !important; } .g-md-lg, .gy-md-lg { --bs-gutter-y: 24px !important; } .g-md-xl, .gx-md-xl { --bs-gutter-x: 32px !important; } .g-md-xl, .gy-md-xl { --bs-gutter-y: 32px !important; } .g-md-2xl, .gx-md-2xl { --bs-gutter-x: 40px !important; } .g-md-2xl, .gy-md-2xl { --bs-gutter-y: 40px !important; } .g-md-3xl, .gx-md-3xl { --bs-gutter-x: 48px !important; } .g-md-3xl, .gy-md-3xl { --bs-gutter-y: 48px !important; } .g-md-4xl, .gx-md-4xl { --bs-gutter-x: 56px !important; } .g-md-4xl, .gy-md-4xl { --bs-gutter-y: 56px !important; } .g-md-5xl, .gx-md-5xl { --bs-gutter-x: 64px !important; } .g-md-5xl, .gy-md-5xl { --bs-gutter-y: 64px !important; } } @media (min-width: 1024px) { .col-lg { flex: 1 0 0; } .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } .offset-lg-0 { margin-right: 0; } .offset-lg-1 { margin-right: 8.33333333%; } .offset-lg-2 { margin-right: 16.66666667%; } .offset-lg-3 { margin-right: 25%; } .offset-lg-4 { margin-right: 33.33333333%; } .offset-lg-5 { margin-right: 41.66666667%; } .offset-lg-6 { margin-right: 50%; } .offset-lg-7 { margin-right: 58.33333333%; } .offset-lg-8 { margin-right: 66.66666667%; } .offset-lg-9 { margin-right: 75%; } .offset-lg-10 { margin-right: 83.33333333%; } .offset-lg-11 { margin-right: 91.66666667%; } .g-lg-none, .gx-lg-none { --bs-gutter-x: 0px !important; } .g-lg-none, .gy-lg-none { --bs-gutter-y: 0px !important; } .g-lg-3xs, .gx-lg-3xs { --bs-gutter-x: 2px !important; } .g-lg-3xs, .gy-lg-3xs { --bs-gutter-y: 2px !important; } .g-lg-2xs, .gx-lg-2xs { --bs-gutter-x: 4px !important; } .g-lg-2xs, .gy-lg-2xs { --bs-gutter-y: 4px !important; } .g-lg-xs, .gx-lg-xs { --bs-gutter-x: 8px !important; } .g-lg-xs, .gy-lg-xs { --bs-gutter-y: 8px !important; } .g-lg-sm, .gx-lg-sm { --bs-gutter-x: 12px !important; } .g-lg-sm, .gy-lg-sm { --bs-gutter-y: 12px !important; } .g-lg-md, .gx-lg-md { --bs-gutter-x: 16px !important; } .g-lg-md, .gy-lg-md { --bs-gutter-y: 16px !important; } .g-lg-lg, .gx-lg-lg { --bs-gutter-x: 24px !important; } .g-lg-lg, .gy-lg-lg { --bs-gutter-y: 24px !important; } .g-lg-xl, .gx-lg-xl { --bs-gutter-x: 32px !important; } .g-lg-xl, .gy-lg-xl { --bs-gutter-y: 32px !important; } .g-lg-2xl, .gx-lg-2xl { --bs-gutter-x: 40px !important; } .g-lg-2xl, .gy-lg-2xl { --bs-gutter-y: 40px !important; } .g-lg-3xl, .gx-lg-3xl { --bs-gutter-x: 48px !important; } .g-lg-3xl, .gy-lg-3xl { --bs-gutter-y: 48px !important; } .g-lg-4xl, .gx-lg-4xl { --bs-gutter-x: 56px !important; } .g-lg-4xl, .gy-lg-4xl { --bs-gutter-y: 56px !important; } .g-lg-5xl, .gx-lg-5xl { --bs-gutter-x: 64px !important; } .g-lg-5xl, .gy-lg-5xl { --bs-gutter-y: 64px !important; } } @media (min-width: 1320px) { .col-xl { flex: 1 0 0; } .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } .offset-xl-0 { margin-right: 0; } .offset-xl-1 { margin-right: 8.33333333%; } .offset-xl-2 { margin-right: 16.66666667%; } .offset-xl-3 { margin-right: 25%; } .offset-xl-4 { margin-right: 33.33333333%; } .offset-xl-5 { margin-right: 41.66666667%; } .offset-xl-6 { margin-right: 50%; } .offset-xl-7 { margin-right: 58.33333333%; } .offset-xl-8 { margin-right: 66.66666667%; } .offset-xl-9 { margin-right: 75%; } .offset-xl-10 { margin-right: 83.33333333%; } .offset-xl-11 { margin-right: 91.66666667%; } .g-xl-none, .gx-xl-none { --bs-gutter-x: 0px !important; } .g-xl-none, .gy-xl-none { --bs-gutter-y: 0px !important; } .g-xl-3xs, .gx-xl-3xs { --bs-gutter-x: 2px !important; } .g-xl-3xs, .gy-xl-3xs { --bs-gutter-y: 2px !important; } .g-xl-2xs, .gx-xl-2xs { --bs-gutter-x: 4px !important; } .g-xl-2xs, .gy-xl-2xs { --bs-gutter-y: 4px !important; } .g-xl-xs, .gx-xl-xs { --bs-gutter-x: 8px !important; } .g-xl-xs, .gy-xl-xs { --bs-gutter-y: 8px !important; } .g-xl-sm, .gx-xl-sm { --bs-gutter-x: 12px !important; } .g-xl-sm, .gy-xl-sm { --bs-gutter-y: 12px !important; } .g-xl-md, .gx-xl-md { --bs-gutter-x: 16px !important; } .g-xl-md, .gy-xl-md { --bs-gutter-y: 16px !important; } .g-xl-lg, .gx-xl-lg { --bs-gutter-x: 24px !important; } .g-xl-lg, .gy-xl-lg { --bs-gutter-y: 24px !important; } .g-xl-xl, .gx-xl-xl { --bs-gutter-x: 32px !important; } .g-xl-xl, .gy-xl-xl { --bs-gutter-y: 32px !important; } .g-xl-2xl, .gx-xl-2xl { --bs-gutter-x: 40px !important; } .g-xl-2xl, .gy-xl-2xl { --bs-gutter-y: 40px !important; } .g-xl-3xl, .gx-xl-3xl { --bs-gutter-x: 48px !important; } .g-xl-3xl, .gy-xl-3xl { --bs-gutter-y: 48px !important; } .g-xl-4xl, .gx-xl-4xl { --bs-gutter-x: 56px !important; } .g-xl-4xl, .gy-xl-4xl { --bs-gutter-y: 56px !important; } .g-xl-5xl, .gx-xl-5xl { --bs-gutter-x: 64px !important; } .g-xl-5xl, .gy-xl-5xl { --bs-gutter-y: 64px !important; } } @media (min-width: 1640px) { .col-2xl { flex: 1 0 0; } .row-cols-2xl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-2xl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2xl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-2xl-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-2xl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-2xl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-2xl-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-2xl-auto { flex: 0 0 auto; width: auto; } .col-2xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-2xl-3 { flex: 0 0 auto; width: 25%; } .col-2xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-2xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-2xl-6 { flex: 0 0 auto; width: 50%; } .col-2xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-2xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-2xl-9 { flex: 0 0 auto; width: 75%; } .col-2xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-2xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-2xl-12 { flex: 0 0 auto; width: 100%; } .offset-2xl-0 { margin-right: 0; } .offset-2xl-1 { margin-right: 8.33333333%; } .offset-2xl-2 { margin-right: 16.66666667%; } .offset-2xl-3 { margin-right: 25%; } .offset-2xl-4 { margin-right: 33.33333333%; } .offset-2xl-5 { margin-right: 41.66666667%; } .offset-2xl-6 { margin-right: 50%; } .offset-2xl-7 { margin-right: 58.33333333%; } .offset-2xl-8 { margin-right: 66.66666667%; } .offset-2xl-9 { margin-right: 75%; } .offset-2xl-10 { margin-right: 83.33333333%; } .offset-2xl-11 { margin-right: 91.66666667%; } .g-2xl-none, .gx-2xl-none { --bs-gutter-x: 0px !important; } .g-2xl-none, .gy-2xl-none { --bs-gutter-y: 0px !important; } .g-2xl-3xs, .gx-2xl-3xs { --bs-gutter-x: 2px !important; } .g-2xl-3xs, .gy-2xl-3xs { --bs-gutter-y: 2px !important; } .g-2xl-2xs, .gx-2xl-2xs { --bs-gutter-x: 4px !important; } .g-2xl-2xs, .gy-2xl-2xs { --bs-gutter-y: 4px !important; } .g-2xl-xs, .gx-2xl-xs { --bs-gutter-x: 8px !important; } .g-2xl-xs, .gy-2xl-xs { --bs-gutter-y: 8px !important; } .g-2xl-sm, .gx-2xl-sm { --bs-gutter-x: 12px !important; } .g-2xl-sm, .gy-2xl-sm { --bs-gutter-y: 12px !important; } .g-2xl-md, .gx-2xl-md { --bs-gutter-x: 16px !important; } .g-2xl-md, .gy-2xl-md { --bs-gutter-y: 16px !important; } .g-2xl-lg, .gx-2xl-lg { --bs-gutter-x: 24px !important; } .g-2xl-lg, .gy-2xl-lg { --bs-gutter-y: 24px !important; } .g-2xl-xl, .gx-2xl-xl { --bs-gutter-x: 32px !important; } .g-2xl-xl, .gy-2xl-xl { --bs-gutter-y: 32px !important; } .g-2xl-2xl, .gx-2xl-2xl { --bs-gutter-x: 40px !important; } .g-2xl-2xl, .gy-2xl-2xl { --bs-gutter-y: 40px !important; } .g-2xl-3xl, .gx-2xl-3xl { --bs-gutter-x: 48px !important; } .g-2xl-3xl, .gy-2xl-3xl { --bs-gutter-y: 48px !important; } .g-2xl-4xl, .gx-2xl-4xl { --bs-gutter-x: 56px !important; } .g-2xl-4xl, .gy-2xl-4xl { --bs-gutter-y: 56px !important; } .g-2xl-5xl, .gx-2xl-5xl { --bs-gutter-x: 64px !important; } .g-2xl-5xl, .gy-2xl-5xl { --bs-gutter-y: 64px !important; } } @media (min-width: 1880px) { .col-3xl { flex: 1 0 0; } .row-cols-3xl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-3xl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-3xl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3xl-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-3xl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-3xl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-3xl-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-3xl-auto { flex: 0 0 auto; width: auto; } .col-3xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-3xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-3xl-3 { flex: 0 0 auto; width: 25%; } .col-3xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-3xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-3xl-6 { flex: 0 0 auto; width: 50%; } .col-3xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-3xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-3xl-9 { flex: 0 0 auto; width: 75%; } .col-3xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-3xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-3xl-12 { flex: 0 0 auto; width: 100%; } .offset-3xl-0 { margin-right: 0; } .offset-3xl-1 { margin-right: 8.33333333%; } .offset-3xl-2 { margin-right: 16.66666667%; } .offset-3xl-3 { margin-right: 25%; } .offset-3xl-4 { margin-right: 33.33333333%; } .offset-3xl-5 { margin-right: 41.66666667%; } .offset-3xl-6 { margin-right: 50%; } .offset-3xl-7 { margin-right: 58.33333333%; } .offset-3xl-8 { margin-right: 66.66666667%; } .offset-3xl-9 { margin-right: 75%; } .offset-3xl-10 { margin-right: 83.33333333%; } .offset-3xl-11 { margin-right: 91.66666667%; } .g-3xl-none, .gx-3xl-none { --bs-gutter-x: 0px !important; } .g-3xl-none, .gy-3xl-none { --bs-gutter-y: 0px !important; } .g-3xl-3xs, .gx-3xl-3xs { --bs-gutter-x: 2px !important; } .g-3xl-3xs, .gy-3xl-3xs { --bs-gutter-y: 2px !important; } .g-3xl-2xs, .gx-3xl-2xs { --bs-gutter-x: 4px !important; } .g-3xl-2xs, .gy-3xl-2xs { --bs-gutter-y: 4px !important; } .g-3xl-xs, .gx-3xl-xs { --bs-gutter-x: 8px !important; } .g-3xl-xs, .gy-3xl-xs { --bs-gutter-y: 8px !important; } .g-3xl-sm, .gx-3xl-sm { --bs-gutter-x: 12px !important; } .g-3xl-sm, .gy-3xl-sm { --bs-gutter-y: 12px !important; } .g-3xl-md, .gx-3xl-md { --bs-gutter-x: 16px !important; } .g-3xl-md, .gy-3xl-md { --bs-gutter-y: 16px !important; } .g-3xl-lg, .gx-3xl-lg { --bs-gutter-x: 24px !important; } .g-3xl-lg, .gy-3xl-lg { --bs-gutter-y: 24px !important; } .g-3xl-xl, .gx-3xl-xl { --bs-gutter-x: 32px !important; } .g-3xl-xl, .gy-3xl-xl { --bs-gutter-y: 32px !important; } .g-3xl-2xl, .gx-3xl-2xl { --bs-gutter-x: 40px !important; } .g-3xl-2xl, .gy-3xl-2xl { --bs-gutter-y: 40px !important; } .g-3xl-3xl, .gx-3xl-3xl { --bs-gutter-x: 48px !important; } .g-3xl-3xl, .gy-3xl-3xl { --bs-gutter-y: 48px !important; } .g-3xl-4xl, .gx-3xl-4xl { --bs-gutter-x: 56px !important; } .g-3xl-4xl, .gy-3xl-4xl { --bs-gutter-y: 56px !important; } .g-3xl-5xl, .gx-3xl-5xl { --bs-gutter-x: 64px !important; } .g-3xl-5xl, .gy-3xl-5xl { --bs-gutter-y: 64px !important; } } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-grid { display: grid !important; } .d-inline-grid { display: inline-grid !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; } .d-none { display: none !important; } .flex-fill { flex: 1 1 auto !important; } .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-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; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !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; } .justify-content-evenly { justify-content: space-evenly !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; } .order-first { order: -1 !important; } .order-0 { order: 0 !important; } .order-1 { order: 1 !important; } .order-2 { order: 2 !important; } .order-3 { order: 3 !important; } .order-4 { order: 4 !important; } .order-5 { order: 5 !important; } .order-last { order: 6 !important; } @media (min-width: 390px) { .d-xs-inline { display: inline !important; } .d-xs-inline-block { display: i