:root, [data-bs-theme=light] { --bs-primary: rgba(0, 51, 64, 1); --bs-primary-contrast: rgba(255, 255, 255, 1); --bs-primary-rgb: 0, 51, 64; --bs-secondary: rgba(182, 209, 184, 1); --bs-secondary-contrast: rgba(0, 0, 0, 1); --bs-secondary-rgb: 182, 209, 184; --bs-tertiary: rgba(180, 191, 215, 1); --bs-tertiary-contrast: rgba(0, 0, 0, 1); --bs-tertiary-rgb: 180, 191, 215; --bs-sand: rgba(221, 205, 174, 1); --bs-sand-rgb: 221, 205, 174; --bs-success: rgba(78, 136, 87, 1); --bs-success-contrast: rgba(255, 255, 255, 1); --bs-success-rgb: 78, 136, 87; --bs-success-bg-subtle: rgba(78, 136, 87, 1); --bs-danger: rgba(189, 61, 75, 1); --bs-danger-contrast: rgba(255, 255, 255, 1); --bs-danger-rgb: 189, 61, 75; --bs-danger-bg-subtle: rgba(189, 61, 75, 1); --bs-warning: rgba(236, 199, 60, 1); --bs-warning-contrast: rgba(255, 255, 255, 1); --bs-warning-rgb: 236, 199, 60; --bs-warning-bg-subtle: rgba(236, 199, 60, 1); --bs-info: rgba(122, 198, 237, 1); --bs-info-contrast: rgba(255, 255, 255, 1); --bs-info-rgb: 122, 198, 237; --bs-info-bg-subtle: rgba(122, 198, 237, 1); --bs-body-bg: rgba(255, 255, 255, 1); --color-dark-petrol: var(--bs-primary); --color-muted-mint: var(--bs-secondary); --color-muted-mauve: var(--bs-tertiary); --color-sand: var(--bs-sand); --color-white: rgba(255, 255, 255, 1); --color-black: rgba(0, 0, 0, 1); --color-teal: var(--color-dark-petrol); --color-sage: var(--color-muted-mint); --color-lavender: var(--color-muted-mauve); --color-muted: rgba(0, 0, 0, 0.6); --color-on-dark-muted: rgba(255, 255, 255, 0.7); --color-border: rgba(0, 0, 0, 0.08); --color-bg-light: rgba(244, 243, 239, 1); --font-sans: var(--bs-font-sans-serif); --font-serif: var(--bs-font-serif); --container-max: var(--bs-container); --padding-x: 48px; --space-lg: 160px; --space-md: 96px; --space-sm: 64px; --grid-gap: 24px; --header-height: 112px; @media (max-width: 1023.98px) { --padding-x: 36px; --grid-gap: 18px; } @media (max-width: 767.98px) { --padding-x: 28px; --grid-gap: 16px; } --bs-font-serif: FeatureDeck, serif; --bs-font-sans-serif: AktivGrotesk, sans-serif; --bs-container: 1440px; --bs-container-xxl: 1440px; --bs-container-xl: 1140px; --bs-container-lg: 960px; --bs-container-md: 720px; --bs-container-sm: 540px; --bs-section-padding-block: 48px; @media (max-width: 767px) { --bs-section-padding-block: 64px; } --bs-h1-color: #000000; --bs-h1-text-transform: none; --bs-h1-font-size: 52px; @media (max-width: 991px) { --bs-h1-font-size: 52px; } @media (max-width: 767px) { --bs-h1-font-size: 34px; } --bs-h2-color: #000000; --bs-h2-text-transform: none; --bs-h2-font-size: 40px; @media (max-width: 991px) { --bs-h2-font-size: 40px; } @media (max-width: 767px) { --bs-h2-font-size: 28px; } --bs-h3-color: #000000; --bs-h3-text-transform: none; --bs-h3-font-size: 28px; @media (max-width: 991px) { --bs-h3-font-size: 28px; } @media (max-width: 767px) { --bs-h3-font-size: 28px; } --bs-h4-color: #000000; --bs-h4-text-transform: none; --bs-h4-font-size: 20px; @media (max-width: 991px) { --bs-h4-font-size: 20px; } @media (max-width: 767px) { --bs-h4-font-size: 20px; } --bs-h5-color: #000000; --bs-h5-text-transform: none; --bs-h5-font-size: 16px; @media (max-width: 991px) { --bs-h5-font-size: 15px; } @media (max-width: 767px) { --bs-h5-font-size: 14px; } --bs-h6-color: #000000; --bs-h6-text-transform: none; --bs-h6-font-size: 14px; @media (max-width: 991px) { --bs-h6-font-size: 13px; } @media (max-width: 767px) { --bs-h6-font-size: 12px; } --bs-body-color: #000000; --bs-body-font-size: 18px; @media (max-width: 991px) { --bs-body-font-size: 18px; } @media (max-width: 767px) { --bs-body-font-size: 18px; } --bs-body-font-weight: normal; --bs-body-text-align: LEFT; --bs-body-line-height: 1.2222; --bs-h1-line-height: 64px; --bs-h1-letter-spacing: -0.015em; --bs-h2-line-height: 48px; --bs-h2-letter-spacing: -0.01em; --bs-h3-line-height: 34px; --bs-h4-line-height: 24px; --bs-display-font-size: 72px; --bs-display-line-height: 88px; --bs-display-letter-spacing: -0.02em; --bs-intro-font-size: 36px; --bs-intro-line-height: 44px; --bs-lead-font-size: 24px; --bs-lead-line-height: 30px; --bs-body-sm-font-size: 16px; --bs-body-sm-line-height: 20px; --bs-label-md-font-size: 18px; --bs-label-md-line-height: 22px; --bs-label-font-size: 14px; --bs-label-line-height: 18px; --bs-label-letter-spacing: 0.08em; --bs-caption-font-size: 14px; --bs-caption-line-height: 18px; --bs-caption-letter-spacing: 0.03em; --bs-stat-font-size: 64px; --bs-stat-line-height: 78px; --bs-stat-letter-spacing: -0.02em; --bs-kennzahl-font-size: 64px; --bs-kennzahl-line-height: 78px; --bs-btn-default-padding: var(--bs-btn-lg-padding); --bs-btn-default-font-size: var(--bs-btn-lg-font-size); --bs-btn-height: 54px; @media (max-width: 767px) { --bs-h1-line-height: 42px; --bs-h2-line-height: 36px; --bs-h3-line-height: 34px; --bs-h4-line-height: 24px; --bs-display-font-size: 40px; --bs-display-line-height: 48px; --bs-intro-font-size: 30px; --bs-intro-line-height: 36px; --bs-lead-font-size: 20px; --bs-lead-line-height: 26px; --bs-caption-line-height: 18px; --bs-stat-font-size: 48px; --bs-stat-line-height: 58px; --bs-kennzahl-font-size: 48px; --bs-kennzahl-line-height: 48px; --bs-btn-default-padding: var(--bs-btn-md-padding); --bs-btn-default-font-size: var(--bs-btn-md-font-size); --bs-btn-height: 40px; } --bs-links-color: #000000; --bs-link-color-rgb: 0, 0, 0; --bs-links-hover-color: rgba(0, 0, 0, 0.6); --bs-link-hover-color-rgb: 0, 0, 0; --bs-link-hover-opacity: 0.6; --bs-link-color: #000000; --bs-link-color-rgb: 0, 0, 0; --bs-link-font-weight: normal; --bs-link-font-style: normal; --bs-link-text-decoration: none; --bs-link-hover-color: #000000; --bs-link-hover-color-rgb: 0, 0, 0; --bs-link-hover-color-opacity: 0.6; --bs-btn-primary-color: rgba(255, 255, 255, 1); --bs-btn-primary-background: rgba(0, 51, 64, 1); --bs-btn-primary-border-color: rgba(0, 51, 64, 1); --bs-btn-primary-hover-color: rgba(255, 255, 255, 1); --bs-btn-primary-hover-background: rgba(0, 51, 64, 0.8); --bs-btn-primary-hover-border-color: rgba(0, 51, 64, 0); --bs-btn-primary-focus-outline-color: rgba(0, 51, 64, 0.5); --bs-btn-primary-active-color: rgba(255, 255, 255, 1); --bs-btn-primary-active-background: rgba(0, 51, 64, 1); --bs-btn-primary-active-border-color: rgba(0, 51, 64, 1); --bs-btn-primary-disabled-color: rgba(255, 255, 255, 1); --bs-btn-primary-disabled-background: rgba(0, 51, 64, 1); --bs-btn-primary-disabled-border-color: rgba(0, 51, 64, 1); --bs-btn-primary-disabled-opacity: 65%; --bs-btn-secondary-color: rgba(0, 0, 0, 1); --bs-btn-secondary-background: rgba(182, 209, 184, 1); --bs-btn-secondary-border-color: rgba(182, 209, 184, 1); --bs-btn-secondary-hover-color: rgba(0, 0, 0, 1); --bs-btn-secondary-hover-background: rgba(182, 209, 184, 0.8); --bs-btn-secondary-hover-border-color: rgba(182, 209, 184, 0); --bs-btn-secondary-focus-outline-color: rgba(182, 209, 184, 0.5); --bs-btn-secondary-active-color: rgba(0, 0, 0, 1); --bs-btn-secondary-active-background: rgba(182, 209, 184, 1); --bs-btn-secondary-active-border-color: rgba(182, 209, 184, 1); --bs-btn-secondary-disabled-color: rgba(0, 0, 0, 1); --bs-btn-secondary-disabled-background: rgba(182, 209, 184, 1); --bs-btn-secondary-disabled-border-color: rgba(182, 209, 184, 1); --bs-btn-secondary-disabled-opacity: 65%; --bs-btn-tertiary-color: rgba(0, 0, 0, 1); --bs-btn-tertiary-background: rgba(180, 191, 215, 1); --bs-btn-tertiary-border-color: rgba(180, 191, 215, 1); --bs-btn-tertiary-hover-color: rgba(0, 0, 0, 1); --bs-btn-tertiary-hover-background: rgba(180, 191, 215, 0.8); --bs-btn-tertiary-hover-border-color: rgba(180, 191, 215, 0); --bs-btn-tertiary-focus-outline-color: rgba(180, 191, 215, 0.5); --bs-btn-tertiary-active-color: rgba(0, 0, 0, 1); --bs-btn-tertiary-active-background: rgba(180, 191, 215, 1); --bs-btn-tertiary-active-border-color: rgba(180, 191, 215, 1); --bs-btn-tertiary-disabled-color: rgba(0, 0, 0, 1); --bs-btn-tertiary-disabled-background: rgba(180, 191, 215, 1); --bs-btn-tertiary-disabled-border-color: rgba(180, 191, 215, 1); --bs-btn-tertiary-disabled-opacity: 65%; --bs-btn-success-color: rgba(255, 255, 255, 1); --bs-btn-success-background: rgba(78, 136, 87, 1); --bs-btn-success-border-color: rgba(78, 136, 87, 1); --bs-btn-success-hover-color: rgba(255, 255, 255, 1); --bs-btn-success-hover-background: rgba(78, 136, 87, 0.8); --bs-btn-success-hover-border-color: rgba(78, 136, 87, 0); --bs-btn-success-focus-outline-color: rgba(78, 136, 87, 0.5); --bs-btn-success-active-color: rgba(255, 255, 255, 1); --bs-btn-success-active-background: rgba(78, 136, 87, 1); --bs-btn-success-active-border-color: rgba(78, 136, 87, 1); --bs-btn-success-disabled-color: rgba(255, 255, 255, 1); --bs-btn-success-disabled-background: rgba(78, 136, 87, 1); --bs-btn-success-disabled-border-color: rgba(78, 136, 87, 1); --bs-btn-success-disabled-opacity: 65%; --bs-btn-danger-color: rgba(255, 255, 255, 1); --bs-btn-danger-background: rgba(189, 61, 75, 1); --bs-btn-danger-border-color: rgba(189, 61, 75, 1); --bs-btn-danger-hover-color: rgba(255, 255, 255, 1); --bs-btn-danger-hover-background: rgba(189, 61, 75, 0.8); --bs-btn-danger-hover-border-color: rgba(189, 61, 75, 0); --bs-btn-danger-focus-outline-color: rgba(189, 61, 75, 0.5); --bs-btn-danger-active-color: rgba(255, 255, 255, 1); --bs-btn-danger-active-background: rgba(189, 61, 75, 1); --bs-btn-danger-active-border-color: rgba(189, 61, 75, 1); --bs-btn-danger-disabled-color: rgba(255, 255, 255, 1); --bs-btn-danger-disabled-background: rgba(189, 61, 75, 1); --bs-btn-danger-disabled-border-color: rgba(189, 61, 75, 1); --bs-btn-danger-disabled-opacity: 65%; --bs-btn-warning-color: rgba(255, 255, 255, 1); --bs-btn-warning-background: rgba(236, 199, 60, 1); --bs-btn-warning-border-color: rgba(236, 199, 60, 1); --bs-btn-warning-hover-color: rgba(255, 255, 255, 1); --bs-btn-warning-hover-background: rgba(236, 199, 60, 0.8); --bs-btn-warning-hover-border-color: rgba(236, 199, 60, 0); --bs-btn-warning-focus-outline-color: rgba(236, 199, 60, 0.5); --bs-btn-warning-active-color: rgba(255, 255, 255, 1); --bs-btn-warning-active-background: rgba(236, 199, 60, 1); --bs-btn-warning-active-border-color: rgba(236, 199, 60, 1); --bs-btn-warning-disabled-color: rgba(255, 255, 255, 1); --bs-btn-warning-disabled-background: rgba(236, 199, 60, 1); --bs-btn-warning-disabled-border-color: rgba(236, 199, 60, 1); --bs-btn-warning-disabled-opacity: 65%; --bs-btn-info-color: rgba(255, 255, 255, 1); --bs-btn-info-background: rgba(122, 198, 237, 1); --bs-btn-info-border-color: rgba(122, 198, 237, 1); --bs-btn-info-hover-color: rgba(255, 255, 255, 1); --bs-btn-info-hover-background: rgba(122, 198, 237, 0.8); --bs-btn-info-hover-border-color: rgba(122, 198, 237, 0); --bs-btn-info-focus-outline-color: rgba(122, 198, 237, 0.5); --bs-btn-info-active-color: rgba(255, 255, 255, 1); --bs-btn-info-active-background: rgba(122, 198, 237, 1); --bs-btn-info-active-border-color: rgba(122, 198, 237, 1); --bs-btn-info-disabled-color: rgba(255, 255, 255, 1); --bs-btn-info-disabled-background: rgba(122, 198, 237, 1); --bs-btn-info-disabled-border-color: rgba(122, 198, 237, 1); --bs-btn-info-disabled-opacity: 65%; --bs-btn-sm-padding: 6px 14px; --bs-btn-sm-font-size: 14px; --bs-btn-md-padding: 12px 20px; --bs-btn-md-font-size: 14px; --bs-btn-lg-padding: 16px 28px; --bs-btn-lg-font-size: 16px; --bs-border-width: 1px; --bs-border-radius: 100px; --bs-label-color: #000000; --bs-form-accent: rgba(0, 51, 64, 1); --bs-form-accent-contrast: rgba(255, 255, 255, 1); --bs-form-accent-focus-outline-color: rgba(0, 51, 64, 0.5); --bs-form-check-bg-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); --bs-form-indeterminate-bg-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); --bs-input-border-width: 1px; --bs-input-border-color: rgba(0, 0, 0, 0.08); --bs-input-border-radius: 0px; } h1,.h1 { font-family: FeatureDeck; } h2,.h2 { text-decoration: none; font-family: FeatureDeck; } h3,.h3 { text-decoration: none; font-family: AktivGrotesk; } h4,.h4 { text-decoration: none; font-family: AktivGrotesk; } h5,.h5 { text-decoration: none; font-family: FeatureDeck; } h6,.h6 { text-decoration: none; font-family: FeatureDeck; } body { font-family: AktivGrotesk; } a { text-decoration: none; font-weight: normal; font-style: normal; } .form-label { text-decoration: none; font-family: AktivGrotesk} .bg-dark-petrol { background-color: var(--color-dark-petrol) !important; } .text-dark-petrol { color: var(--color-dark-petrol) !important; } .bg-dark-petrol-light { background-color: rgba(0, 51, 64, 0.30) !important; } .bg-muted-mint { background-color: var(--color-muted-mint) !important; } .text-muted-mint { color: var(--color-muted-mint) !important; } .bg-muted-mint-light { background-color: rgba(182, 209, 184, 0.30) !important; } .bg-muted-mauve { background-color: var(--color-muted-mauve) !important; } .text-muted-mauve { color: var(--color-muted-mauve) !important; } .bg-muted-mauve-light { background-color: rgba(180, 191, 215, 0.30) !important; } .bg-sand { background-color: var(--color-sand) !important; } .text-sand { color: var(--color-sand) !important; } .bg-sand-light { background-color: rgba(221, 205, 174, 0.30) !important; } .bg-white { background-color: var(--color-white) !important; } .text-white { color: var(--color-white) !important; } .bg-white-light { background-color: rgba(255, 255, 255, 0.30) !important; } .bg-black { background-color: var(--color-black) !important; } .text-black { color: var(--color-black) !important; } .bg-black-light { background-color: rgba(0, 0, 0, 0.30) !important; } .bg-auto { background-color: transparent !important; } .text-auto { color: inherit !important; } .bg-light { background-color: var(--color-bg-light) !important; } .text-muted { color: var(--color-muted) !important; } img, svg { max-width: 100%; } body { font-size: var(--bs-body-font-size); color: var(--bs-body-color); text-align: var(--bs-body-text-align); line-height: var(--bs-body-line-height); } h1 { font-size: var(--bs-h1-font-size); color: var(--bs-h1-color); text-transform: var(--bs-h1-text-transform); /* Concept headings are weight 400 (FeatureDeck/AktivGrotesk Regular). HubSpot's heading_font hides the styles subfield, so it defaults to 500 — set 400 explicitly here. (Body 300 is still pending designer.) */ font-weight: 400; } h2 { font-size: var(--bs-h2-font-size); color: var(--bs-h2-color); text-transform: var(--bs-h2-text-transform); /* Concept headings are weight 400 (FeatureDeck/AktivGrotesk Regular). HubSpot's heading_font hides the styles subfield, so it defaults to 500 — set 400 explicitly here. (Body 300 is still pending designer.) */ font-weight: 400; } h3 { font-size: var(--bs-h3-font-size); color: var(--bs-h3-color); text-transform: var(--bs-h3-text-transform); /* Concept headings are weight 400 (FeatureDeck/AktivGrotesk Regular). HubSpot's heading_font hides the styles subfield, so it defaults to 500 — set 400 explicitly here. (Body 300 is still pending designer.) */ font-weight: 400; } h4 { font-size: var(--bs-h4-font-size); color: var(--bs-h4-color); text-transform: var(--bs-h4-text-transform); /* Concept headings are weight 400 (FeatureDeck/AktivGrotesk Regular). HubSpot's heading_font hides the styles subfield, so it defaults to 500 — set 400 explicitly here. (Body 300 is still pending designer.) */ font-weight: 400; } h5 { font-size: var(--bs-h5-font-size); color: var(--bs-h5-color); text-transform: var(--bs-h5-text-transform); /* Concept headings are weight 400 (FeatureDeck/AktivGrotesk Regular). HubSpot's heading_font hides the styles subfield, so it defaults to 500 — set 400 explicitly here. (Body 300 is still pending designer.) */ font-weight: 400; } h6 { font-size: var(--bs-h6-font-size); color: var(--bs-h6-color); text-transform: var(--bs-h6-text-transform); /* Concept headings are weight 400 (FeatureDeck/AktivGrotesk Regular). HubSpot's heading_font hides the styles subfield, so it defaults to 500 — set 400 explicitly here. (Body 300 is still pending designer.) */ font-weight: 400; } a { color: var(--bs-links-color); &:hover { color: var(--bs-links-hover-color); --bs-link-opacity: var(--bs-link-hover-opacity); } } h1 { line-height: var(--bs-h1-line-height); letter-spacing: var(--bs-h1-letter-spacing); } h2 { line-height: var(--bs-h2-line-height); letter-spacing: var(--bs-h2-letter-spacing); } h3 { line-height: var(--bs-h3-line-height); } h4 { line-height: var(--bs-h4-line-height); } .display { font-family: var(--font-serif); font-weight: 400; font-size: var(--bs-display-font-size); line-height: var(--bs-display-line-height); letter-spacing: var(--bs-display-letter-spacing); } .body-bg { font-family: var(--font-sans); font-weight: 300; font-size: var(--bs-intro-font-size); line-height: var(--bs-intro-line-height); } .lead { font-family: var(--font-sans); font-weight: 300; font-size: var(--bs-lead-font-size); line-height: var(--bs-lead-line-height); } .body-sm { font-family: var(--font-sans); font-weight: 300; font-size: var(--bs-body-sm-font-size); line-height: var(--bs-body-sm-line-height); } .label-md, .section-label { font-family: var(--font-sans); font-weight: 400; font-size: var(--bs-label-md-font-size); line-height: var(--bs-label-md-line-height); letter-spacing: var(--bs-label-letter-spacing); text-transform: uppercase; color: var(--color-muted); } .label { font-family: var(--font-sans); font-weight: 400; font-size: var(--bs-label-font-size); line-height: var(--bs-label-line-height); letter-spacing: var(--bs-label-letter-spacing); text-transform: uppercase; color: var(--color-muted); } .label--white { color: var(--color-on-dark-muted); } .caption, .text-small { font-family: var(--font-sans); font-weight: 300; font-size: var(--bs-caption-font-size); line-height: var(--bs-caption-line-height); letter-spacing: var(--bs-caption-letter-spacing); } .stat-value { font-family: var(--font-sans); font-weight: 300; font-size: var(--bs-stat-font-size); line-height: var(--bs-stat-line-height); letter-spacing: var(--bs-stat-letter-spacing); } .kennzahl-value { font-family: var(--font-sans); font-weight: 300; font-size: var(--bs-kennzahl-font-size); line-height: var(--bs-kennzahl-line-height); letter-spacing: var(--bs-stat-letter-spacing); } .muted { color: var(--color-muted); } body { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-chars: 6 3 3; hyphenate-limit-chars: 6 3 3; } .btn, button, input, select, textarea, code, pre, .header-nav-link, .nav-main-link, .nav-aside-link, .nav-sub-chip, .label, .label-md, .stat-value, .kennzahl-value, .keyfact-value { -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; } h1, h2 { -webkit-hyphens: manual; hyphens: manual; } @media (max-width: 768px) { h1, h2 { -webkit-hyphens: auto; hyphens: auto; } } .text-primary { color: var(--bs-primary) !important; } .bg-primary { background: var(--bs-primary) !important; } .text-bg-primary { background: var(--bs-primary) !important; color: var(--bs-primary-contrast) !important; } .bg-text-primary { background: var(--bs-primary) !important; color: var(--bs-primary-contrast) !important; } .alert-primary { --bs-alert-color: var(--bs-primary-contrast); --bs-alert-bg: var(--bs-primary); --bs-alert-border-color: var(--bs-primary); } .text-secondary { color: var(--bs-secondary) !important; } .bg-secondary { background: var(--bs-secondary) !important; } .text-bg-secondary { background: var(--bs-secondary) !important; color: var(--bs-secondary-contrast) !important; } .bg-text-secondary { background: var(--bs-secondary) !important; color: var(--bs-secondary-contrast) !important; } .alert-secondary { --bs-alert-color: var(--bs-secondary-contrast); --bs-alert-bg: var(--bs-secondary); --bs-alert-border-color: var(--bs-secondary); } .text-tertiary { color: var(--bs-tertiary) !important; } .bg-tertiary { background: var(--bs-tertiary) !important; } .text-bg-tertiary { background: var(--bs-tertiary) !important; color: var(--bs-tertiary-contrast) !important; } .bg-text-tertiary { background: var(--bs-tertiary) !important; color: var(--bs-tertiary-contrast) !important; } .alert-tertiary { --bs-alert-color: var(--bs-tertiary-contrast); --bs-alert-bg: var(--bs-tertiary); --bs-alert-border-color: var(--bs-tertiary); } .text-success { color: var(--bs-success) !important; } .bg-success { background: var(--bs-success) !important; } .text-bg-success { background: var(--bs-success) !important; color: var(--bs-success-contrast) !important; } .bg-text-success { background: var(--bs-success) !important; color: var(--bs-success-contrast) !important; } .alert-success { --bs-alert-color: var(--bs-success-contrast); --bs-alert-bg: var(--bs-success); --bs-alert-border-color: var(--bs-success); } .text-danger { color: var(--bs-danger) !important; } .bg-danger { background: var(--bs-danger) !important; } .text-bg-danger { background: var(--bs-danger) !important; color: var(--bs-danger-contrast) !important; } .bg-text-danger { background: var(--bs-danger) !important; color: var(--bs-danger-contrast) !important; } .alert-danger { --bs-alert-color: var(--bs-danger-contrast); --bs-alert-bg: var(--bs-danger); --bs-alert-border-color: var(--bs-danger); } .text-warning { color: var(--bs-warning) !important; } .bg-warning { background: var(--bs-warning) !important; } .text-bg-warning { background: var(--bs-warning) !important; color: var(--bs-warning-contrast) !important; } .bg-text-warning { background: var(--bs-warning) !important; color: var(--bs-warning-contrast) !important; } .alert-warning { --bs-alert-color: var(--bs-warning-contrast); --bs-alert-bg: var(--bs-warning); --bs-alert-border-color: var(--bs-warning); } .text-info { color: var(--bs-info) !important; } .bg-info { background: var(--bs-info) !important; } .text-bg-info { background: var(--bs-info) !important; color: var(--bs-info-contrast) !important; } .bg-text-info { background: var(--bs-info) !important; color: var(--bs-info-contrast) !important; } .alert-info { --bs-alert-color: var(--bs-info-contrast); --bs-alert-bg: var(--bs-info); --bs-alert-border-color: var(--bs-info); } .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > [class*="widget-type-"], .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > [class*="widget-type-"], .container, .container-sm { max-width: var(--bs-container-sm); } } @media (min-width: 768px) { .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > [class*="widget-type-"], .container, .container-sm, .container-md { max-width: var(--bs-container-md)}; } } @media (min-width: 992px) { .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > [class*="widget-type-"], .container, .container-sm, .container-md, .container-lg { max-width: var(--bs-container-lg); } } @media (min-width: 1200px) { .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > [class*="widget-type-"], .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: var(--bs-container-xl); } } @media (min-width: 1400px) { .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > [class*="widget-type-"], .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: var(--bs-container-xxl); } } @supports not selector(:has(.container)) { #main-content > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 > .dnd-section[class*="vertical-alignment"] > .row-fluid { max-width: var(--bs-container-xxl); margin-left: auto; margin-right: auto; } } .dnd-section[class$="-force-full-width-section"] :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) { max-width: 100%; } #main-content > .container-fluid { padding: 0; } .dnd-section { padding-block: var(--bs-section-padding-block); } .row-fluid { display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0rem; } .span1 { flex: 8.333333; max-width: 8.333333%; } .span2 { flex: 16.666667; max-width: 16.666667%; } .span3 { flex: 25.000000; max-width: 25.000000%; } .span4 { flex: 33.333333; max-width: 33.333333%; } .span5 { flex: 41.666667; max-width: 41.666667%; } .span6 { flex: 50.000000; max-width: 50.000000%; } .span7 { flex: 58.333333; max-width: 58.333333%; } .span8 { flex: 66.666667; max-width: 66.666667%; } .span9 { flex: 75.000000; max-width: 75.000000%; } .span10 { flex: 83.333333; max-width: 83.333333%; } .span11 { flex: 91.666667; max-width: 91.666667%; } .span12 { flex: 100.000000; max-width: 100.000000%; } @media (max-width: 1199px) { .span10 { max-width: 100%; width: 100%; flex: unset; } .span11 { max-width: 100%; width: 100%; flex: unset; } .span12 { max-width: 100%; width: 100%; flex: unset; } .span1 { max-width: unset; } .span2 { max-width: unset; } } @media (max-width: 991px) { .span7 { max-width: 100%; width: 100%; flex: unset; } .span8 { max-width: 100%; width: 100%; flex: unset; } .span9 { max-width: 100%; width: 100%; flex: unset; } .span10 { max-width: 100%; width: 100%; flex: unset; } .span11 { max-width: 100%; width: 100%; flex: unset; } .span12 { max-width: 100%; width: 100%; flex: unset; } .span1 { max-width: unset; } .span2 { max-width: unset; } .span3 { max-width: unset; } .span4 { max-width: unset; } .span5 { max-width: unset; } } @media (max-width: 767px) { .span4 { max-width: 100%; width: 100%; flex: unset; } .span5 { max-width: 100%; width: 100%; flex: unset; } .span6 { max-width: 100%; width: 100%; flex: unset; } .span7 { max-width: 100%; width: 100%; flex: unset; } .span8 { max-width: 100%; width: 100%; flex: unset; } .span9 { max-width: 100%; width: 100%; flex: unset; } .span10 { max-width: 100%; width: 100%; flex: unset; } .span11 { max-width: 100%; width: 100%; flex: unset; } .span12 { max-width: 100%; width: 100%; flex: unset; } .span1 { max-width: unset; } .span2 { max-width: unset; } .span3 { max-width: unset; } .span4 { max-width: unset; } .span5 { max-width: unset; } .span6 { max-width: unset; } .span7 { max-width: unset; } .span8 { max-width: unset; } } @media (max-width: 575px) { .span1 { max-width: 100%; width: 100%; flex: unset; } .span2 { max-width: 100%; width: 100%; flex: unset; } .span3 { max-width: 100%; width: 100%; flex: unset; } .span4 { max-width: 100%; width: 100%; flex: unset; } .span5 { max-width: 100%; width: 100%; flex: unset; } .span6 { max-width: 100%; width: 100%; flex: unset; } .span7 { max-width: 100%; width: 100%; flex: unset; } .span8 { max-width: 100%; width: 100%; flex: unset; } .span9 { max-width: 100%; width: 100%; flex: unset; } .span10 { max-width: 100%; width: 100%; flex: unset; } .span11 { max-width: 100%; width: 100%; flex: unset; } .span12 { max-width: 100%; width: 100%; flex: unset; } .span1 { max-width: unset; } .span2 { max-width: unset; } .span3 { max-width: unset; } .span4 { max-width: unset; } .span5 { max-width: unset; } .span6 { max-width: unset; } .span7 { max-width: unset; } .span8 { max-width: unset; } .span9 { max-width: unset; } .span10 { max-width: unset; } .span11 { max-width: unset; } } @supports selector(:has(.container)) { #main-content .dnd-section:not([class$="-force-full-width-section"]) :is(.dnd-module > [class*="widget-type-"], .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) { --bs-gutter-x: 0; max-width: initial; } .dnd-section { padding-block: initial; } .dnd-section:has(.hs_cos_wrapper_type_module[class*="widget-type-"]) { padding-block: var(--bs-section-padding-block); } .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid:has(.dnd-module > div > :not([class*="-module"]), .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid:has( .dnd-module > div > :not([class*="-module"]), .container, .container-sm ) { max-width: var(--bs-container-sm); } } @media (min-width: 768px) { .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid:has( .dnd-module > div > :not([class*="-module"]), .container, .container-sm, .container-md ) { max-width: var(--bs-container-md); } } @media (min-width: 992px) { .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid:has( .dnd-module > div > :not([class*="-module"]), .container, .container-sm, .container-md, .container-lg ) { max-width: var(--bs-container-lgsm); } } @media (min-width: 1200px) { .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid:has( .dnd-module > div > :not([class*="-module"]), .container, .container-sm, .container-md, .container-lg, .container-xl ) { max-width: var(--bs-container-xl); } } @media (min-width: 1400px) { .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid:has( .dnd-module > div > :not([class*="-module"]), .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl ) { max-width: var(--bs-container-xxl); } } } .col-1-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-2-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-3-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-4-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-5-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-6-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-7-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-8-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-9-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-10-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-11-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-12-fluid { max-width: unset; width: calc(((100vw - var(--global-scrollbar-width, 0)))); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); padding-left: 0; padding-right: 0; } @media (min-width: 576px) {.col-sm-1-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-2-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-3-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-4-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-5-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-6-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-7-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-8-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-9-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-10-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-11-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-sm-12-fluid { max-width: unset; width: calc(((100vw - var(--global-scrollbar-width, 0)))); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); padding-left: 0; padding-right: 0; } }@media (min-width: 768px) {.col-md-1-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-2-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-3-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-4-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-5-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-6-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-7-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-8-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-9-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-10-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-11-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-md-12-fluid { max-width: unset; width: calc(((100vw - var(--global-scrollbar-width, 0)))); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); padding-left: 0; padding-right: 0; } }@media (min-width: 992px) {.col-lg-1-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-2-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-3-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-4-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-5-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-6-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-7-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-8-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-9-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-10-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-11-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-lg-12-fluid { max-width: unset; width: calc(((100vw - var(--global-scrollbar-width, 0)))); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); padding-left: 0; padding-right: 0; } }@media (min-width: 1200px) {.col-xl-1-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-2-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-3-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-4-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-5-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-6-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-7-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-8-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-9-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-10-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-11-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xl-12-fluid { max-width: unset; width: calc(((100vw - var(--global-scrollbar-width, 0)))); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); padding-left: 0; padding-right: 0; } }@media (min-width: 1400px) {.col-xxl-1-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-2-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 2); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-3-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 3); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-4-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 4); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-5-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 5); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-6-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 6); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-7-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 7); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-8-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 8); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-9-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 9); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-10-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 10); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-11-fluid { max-width: unset; &:first-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 0; } &:last-child { width: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 + 100% / 12 * 11); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 0; } } .col-xxl-12-fluid { max-width: unset; width: calc(((100vw - var(--global-scrollbar-width, 0)))); margin-left: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); margin-right: calc(((100vw - var(--global-scrollbar-width, 0)) - 100%) / 2 * -1); padding-left: 0; padding-right: 0; } } .btn, .hs-button, input[type='submit'] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-width: var(--bs-border-width); border-style: solid; border-radius: var(--bs-border-radius); white-space: nowrap; padding: var(--bs-btn-default-padding); font-size: var(--bs-btn-default-font-size); font-weight: var(--bs-btn-font-weight); line-height: 1; height: var(--bs-btn-height); cursor: pointer; text-align: center; text-decoration: none; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; & > svg, & > img, & > i, &:is(svg), &:is(img), &:is(i) { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; } } .btn-group-sm > .btn, .btn-sm { padding: var(--bs-btn-sm-padding); font-size: var(--bs-btn-sm-font-size); height: auto; } .btn-group-lg > .btn, .btn-lg { padding: var(--bs-btn-lg-padding); font-size: var(--bs-btn-lg-font-size); } .btn-primary, .hs-button, input[type='submit'] { --bs-btn-active-color: var(--bs-btn-primary-active-color); --bs-btn-active-bg: var(--bs-btn-primary-active-background); --bs-btn-active-border-color: var(--bs-btn-primary-active-border-color); --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-btn-primary-focus-outline-color); color: var(--bs-btn-primary-color); background: var(--bs-btn-primary-background); border-color: var(--bs-btn-primary-border-color); &:hover, &:focus-visible { color: var(--bs-btn-primary-hover-color); background: var(--bs-btn-primary-hover-background); border-color: var(--bs-btn-primary-hover-border-color); } &:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem var(--bs-btn-primary-focus-outline-color); } &:active { color: var(--bs-btn-primary-active-color); background: var(--bs-btn-primary-active-background); border-color: var(--bs-btn-primary-active-border-color); } &:disabled, &.disabled { color: var(--bs-btn-primary-disabled-color); background: var(--bs-btn-primary-disabled-background); border-color: var(--bs-btn-primary-disabled-border-color); opacity: var(--bs-btn-primary-disabled-opacity); } } .btn-secondary { --bs-btn-active-color: var(--bs-btn-secondary-active-color); --bs-btn-active-bg: var(--bs-btn-secondary-active-background); --bs-btn-active-border-color: var(--bs-btn-secondary-active-border-color); --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-btn-secondary-focus-outline-color); color: var(--bs-btn-secondary-color); background: var(--bs-btn-secondary-background); border-color: var(--bs-btn-secondary-border-color); &:hover, &:focus-visible { color: var(--bs-btn-secondary-hover-color); background: var(--bs-btn-secondary-hover-background); border-color: var(--bs-btn-secondary-hover-border-color); } &:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem var(--bs-btn-secondary-focus-outline-color); } &:active { color: var(--bs-btn-secondary-active-color); background: var(--bs-btn-secondary-active-background); border-color: var(--bs-btn-secondary-active-border-color); } &:disabled, &.disabled { color: var(--bs-btn-secondary-disabled-color); background: var(--bs-btn-secondary-disabled-background); border-color: var(--bs-btn-secondary-disabled-border-color); opacity: var(--bs-btn-secondary-disabled-opacity); } } .btn-tertiary { --bs-btn-active-color: var(--bs-btn-tertiary-active-color); --bs-btn-active-bg: var(--bs-btn-tertiary-active-background); --bs-btn-active-border-color: var(--bs-btn-tertiary-active-border-color); --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-btn-tertiary-focus-outline-color); color: var(--bs-btn-tertiary-color); background: var(--bs-btn-tertiary-background); border-color: var(--bs-btn-tertiary-border-color); &:hover, &:focus-visible { color: var(--bs-btn-tertiary-hover-color); background: var(--bs-btn-tertiary-hover-background); border-color: var(--bs-btn-tertiary-hover-border-color); } &:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem var(--bs-btn-tertiary-focus-outline-color); } &:active { color: var(--bs-btn-tertiary-active-color); background: var(--bs-btn-tertiary-active-background); border-color: var(--bs-btn-tertiary-active-border-color); } &:disabled, &.disabled { color: var(--bs-btn-tertiary-disabled-color); background: var(--bs-btn-tertiary-disabled-background); border-color: var(--bs-btn-tertiary-disabled-border-color); opacity: var(--bs-btn-tertiary-disabled-opacity); } } .btn-success { --bs-btn-active-color: var(--bs-btn-success-active-color); --bs-btn-active-bg: var(--bs-btn-success-active-background); --bs-btn-active-border-color: var(--bs-btn-success-active-border-color); --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-btn-success-focus-outline-color); color: var(--bs-btn-success-color); background: var(--bs-btn-success-background); border-color: var(--bs-btn-success-border-color); &:hover, &:focus-visible { color: var(--bs-btn-success-hover-color); background: var(--bs-btn-success-hover-background); border-color: var(--bs-btn-success-hover-border-color); } &:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem var(--bs-btn-success-focus-outline-color); } &:active { color: var(--bs-btn-success-active-color); background: var(--bs-btn-success-active-background); border-color: var(--bs-btn-success-active-border-color); } &:disabled, &.disabled { color: var(--bs-btn-success-disabled-color); background: var(--bs-btn-success-disabled-background); border-color: var(--bs-btn-success-disabled-border-color); opacity: var(--bs-btn-success-disabled-opacity); } } .btn-danger { --bs-btn-active-color: var(--bs-btn-danger-active-color); --bs-btn-active-bg: var(--bs-btn-danger-active-background); --bs-btn-active-border-color: var(--bs-btn-danger-active-border-color); --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-btn-danger-focus-outline-color); color: var(--bs-btn-danger-color); background: var(--bs-btn-danger-background); border-color: var(--bs-btn-danger-border-color); &:hover, &:focus-visible { color: var(--bs-btn-danger-hover-color); background: var(--bs-btn-danger-hover-background); border-color: var(--bs-btn-danger-hover-border-color); } &:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem var(--bs-btn-danger-focus-outline-color); } &:active { color: var(--bs-btn-danger-active-color); background: var(--bs-btn-danger-active-background); border-color: var(--bs-btn-danger-active-border-color); } &:disabled, &.disabled { color: var(--bs-btn-danger-disabled-color); background: var(--bs-btn-danger-disabled-background); border-color: var(--bs-btn-danger-disabled-border-color); opacity: var(--bs-btn-danger-disabled-opacity); } } .btn-warning { --bs-btn-active-color: var(--bs-btn-warning-active-color); --bs-btn-active-bg: var(--bs-btn-warning-active-background); --bs-btn-active-border-color: var(--bs-btn-warning-active-border-color); --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-btn-warning-focus-outline-color); color: var(--bs-btn-warning-color); background: var(--bs-btn-warning-background); border-color: var(--bs-btn-warning-border-color); &:hover, &:focus-visible { color: var(--bs-btn-warning-hover-color); background: var(--bs-btn-warning-hover-background); border-color: var(--bs-btn-warning-hover-border-color); } &:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem var(--bs-btn-warning-focus-outline-color); } &:active { color: var(--bs-btn-warning-active-color); background: var(--bs-btn-warning-active-background); border-color: var(--bs-btn-warning-active-border-color); } &:disabled, &.disabled { color: var(--bs-btn-warning-disabled-color); background: var(--bs-btn-warning-disabled-background); border-color: var(--bs-btn-warning-disabled-border-color); opacity: var(--bs-btn-warning-disabled-opacity); } } .btn-info { --bs-btn-active-color: var(--bs-btn-info-active-color); --bs-btn-active-bg: var(--bs-btn-info-active-background); --bs-btn-active-border-color: var(--bs-btn-info-active-border-color); --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-btn-info-focus-outline-color); color: var(--bs-btn-info-color); background: var(--bs-btn-info-background); border-color: var(--bs-btn-info-border-color); &:hover, &:focus-visible { color: var(--bs-btn-info-hover-color); background: var(--bs-btn-info-hover-background); border-color: var(--bs-btn-info-hover-border-color); } &:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem var(--bs-btn-info-focus-outline-color); } &:active { color: var(--bs-btn-info-active-color); background: var(--bs-btn-info-active-background); border-color: var(--bs-btn-info-active-border-color); } &:disabled, &.disabled { color: var(--bs-btn-info-disabled-color); background: var(--bs-btn-info-disabled-background); border-color: var(--bs-btn-info-disabled-border-color); opacity: var(--bs-btn-info-disabled-opacity); } } /* dark-petrol */ .btn-dark-petrol { color: var(--color-white); background: var(--color-dark-petrol); border-color: var(--color-dark-petrol); &:hover, &:focus-visible { color: var(--color-white); background: color-mix(in srgb, var(--color-dark-petrol) 85%, var(--color-white)); border-color: color-mix(in srgb, var(--color-dark-petrol) 85%, var(--color-white)); } } .btn-dark-petrol-transparent { color: var(--color-dark-petrol); background: transparent; border-color: var(--color-dark-petrol); &:hover, &:focus-visible { color: var(--color-white); background: var(--color-dark-petrol); border-color: var(--color-dark-petrol); } } .btn-dark-petrol-inverted { color: var(--color-dark-petrol); background: var(--color-white); border-color: var(--color-white); &:hover, &:focus-visible { color: var(--color-dark-petrol); background: color-mix(in srgb, var(--color-white) 85%, var(--color-dark-petrol)); border-color: color-mix(in srgb, var(--color-white) 85%, var(--color-dark-petrol)); } } /* muted-mint */ .btn-muted-mint { color: var(--color-black); background: var(--color-muted-mint); border-color: var(--color-muted-mint); &:hover, &:focus-visible { color: var(--color-black); background: color-mix(in srgb, var(--color-muted-mint) 85%, var(--color-black)); border-color: color-mix(in srgb, var(--color-muted-mint) 85%, var(--color-black)); } } .btn-muted-mint-transparent { color: var(--color-muted-mint); background: transparent; border-color: var(--color-muted-mint); &:hover, &:focus-visible { color: var(--color-black); background: var(--color-muted-mint); border-color: var(--color-muted-mint); } } .btn-muted-mint-inverted { color: var(--color-muted-mint); background: var(--color-black); border-color: var(--color-black); &:hover, &:focus-visible { color: var(--color-muted-mint); background: color-mix(in srgb, var(--color-black) 85%, var(--color-muted-mint)); border-color: color-mix(in srgb, var(--color-black) 85%, var(--color-muted-mint)); } } /* muted-mauve */ .btn-muted-mauve { color: var(--color-black); background: var(--color-muted-mauve); border-color: var(--color-muted-mauve); &:hover, &:focus-visible { color: var(--color-black); background: color-mix(in srgb, var(--color-muted-mauve) 85%, var(--color-black)); border-color: color-mix(in srgb, var(--color-muted-mauve) 85%, var(--color-black)); } } .btn-muted-mauve-transparent { color: var(--color-muted-mauve); background: transparent; border-color: var(--color-muted-mauve); &:hover, &:focus-visible { color: var(--color-black); background: var(--color-muted-mauve); border-color: var(--color-muted-mauve); } } .btn-muted-mauve-inverted { color: var(--color-muted-mauve); background: var(--color-black); border-color: var(--color-black); &:hover, &:focus-visible { color: var(--color-muted-mauve); background: color-mix(in srgb, var(--color-black) 85%, var(--color-muted-mauve)); border-color: color-mix(in srgb, var(--color-black) 85%, var(--color-muted-mauve)); } } /* sand */ .btn-sand { color: var(--color-black); background: var(--color-sand); border-color: var(--color-sand); &:hover, &:focus-visible { color: var(--color-black); background: color-mix(in srgb, var(--color-sand) 85%, var(--color-black)); border-color: color-mix(in srgb, var(--color-sand) 85%, var(--color-black)); } } .btn-sand-transparent { color: var(--color-sand); background: transparent; border-color: var(--color-sand); &:hover, &:focus-visible { color: var(--color-black); background: var(--color-sand); border-color: var(--color-sand); } } .btn-sand-inverted { color: var(--color-sand); background: var(--color-black); border-color: var(--color-black); &:hover, &:focus-visible { color: var(--color-sand); background: color-mix(in srgb, var(--color-black) 85%, var(--color-sand)); border-color: color-mix(in srgb, var(--color-black) 85%, var(--color-sand)); } } /* white */ .btn-white { color: var(--color-black); background: var(--color-white); border-color: var(--color-white); &:hover, &:focus-visible { color: var(--color-black); background: color-mix(in srgb, var(--color-white) 85%, var(--color-black)); border-color: color-mix(in srgb, var(--color-white) 85%, var(--color-black)); } } .btn-white-transparent { color: var(--color-white); background: transparent; border-color: var(--color-white); &:hover, &:focus-visible { color: var(--color-black); background: var(--color-white); border-color: var(--color-white); } } .btn-white-inverted { color: var(--color-white); background: var(--color-black); border-color: var(--color-black); &:hover, &:focus-visible { color: var(--color-white); background: color-mix(in srgb, var(--color-black) 85%, var(--color-white)); border-color: color-mix(in srgb, var(--color-black) 85%, var(--color-white)); } } /* black */ .btn-black { color: var(--color-white); background: var(--color-black); border-color: var(--color-black); &:hover, &:focus-visible { color: var(--color-white); background: color-mix(in srgb, var(--color-black) 85%, var(--color-white)); border-color: color-mix(in srgb, var(--color-black) 85%, var(--color-white)); } } .btn-black-transparent { color: var(--color-black); background: transparent; border-color: var(--color-black); &:hover, &:focus-visible { color: var(--color-white); background: var(--color-black); border-color: var(--color-black); } } .btn-black-inverted { color: var(--color-black); background: var(--color-white); border-color: var(--color-white); &:hover, &:focus-visible { color: var(--color-black); background: color-mix(in srgb, var(--color-white) 85%, var(--color-black)); border-color: color-mix(in srgb, var(--color-white) 85%, var(--color-black)); } } /* auto — context default = black outline (concept default .btn) */ .btn-auto, .btn-auto-transparent, .btn-auto-inverted { color: var(--color-black); background: transparent; border-color: var(--color-black); &:hover, &:focus-visible { color: var(--color-white); background: var(--color-black); border-color: var(--color-black); } } /* Arrow glyph — the Artemon CTA chevron on every brand button variant (macro-rendered or bespoke, e.g. the zielgruppen panels). mask + currentColor → tracks the text colour in every state, one rule. Scoped to the brand variants so form/system buttons (.btn-primary, .hs-button) and the footer's bespoke .btn--white (its own arrow) are unaffected. */ .btn-dark-petrol, .btn-dark-petrol-transparent, .btn-dark-petrol-inverted, .btn-muted-mint, .btn-muted-mint-transparent, .btn-muted-mint-inverted, .btn-muted-mauve, .btn-muted-mauve-transparent, .btn-muted-mauve-inverted, .btn-sand, .btn-sand-transparent, .btn-sand-inverted, .btn-white, .btn-white-transparent, .btn-white-inverted, .btn-black, .btn-black-transparent, .btn-black-inverted, .btn-auto, .btn-auto-transparent, .btn-auto-inverted { &::before { content: ""; display: block; width: 16px; height: 16px; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8H13M8.5 3.5L13 8L8.5 12.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8H13M8.5 3.5L13 8L8.5 12.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } } .text-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 20px; color: var(--color-black); text-decoration: none; cursor: pointer; &:hover, &:focus-visible { color: var(--color-black); } &::before { content: ""; display: block; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background-color: var(--color-black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.5 6H10M6.5 2.5L10 6L6.5 9.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; transition: transform 0.2s ease; } &:hover::before { transform: scale(1.333); } } .text-link--white { color: var(--color-white); &:hover, &:focus-visible { color: var(--color-white); } &::before { background-color: var(--color-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.5 6H10M6.5 2.5L10 6L6.5 9.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } } /* bootstrap copy-pastes */ :is(.form-control, #hs-pwd-widget-password)::-webkit-file-upload-button { padding: 0.375rem 0.75rem; margin: -0.375rem -0.75rem; -webkit-margin-end: 0.75rem; margin-inline-end: 0.75rem; color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; border-inline-end-width: var(--bs-border-width); border-radius: 0; -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } :is(.form-control, #hs-pwd-widget-password)::-webkit-date-and-time-value { min-width: 85px; height: 1.5em; margin: 0; } :is(.form-control, #hs-pwd-widget-password)::-webkit-datetime-edit { display: block; padding: 0; } :is(.form-control, #hs-pwd-widget-password):hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background-color: var(--bs-secondary-bg); } @media (prefers-reduced-motion: reduce) { :is(.form-control, #hs-pwd-widget-password)::-webkit-file-upload-button { -webkit-transition: none; transition: none; } } :is(.form-control, #hs-pwd-widget-password) { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-clip: padding-box; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; &[type=file] { overflow: hidden; &:not(:disabled):not([readonly]) { cursor: pointer; } } &:focus { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } &::placeholder { color: var(--bs-secondary-color); opacity: 1; } &:disabled { background-color: var(--bs-secondary-bg); opacity: 1; } &::file-selector-button { padding: 0.375rem 0.75rem; margin: -0.375rem -0.75rem; -webkit-margin-end: 0.75rem; margin-inline-end: 0.75rem; color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; border-inline-end-width: var(--bs-border-width); border-radius: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { transition: none; &::file-selector-button { transition: none; } } &:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--bs-secondary-bg); } } :is(.form-check-input, .email-subscription-preferences-system-template input[type='checkbox']) { --bs-form-check-bg: var(--bs-body-bg); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-form-check-bg); background-image: var(--bs-form-check-bg-image); background-position: 50%; background-repeat: no-repeat; background-size: contain; border: var(--bs-border-width) solid var(--bs-border-color); flex-shrink: 0; height: 1em; margin-top: .25em; -webkit-print-color-adjust: exact; vertical-align: top; width: 1em; color-adjust: exact; print-color-adjust: exact; &[type=checkbox] { border-radius: .25em; &:checked { --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E"); } &:indeterminate { background-color: #0d6efd; border-color: #0d6efd; --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3E%3C/svg%3E") } } &[type=radio] { border-radius: 50%; :checked { --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E"); } } &:active { filter: brightness(90%); } &:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); outline: 0; } &:disabled { filter: none; opacity: .5; pointer-events: none; & ~.form-check-label,.form-check-input[disabled]~.form-check-label { cursor: default; opacity: .5; } } } :is(.form-select, #hs-localization-select):-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--bs-body-color); } :is(.form-select, #hs-localization-select) { --bs-form-select-bg-img: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none); background-position: right .75rem center; background-repeat: no-repeat; background-size: 16px 12px; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); color: var(--bs-body-color); display: block; font-size: 1rem; font-weight: 400; line-height: 1.5; padding: .375rem 2.25rem .375rem .75rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; width: 100%; &:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); outline: 0 } &[multiple], &[size]:not([size="1"]) { background-image: none; padding-right: .75rem; } &:disabled { background-color: var(--bs-secondary-bg); } } @media (prefers-reduced-motion:reduce) { :is(.form-select, #hs-localization-select) { transition: none; } } /* custom overrides */ .form-label { color: var(--bs-label-color); } :is(.form-control, #hs-pwd-widget-password), :is(.form-select, #hs-localization-select), :is(.form-check-input, .email-subscription-preferences-system-template input[type='checkbox']) { border-color: var(--bs-input-border-color); border-width: var(--bs-input-border-width); border-radius: var(--bs-input-border-radius); margin-bottom: 1rem; &[type=checkbox] { border-radius: var(--bs-input-border-radius); } &:focus { border-color: var(--bs-form-accent); box-shadow: 0 0 0 .25rem var(--bs-form-accent-focus-outline-color); } } :is(.form-check-input, .email-subscription-preferences-system-template input[type='checkbox']) { &:checked, &[type="checkbox"]:indeterminate { background-color: var(--bs-form-accent); border-color: var(--bs-form-accent); } &[type="checkbox"] { &:checked { --bs-form-check-bg-image: var(--bs-form-check-bg-svg); } &:indeterminate { --bs-form-check-bg-image: var(--bs-form-indeterminate-bg-svg); } } &:focus { border-color: var(--bs-form-accent); box-shadow: 0 0 0 .25rem var(--bs-form-accent-focus-outline-color); } } .form-range { &::-webkit-slider-thumb { background: var(--bs-form-accent); } &::-moz-range-thumb { background: var(--bs-form-accent); } &:focus { outline: 0; &::-webkit-slider-thumb { box-shadow: 0 0 0 .25rem var(--bs-form-accent-focus-outline-color); } &::-moz-range-thumb { box-shadow: 0 0 0 .25rem var(--bs-form-accent-focus-outline-color); } } } .form-range::-webkit-slider-thumb:active { background: var(--bs-form-accent); opacity: .7; } .form-range::-moz-range-thumb:active { background: var(--bs-form-accent); opacity: .7; } .progress-bar { --bs-progress-bar-color: var(--bs-form-accent-contrast); --bs-progress-bar-bg: var(--bs-form-accent); } /* ============================================================ HubSpot embedded forms (.hs-form) — Artemon look Legacy (v2) HubSpot forms render .hs-form / .hs-form-field / .hs-input / .hs-button. Styled globally to the concept's underline inputs + uppercase muted labels + dark-petrol pill submit, so every embedded form matches site-wide. Ported from concepts/artemon-website kontakt.html (.field). Inputs use theme tokens; checkbox/radio are excluded from the full-width rule. A dark surface (.is-dark ancestor) flips label/input colours. ============================================================ */ .hs-form { /* HubSpot caps multi-column rows at max-width:500px — let them fill the container so the form covers the whole column (concept). */ fieldset.form-columns-1, fieldset.form-columns-2, fieldset.form-columns-3 { max-width: none; } .hs-form-field { margin-bottom: 28px; > label { display: block; margin-bottom: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .hs-field-desc { margin-bottom: 6px; font-size: 14px; font-weight: 300; line-height: 20px; color: var(--color-muted); } .input { margin: 0; } } /* Text inputs, select, textarea — underline style (not checkbox/radio) */ .hs-input:not([type="checkbox"]):not([type="radio"]) { width: 100%; box-sizing: border-box; padding: 10px 0; font-family: var(--font-sans); font-size: 16px; font-weight: 300; line-height: 24px; color: var(--color-black); background: transparent; border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; &:focus { border-bottom-color: var(--color-black); } &::placeholder { color: var(--color-muted); } } textarea.hs-input { min-height: 100px; resize: vertical; } select.hs-input { padding-right: 24px; color: var(--color-black); -webkit-text-fill-color: var(--color-black); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F5E5A' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; &.is-placeholder { color: var(--color-muted); -webkit-text-fill-color: var(--color-muted); } } /* Checkbox / radio + their option lists (consent, multi-choice) */ .inputs-list { margin: 0; padding: 0; list-style: none; li { margin: 0; list-style: none; } & + .inputs-list { margin-top: 12px; } } .hs-form-booleancheckbox-display, .hs-form-checkbox-display, .hs-form-radio-display { display: flex; align-items: flex-start; gap: 12px; font-weight: 300; > span { /* HubSpot injects margin-left:20px on this span; !important is the reliable override for their embedded form CSS. */ margin: 0 !important; font-size: 14px; font-weight: 300; line-height: 20px; letter-spacing: normal; text-transform: none; color: var(--color-muted); } } input[type="checkbox"].hs-input, input[type="radio"].hs-input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-dark-petrol); cursor: pointer; } /* Legal / consent rich text */ .legal-consent-container { margin-top: 0px; } .legal-consent-container, .hs-richtext { font-size: 14px; font-weight: 300; line-height: 20px; color: var(--color-muted); p { margin: 0 0 12px; max-width: none; font-size: 14px; line-height: 20px; } } .hs-richtext { margin-bottom: 16px; & + .hs-richtext { margin-top: 16px; } } /* Validation messages */ .hs-error-msgs { margin: 6px 0 0; padding: 0; list-style: none; label { font-size: 13px; font-weight: 300; letter-spacing: normal; text-transform: none; color: #b00020; } } /* Submit — dark-petrol pill */ .hs-submit .actions { margin-top: 8px; } .hs-button { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 16px 28px; font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 16px; color: var(--color-white); background: var(--color-dark-petrol); border: 1px solid var(--color-dark-petrol); border-radius: 100px; cursor: pointer; transition: background 0.2s, border-color 0.2s; &:hover { background: var(--color-black); border-color: var(--color-black); } @media (max-width: 767.98px) { height: 40px; padding: 12px 20px; font-size: 14px; line-height: 14px; } } } /* Inline success message (replaces the form on submit) */ .submitted-message { font-size: 18px; font-weight: 300; line-height: 24px; color: var(--color-dark-petrol); } /* Dark surface → white labels/inputs, muted-white helper text */ .is-dark .hs-form { .hs-form-field > label, .hs-field-desc, .hs-form-booleancheckbox-display > span, .legal-consent-container { color: var(--color-on-dark-muted); } .hs-input:not([type="checkbox"]):not([type="radio"]) { color: var(--color-white); -webkit-text-fill-color: var(--color-white); border-bottom-color: rgba(255, 255, 255, 0.3); } } /* Hide the "dots" from a default