/* File: automatic.css - Version: 3.3.5 - Generated: 2025-04-11 23:40:11 */ .overflow-detection *:not(#wpadminbar, #wpadminbar *), .overflow-detection *:not(#wpadminbar, #wpadminbar *)::before, .overflow-detection *:not(#wpadminbar, #wpadminbar *)::after { outline: 2px solid crimson !important; background: color-mix(in oklab, crimson, transparent 97%) !important; } :root, .color-scheme--main { --action-hex: #758567; --action-hsl: 92 13% 46%; --action-rgb: 117 133 103; --action-r: 117; --action-g: 133; --action-b: 103; --action-h: 92; --action-s: 13%; --action-l: 46%; --action-hover-h: 197; --action-hover-s: 20%; --action-hover-l: 99%; --action-ultra-light-h: 197; --action-ultra-light-s: 20%; --action-ultra-light-l: 95%; --action-light-h: 197; --action-light-s: 20%; --action-light-l: 85%; --action-semi-light-h: 197; --action-semi-light-s: 20%; --action-semi-light-l: 65%; --action-semi-dark-h: 197; --action-semi-dark-s: 20%; --action-semi-dark-l: 35%; --action-dark-h: 197; --action-dark-s: 20%; --action-dark-l: 25%; --action-ultra-dark-h: 197; --action-ultra-dark-s: 20%; --action-ultra-dark-l: 10%; --action-comp-h: 272; --action-medium-h: 197; --action-medium-s: 20%; --action-medium-l: 50%; --primary-hex: #758567; --primary-hsl: 92 13% 46%; --primary-rgb: 117 133 103; --primary-r: 117; --primary-g: 133; --primary-b: 103; --primary-h: 92; --primary-s: 13%; --primary-l: 46%; --primary-hover-h: 92; --primary-hover-s: 13%; --primary-hover-l: 53%; --primary-ultra-light-h: 92; --primary-ultra-light-s: 13%; --primary-ultra-light-l: 95%; --primary-light-h: 83; --primary-light-s: 28%; --primary-light-l: 84%; --primary-semi-light-h: 92; --primary-semi-light-s: 13%; --primary-semi-light-l: 65%; --primary-semi-dark-h: 92; --primary-semi-dark-s: 13%; --primary-semi-dark-l: 35%; --primary-dark-h: 94; --primary-dark-s: 12%; --primary-dark-l: 27%; --primary-ultra-dark-h: 92; --primary-ultra-dark-s: 13%; --primary-ultra-dark-l: 10%; --primary-comp-h: 272; --primary-medium-h: 92; --primary-medium-s: 13%; --primary-medium-l: 50%; --secondary-hex: #D5DFE3; --secondary-hsl: 197 20% 86%; --secondary-rgb: 213 223 227; --secondary-r: 213; --secondary-g: 223; --secondary-b: 227; --secondary-h: 197; --secondary-s: 20%; --secondary-l: 86%; --secondary-hover-h: 197; --secondary-hover-s: 20%; --secondary-hover-l: 99%; --secondary-ultra-light-h: 197; --secondary-ultra-light-s: 20%; --secondary-ultra-light-l: 95%; --secondary-light-h: 197; --secondary-light-s: 20%; --secondary-light-l: 85%; --secondary-semi-light-h: 197; --secondary-semi-light-s: 20%; --secondary-semi-light-l: 65%; --secondary-semi-dark-h: 197; --secondary-semi-dark-s: 20%; --secondary-semi-dark-l: 35%; --secondary-dark-h: 197; --secondary-dark-s: 20%; --secondary-dark-l: 25%; --secondary-ultra-dark-h: 197; --secondary-ultra-dark-s: 20%; --secondary-ultra-dark-l: 10%; --secondary-comp-h: 377; --secondary-medium-h: 197; --secondary-medium-s: 20%; --secondary-medium-l: 50%; --accent-hex: #EAAC8B; --accent-hsl: 21 69% 73%; --accent-rgb: 234 172 139; --accent-r: 234; --accent-g: 172; --accent-b: 139; --accent-h: 21; --accent-s: 69%; --accent-l: 73%; --accent-hover-h: 21; --accent-hover-s: 69%; --accent-hover-l: 83.95%; --accent-ultra-light-h: 21; --accent-ultra-light-s: 69%; --accent-ultra-light-l: 95%; --accent-light-h: 21; --accent-light-s: 69%; --accent-light-l: 85%; --accent-semi-light-h: 21; --accent-semi-light-s: 69%; --accent-semi-light-l: 65%; --accent-semi-dark-h: 21; --accent-semi-dark-s: 69%; --accent-semi-dark-l: 35%; --accent-dark-h: 21; --accent-dark-s: 69%; --accent-dark-l: 25%; --accent-ultra-dark-h: 21; --accent-ultra-dark-s: 69%; --accent-ultra-dark-l: 10%; --accent-comp-h: 201; --accent-medium-h: 21; --accent-medium-s: 69%; --accent-medium-l: 50%; --base-hex: #344F6F; --base-hsl: 213 36% 32%; --base-rgb: 52 79 111; --base-r: 52; --base-g: 79; --base-b: 111; --base-h: 213; --base-s: 36%; --base-l: 32%; --base-hover-h: 213; --base-hover-s: 36%; --base-hover-l: 36.8%; --base-ultra-light-h: 213; --base-ultra-light-s: 36%; --base-ultra-light-l: 95%; --base-light-h: 213; --base-light-s: 36%; --base-light-l: 85%; --base-semi-light-h: 213; --base-semi-light-s: 36%; --base-semi-light-l: 65%; --base-semi-dark-h: 213; --base-semi-dark-s: 36%; --base-semi-dark-l: 35%; --base-dark-h: 213; --base-dark-s: 36%; --base-dark-l: 25%; --base-ultra-dark-h: 213; --base-ultra-dark-s: 36%; --base-ultra-dark-l: 10%; --base-comp-h: 393; --base-medium-h: 213; --base-medium-s: 36%; --base-medium-l: 50%; --neutral-hex: #FFFCF7; --neutral-hsl: 38 100% 98%; --neutral-rgb: 255 252 247; --neutral-r: 255; --neutral-g: 252; --neutral-b: 247; --neutral-h: 38; --neutral-s: 100%; --neutral-l: 98%; --neutral-hover-h: 38; --neutral-hover-s: 100%; --neutral-hover-l: 100%; --neutral-ultra-light-h: 38; --neutral-ultra-light-s: 100%; --neutral-ultra-light-l: 95%; --neutral-light-h: 38; --neutral-light-s: 100%; --neutral-light-l: 85%; --neutral-semi-light-h: 38; --neutral-semi-light-s: 100%; --neutral-semi-light-l: 65%; --neutral-semi-dark-h: 38; --neutral-semi-dark-s: 100%; --neutral-semi-dark-l: 35%; --neutral-dark-h: 38; --neutral-dark-s: 100%; --neutral-dark-l: 25%; --neutral-ultra-dark-h: 38; --neutral-ultra-dark-s: 100%; --neutral-ultra-dark-l: 10%; --neutral-comp-h: 218; --neutral-medium-h: 38; --neutral-medium-s: 100%; --neutral-medium-l: 50%; --action: #758567; --action-hover: #fcfdfd; --action-ultra-light: #f0f3f5; --action-light: #d1dce0; --action-semi-light: #94adb8; --action-semi-dark: #47616b; --action-dark: #33454d; --action-ultra-dark: #141c1f; --action-comp: #766685; --action-medium: #668b99; --primary: #758567; --primary-hover: #869778; --primary-ultra-light: #f2f4f1; --primary-light: #d9e2cb; --primary-semi-light: #a5b19a; --primary-semi-dark: #58654e; --primary-dark: #444d3d; --primary-ultra-dark: #191d16; --primary-comp: #766685; --primary-medium: #7e906f; --secondary: #D5DFE3; --secondary-hover: #fcfdfd; --secondary-ultra-light: #f0f3f5; --secondary-light: #d1dce0; --secondary-semi-light: #94adb8; --secondary-semi-dark: #47616b; --secondary-dark: #33454d; --secondary-ultra-dark: #141c1f; --secondary-comp: #e2d8d4; --secondary-medium: #668b99; --accent: #EAAC8B; --accent-hover: #f2ceba; --accent-ultra-light: #fbf0e9; --accent-light: #f3d1be; --accent-semi-light: #e39368; --accent-semi-dark: #97471c; --accent-dark: #6c3314; --accent-ultra-dark: #2b1408; --accent-comp: #8bc8ea; --accent-medium: #d76528; --base: #344F6F; --base-hover: #3c5a80; --base-ultra-light: #eef2f7; --base-light: #cbd7e7; --base-semi-light: #86a3c6; --base-semi-dark: #395679; --base-dark: #293d57; --base-ultra-dark: #101923; --base-comp: #6f5534; --base-medium: #527bad; --neutral: #FFFCF7; --neutral-hover: white; --neutral-ultra-light: #fff6e6; --neutral-light: #ffe3b3; --neutral-semi-light: #ffbe4d; --neutral-semi-dark: #b37100; --neutral-dark: #805100; --neutral-ultra-dark: #332000; --neutral-comp: #f5f9ff; --neutral-medium: #ffa200; --white: #fff; --black: #000; --action-trans-10: rgba(117, 133, 103, 0.1); --action-trans-20: rgba(117, 133, 103, 0.2); --action-trans-30: rgba(117, 133, 103, 0.3); --action-trans-40: rgba(117, 133, 103, 0.4); --action-trans-50: rgba(117, 133, 103, 0.5); --action-trans-60: rgba(117, 133, 103, 0.6); --action-trans-70: rgba(117, 133, 103, 0.7); --action-trans-80: rgba(117, 133, 103, 0.8); --action-trans-90: rgba(117, 133, 103, 0.9); --action-light-trans-10: rgba(209, 220, 224, 0.1); --action-light-trans-20: rgba(209, 220, 224, 0.2); --action-light-trans-30: rgba(209, 220, 224, 0.3); --action-light-trans-40: rgba(209, 220, 224, 0.4); --action-light-trans-50: rgba(209, 220, 224, 0.5); --action-light-trans-60: rgba(209, 220, 224, 0.6); --action-light-trans-70: rgba(209, 220, 224, 0.7); --action-light-trans-80: rgba(209, 220, 224, 0.8); --action-light-trans-90: rgba(209, 220, 224, 0.9); --action-dark-trans-10: rgba(51, 69, 77, 0.1); --action-dark-trans-20: rgba(51, 69, 77, 0.2); --action-dark-trans-30: rgba(51, 69, 77, 0.3); --action-dark-trans-40: rgba(51, 69, 77, 0.4); --action-dark-trans-50: rgba(51, 69, 77, 0.5); --action-dark-trans-60: rgba(51, 69, 77, 0.6); --action-dark-trans-70: rgba(51, 69, 77, 0.7); --action-dark-trans-80: rgba(51, 69, 77, 0.8); --action-dark-trans-90: rgba(51, 69, 77, 0.9); --action-ultra-dark-trans-10: rgba(20, 28, 31, 0.1); --action-ultra-dark-trans-20: rgba(20, 28, 31, 0.2); --action-ultra-dark-trans-30: rgba(20, 28, 31, 0.3); --action-ultra-dark-trans-40: rgba(20, 28, 31, 0.4); --action-ultra-dark-trans-50: rgba(20, 28, 31, 0.5); --action-ultra-dark-trans-60: rgba(20, 28, 31, 0.6); --action-ultra-dark-trans-70: rgba(20, 28, 31, 0.7); --action-ultra-dark-trans-80: rgba(20, 28, 31, 0.8); --action-ultra-dark-trans-90: rgba(20, 28, 31, 0.9); --primary-trans-10: rgba(117, 133, 103, 0.1); --primary-trans-20: rgba(117, 133, 103, 0.2); --primary-trans-30: rgba(117, 133, 103, 0.3); --primary-trans-40: rgba(117, 133, 103, 0.4); --primary-trans-50: rgba(117, 133, 103, 0.5); --primary-trans-60: rgba(117, 133, 103, 0.6); --primary-trans-70: rgba(117, 133, 103, 0.7); --primary-trans-80: rgba(117, 133, 103, 0.8); --primary-trans-90: rgba(117, 133, 103, 0.9); --primary-light-trans-10: rgba(217, 226, 203, 0.1); --primary-light-trans-20: rgba(217, 226, 203, 0.2); --primary-light-trans-30: rgba(217, 226, 203, 0.3); --primary-light-trans-40: rgba(217, 226, 203, 0.4); --primary-light-trans-50: rgba(217, 226, 203, 0.5); --primary-light-trans-60: rgba(217, 226, 203, 0.6); --primary-light-trans-70: rgba(217, 226, 203, 0.7); --primary-light-trans-80: rgba(217, 226, 203, 0.8); --primary-light-trans-90: rgba(217, 226, 203, 0.9); --primary-dark-trans-10: rgba(68, 77, 61, 0.1); --primary-dark-trans-20: rgba(68, 77, 61, 0.2); --primary-dark-trans-30: rgba(68, 77, 61, 0.3); --primary-dark-trans-40: rgba(68, 77, 61, 0.4); --primary-dark-trans-50: rgba(68, 77, 61, 0.5); --primary-dark-trans-60: rgba(68, 77, 61, 0.6); --primary-dark-trans-70: rgba(68, 77, 61, 0.7); --primary-dark-trans-80: rgba(68, 77, 61, 0.8); --primary-dark-trans-90: rgba(68, 77, 61, 0.9); --primary-ultra-dark-trans-10: rgba(25, 29, 22, 0.1); --primary-ultra-dark-trans-20: rgba(25, 29, 22, 0.2); --primary-ultra-dark-trans-30: rgba(25, 29, 22, 0.3); --primary-ultra-dark-trans-40: rgba(25, 29, 22, 0.4); --primary-ultra-dark-trans-50: rgba(25, 29, 22, 0.5); --primary-ultra-dark-trans-60: rgba(25, 29, 22, 0.6); --primary-ultra-dark-trans-70: rgba(25, 29, 22, 0.7); --primary-ultra-dark-trans-80: rgba(25, 29, 22, 0.8); --primary-ultra-dark-trans-90: rgba(25, 29, 22, 0.9); --secondary-trans-10: rgba(213, 223, 227, 0.1); --secondary-trans-20: rgba(213, 223, 227, 0.2); --secondary-trans-30: rgba(213, 223, 227, 0.3); --secondary-trans-40: rgba(213, 223, 227, 0.4); --secondary-trans-50: rgba(213, 223, 227, 0.5); --secondary-trans-60: rgba(213, 223, 227, 0.6); --secondary-trans-70: rgba(213, 223, 227, 0.7); --secondary-trans-80: rgba(213, 223, 227, 0.8); --secondary-trans-90: rgba(213, 223, 227, 0.9); --secondary-light-trans-10: rgba(209, 220, 224, 0.1); --secondary-light-trans-20: rgba(209, 220, 224, 0.2); --secondary-light-trans-30: rgba(209, 220, 224, 0.3); --secondary-light-trans-40: rgba(209, 220, 224, 0.4); --secondary-light-trans-50: rgba(209, 220, 224, 0.5); --secondary-light-trans-60: rgba(209, 220, 224, 0.6); --secondary-light-trans-70: rgba(209, 220, 224, 0.7); --secondary-light-trans-80: rgba(209, 220, 224, 0.8); --secondary-light-trans-90: rgba(209, 220, 224, 0.9); --secondary-dark-trans-10: rgba(51, 69, 77, 0.1); --secondary-dark-trans-20: rgba(51, 69, 77, 0.2); --secondary-dark-trans-30: rgba(51, 69, 77, 0.3); --secondary-dark-trans-40: rgba(51, 69, 77, 0.4); --secondary-dark-trans-50: rgba(51, 69, 77, 0.5); --secondary-dark-trans-60: rgba(51, 69, 77, 0.6); --secondary-dark-trans-70: rgba(51, 69, 77, 0.7); --secondary-dark-trans-80: rgba(51, 69, 77, 0.8); --secondary-dark-trans-90: rgba(51, 69, 77, 0.9); --secondary-ultra-dark-trans-10: rgba(20, 28, 31, 0.1); --secondary-ultra-dark-trans-20: rgba(20, 28, 31, 0.2); --secondary-ultra-dark-trans-30: rgba(20, 28, 31, 0.3); --secondary-ultra-dark-trans-40: rgba(20, 28, 31, 0.4); --secondary-ultra-dark-trans-50: rgba(20, 28, 31, 0.5); --secondary-ultra-dark-trans-60: rgba(20, 28, 31, 0.6); --secondary-ultra-dark-trans-70: rgba(20, 28, 31, 0.7); --secondary-ultra-dark-trans-80: rgba(20, 28, 31, 0.8); --secondary-ultra-dark-trans-90: rgba(20, 28, 31, 0.9); --accent-trans-10: rgba(234, 172, 139, 0.1); --accent-trans-20: rgba(234, 172, 139, 0.2); --accent-trans-30: rgba(234, 172, 139, 0.3); --accent-trans-40: rgba(234, 172, 139, 0.4); --accent-trans-50: rgba(234, 172, 139, 0.5); --accent-trans-60: rgba(234, 172, 139, 0.6); --accent-trans-70: rgba(234, 172, 139, 0.7); --accent-trans-80: rgba(234, 172, 139, 0.8); --accent-trans-90: rgba(234, 172, 139, 0.9); --accent-light-trans-10: rgba(243, 209, 190, 0.1); --accent-light-trans-20: rgba(243, 209, 190, 0.2); --accent-light-trans-30: rgba(243, 209, 190, 0.3); --accent-light-trans-40: rgba(243, 209, 190, 0.4); --accent-light-trans-50: rgba(243, 209, 190, 0.5); --accent-light-trans-60: rgba(243, 209, 190, 0.6); --accent-light-trans-70: rgba(243, 209, 190, 0.7); --accent-light-trans-80: rgba(243, 209, 190, 0.8); --accent-light-trans-90: rgba(243, 209, 190, 0.9); --accent-dark-trans-10: rgba(108, 51, 20, 0.1); --accent-dark-trans-20: rgba(108, 51, 20, 0.2); --accent-dark-trans-30: rgba(108, 51, 20, 0.3); --accent-dark-trans-40: rgba(108, 51, 20, 0.4); --accent-dark-trans-50: rgba(108, 51, 20, 0.5); --accent-dark-trans-60: rgba(108, 51, 20, 0.6); --accent-dark-trans-70: rgba(108, 51, 20, 0.7); --accent-dark-trans-80: rgba(108, 51, 20, 0.8); --accent-dark-trans-90: rgba(108, 51, 20, 0.9); --accent-ultra-dark-trans-10: rgba(43, 20, 8, 0.1); --accent-ultra-dark-trans-20: rgba(43, 20, 8, 0.2); --accent-ultra-dark-trans-30: rgba(43, 20, 8, 0.3); --accent-ultra-dark-trans-40: rgba(43, 20, 8, 0.4); --accent-ultra-dark-trans-50: rgba(43, 20, 8, 0.5); --accent-ultra-dark-trans-60: rgba(43, 20, 8, 0.6); --accent-ultra-dark-trans-70: rgba(43, 20, 8, 0.7); --accent-ultra-dark-trans-80: rgba(43, 20, 8, 0.8); --accent-ultra-dark-trans-90: rgba(43, 20, 8, 0.9); --base-trans-10: rgba(52, 79, 111, 0.1); --base-trans-20: rgba(52, 79, 111, 0.2); --base-trans-30: rgba(52, 79, 111, 0.3); --base-trans-40: rgba(52, 79, 111, 0.4); --base-trans-50: rgba(52, 79, 111, 0.5); --base-trans-60: rgba(52, 79, 111, 0.6); --base-trans-70: rgba(52, 79, 111, 0.7); --base-trans-80: rgba(52, 79, 111, 0.8); --base-trans-90: rgba(52, 79, 111, 0.9); --base-light-trans-10: rgba(203, 215, 231, 0.1); --base-light-trans-20: rgba(203, 215, 231, 0.2); --base-light-trans-30: rgba(203, 215, 231, 0.3); --base-light-trans-40: rgba(203, 215, 231, 0.4); --base-light-trans-50: rgba(203, 215, 231, 0.5); --base-light-trans-60: rgba(203, 215, 231, 0.6); --base-light-trans-70: rgba(203, 215, 231, 0.7); --base-light-trans-80: rgba(203, 215, 231, 0.8); --base-light-trans-90: rgba(203, 215, 231, 0.9); --base-dark-trans-10: rgba(41, 61, 87, 0.1); --base-dark-trans-20: rgba(41, 61, 87, 0.2); --base-dark-trans-30: rgba(41, 61, 87, 0.3); --base-dark-trans-40: rgba(41, 61, 87, 0.4); --base-dark-trans-50: rgba(41, 61, 87, 0.5); --base-dark-trans-60: rgba(41, 61, 87, 0.6); --base-dark-trans-70: rgba(41, 61, 87, 0.7); --base-dark-trans-80: rgba(41, 61, 87, 0.8); --base-dark-trans-90: rgba(41, 61, 87, 0.9); --base-ultra-dark-trans-10: rgba(16, 25, 35, 0.1); --base-ultra-dark-trans-20: rgba(16, 25, 35, 0.2); --base-ultra-dark-trans-30: rgba(16, 25, 35, 0.3); --base-ultra-dark-trans-40: rgba(16, 25, 35, 0.4); --base-ultra-dark-trans-50: rgba(16, 25, 35, 0.5); --base-ultra-dark-trans-60: rgba(16, 25, 35, 0.6); --base-ultra-dark-trans-70: rgba(16, 25, 35, 0.7); --base-ultra-dark-trans-80: rgba(16, 25, 35, 0.8); --base-ultra-dark-trans-90: rgba(16, 25, 35, 0.9); --white-trans-10: rgba(255, 255, 255, 0.1); --white-trans-20: rgba(255, 255, 255, 0.2); --white-trans-30: rgba(255, 255, 255, 0.3); --white-trans-40: rgba(255, 255, 255, 0.4); --white-trans-50: rgba(255, 255, 255, 0.5); --white-trans-60: rgba(255, 255, 255, 0.6); --white-trans-70: rgba(255, 255, 255, 0.7); --white-trans-80: rgba(255, 255, 255, 0.8); --white-trans-90: rgba(255, 255, 255, 0.9); --black-trans-10: rgba(0, 0, 0, 0.1); --black-trans-20: rgba(0, 0, 0, 0.2); --black-trans-30: rgba(0, 0, 0, 0.3); --black-trans-40: rgba(0, 0, 0, 0.4); --black-trans-50: rgba(0, 0, 0, 0.5); --black-trans-60: rgba(0, 0, 0, 0.6); --black-trans-70: rgba(0, 0, 0, 0.7); --black-trans-80: rgba(0, 0, 0, 0.8); --black-trans-90: rgba(0, 0, 0, 0.9); --shade-white: #fff; --shade-black: #000; --bg-ultra-light: var(--secondary-light); --bg-light: var(--secondary); --bg-dark: var(--primary-dark); --bg-ultra-dark: var(--primary-ultra-dark); --text-light: var(--shade-ultra-light); --text-light-muted: var(--white-trans-80); --text-dark: var(--shade-ultra-dark); --text-dark-muted: var(--black-trans-80); --body-bg-color: var(--neutral); --body-color: var(--primary-dark); } :root { --on: initial; --off: ; --section-padding-x: 1.6rem; --section-padding-block: var(--section-space-m); --section-gutter: 1.6rem; --gutter: 1.6rem; --text-xs: 1.26rem; --text-s: 1.42rem; --text-m: 1.8rem; --text-l: 2.025rem; --text-xl: 2.28rem; --text-xxl: 2.565rem; --root-font-size: 62.5%; --h6: 1.26rem; --h5: 1.42rem; --h4: 1.8rem; --h3: 2.025rem; --h2: 2.28rem; --h1: 2.565rem; --space-xs: 1.896rem; --space-s: 2.133rem; --space-m: 2.4rem; --space-l: 2.7rem; --space-xl: 3.038rem; --space-xxl: 3.42rem; --section-space-xs: 3.84rem; --section-space-s: 4.8rem; --section-space-m: 6rem; --section-space-l: 7.5rem; --section-space-xl: 9.375rem; --section-space-xxl: 11.719rem; --content-width: 136.6rem; --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2)); --width-xs: calc(var(--content-width) * 0.1); --width-s: calc(var(--content-width) * 0.2); --width-m: calc(var(--content-width) * 0.4); --width-l: calc(var(--content-width) * 0.6); --width-xl: calc(var(--content-width) * 0.8); --width-xxl: calc(var(--content-width) * 0.9); --width-vp-max: calc(var(--content-width) * 1); --width-content: calc(var(--content-width) * 1); --width-full: calc(var(--content-width) * 100%); --width-10: calc(var(--content-width) * 0.1); --width-20: calc(var(--content-width) * 0.2); --width-30: calc(var(--content-width) * 0.3); --width-40: calc(var(--content-width) * 0.4); --width-50: calc(var(--content-width) * 0.5); --width-60: calc(var(--content-width) * 0.6); --width-70: calc(var(--content-width) * 0.7); --width-80: calc(var(--content-width) * 0.8); --width-90: calc(var(--content-width) * 0.9); --focus-color: var(--action); --focus-width: 2px; --focus-offset: 0.25em; --box-shadow-m: 0 4px 4px -10px rgba(255, 251, 245, 0.04), 0 13px 13px -10px rgba(255, 251, 245, 0.06), 0 40px 60px -10px rgba(255, 251, 245, 0.08); --box-shadow-l: 0 2.7px 3.6px -5px rgba(255, 251, 245, 0.04), 0 7.5px 10px -5px rgba(255, 251, 245, 0.06), 0 18px 24.1px -5px rgba(255, 251, 245, 0.08), 0 60px 80px -5px rgba(255, 251, 245, 0.1); --box-shadow-xl: 2.8px 2.8px 2.2px rgba(255, 251, 245, 0.02), 0 6.7px 5.3px -5px rgba(255, 251, 245, 0.04), 0 12.5px 10px -5px rgba(255, 251, 245, 0.06), 0 22.3px 17.9px -5px rgba(255, 251, 245, 0.08), 0 41.8px 33.4px -5px rgba(255, 251, 245, 0.1), 0 80px 80px -5px rgba(255, 251, 245, 0.105); --box-shadow-1: 0 4px 4px -10px rgba(255, 251, 245, 0.04), 0 13px 13px -10px rgba(255, 251, 245, 0.06), 0 40px 60px -10px rgba(255, 251, 245, 0.08); --box-shadow-2: 0 2.7px 3.6px -5px rgba(255, 251, 245, 0.04), 0 7.5px 10px -5px rgba(255, 251, 245, 0.06), 0 18px 24.1px -5px rgba(255, 251, 245, 0.08), 0 60px 80px -5px rgba(255, 251, 245, 0.1); --box-shadow-3: 2.8px 2.8px 2.2px rgba(255, 251, 245, 0.02), 0 6.7px 5.3px -5px rgba(255, 251, 245, 0.04), 0 12.5px 10px -5px rgba(255, 251, 245, 0.06), 0 22.3px 17.9px -5px rgba(255, 251, 245, 0.08), 0 41.8px 33.4px -5px rgba(255, 251, 245, 0.1), 0 80px 80px -5px rgba(255, 251, 245, 0.105); --admin-bar-height: var(--wp-admin--admin-bar--height, 0px); --text-xxl-line-height: 1.5; --text-xxl-max-width: 100%; --text-xl-line-height: 1.5; --text-xl-max-width: 100%; --text-l-line-height: 1.5; --text-l-max-width: 100%; --text-m-line-height: calc(6px + 2ex); --text-m-max-width: 100%; --text-s-line-height: 1.5; --text-s-max-width: 100%; --text-xs-line-height: 1.5; --text-xs-max-width: 100%; --base-text-lh: calc(6px + 2ex); --heading-font-family: RestoraRegular; --heading-line-height: calc(4px + 2ex); --heading-font-weight: 700; --heading-max-width: 100%; --heading-text-transform: none; --heading-text-wrap: pretty; --base-heading-lh: calc(4px + 2ex); --h1-line-height: 1.2; --h1-max-width: 100%; --h2-line-height: 1.2; --h2-max-width: 100%; --h3-font-family: VarelaRound; --h3-line-height: 1.2; --h3-max-width: 100%; --h4-line-height: calc(4px + 2ex); --h4-max-width: 100%; --h5-line-height: 1.2; --h5-max-width: 100%; --h6-line-height: 1.2; --h6-max-width: 100%; --text-font-family: VarelaRound; --text-color: var(--primary-dark); --text-line-height: calc(6px + 2ex); --text-text-wrap: pretty; } :root { --grid-1: repeat(1, minmax(0, 1fr)); --grid-2: repeat(2, minmax(0, 1fr)); --grid-3: repeat(3, minmax(0, 1fr)); --grid-4: repeat(4, minmax(0, 1fr)); --grid-5: repeat(5, minmax(0, 1fr)); --grid-6: repeat(6, minmax(0, 1fr)); --grid-7: repeat(7, minmax(0, 1fr)); --grid-8: repeat(8, minmax(0, 1fr)); --grid-9: repeat(9, minmax(0, 1fr)); --grid-10: repeat(10, minmax(0, 1fr)); --grid-11: repeat(11, minmax(0, 1fr)); --grid-12: repeat(12, minmax(0, 1fr)); --grid-1-2: minmax(0, 1fr) minmax(0, 2fr); --grid-1-3: minmax(0, 1fr) minmax(0, 3fr); --grid-2-1: minmax(0, 2fr) minmax(0, 1fr); --grid-2-3: minmax(0, 2fr) minmax(0, 3fr); --grid-3-1: minmax(0, 3fr) minmax(0, 1fr); --grid-3-2: minmax(0, 3fr) minmax(0, 2fr); } :root { --grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr)); --grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr)); --grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr)); --grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr)); --grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr)); --grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr)); --grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr)); --grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr)); --grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr)); --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr)); --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr)); --auto-grid-aggressiveness: 0.7; } :root { --header-height: 0rem; --header-height-xl: 0rem; --header-height-l: 0rem; --header-height-m: 0rem; --header-height-s: 0rem; } @media (max-width: 1366px) { :root { --header-height: var(--header-height-xl); } } @media (max-width: 992px) { :root { --header-height: var(--header-height-l); } } @media (max-width: 768px) { :root { --header-height: var(--header-height-m); } } @media (max-width: 480px) { :root { --header-height: var(--header-height-s); } } :root { --paragraph-spacing: 1em; --heading-spacing: 1.5em; --list-spacing: var(--paragraph-spacing); --list-indent-spacing: 2em; --list-item-spacing: 0.5em; --nested-list-indent-spacing: 1em; --flow-spacing: var(--paragraph-spacing); --figure-spacing: var(--paragraph-spacing); --figcaption-spacing: 0.5em; --blockquote-spacing: var(--paragraph-spacing); } :root { --option-primary-btn-outline: on; --option-secondary-btn-outline: on; --btn-padding-block: 0.75em; --btn-padding-inline: 1.5em; --btn-min-width: 15rem; --btn-line-height: 1; --btn-font-weight: 400; --btn-font-style: normal; --btn-text-decoration: none; --btn-text-decoration-hover: none; --btn-letter-spacing: 0; --btn-text-transform: none; --btn-border-width: 0.25rem; --btn-outline-border-width: 0.25rem; --btn-border-style: solid; --btn-border-radius: var(--radius-xl); --btn-justify-content: center; --btn-text-align: center; } /* Deprecated in ACSS 2.7 */ :root { --btn-border-size: 0.25rem; --btn-radius: var(--radius-xl); --outline-btn-border-size: 0.25rem; --btn-pad-x: 1.5em; --btn-pad-y: 0.75em; --btn-text-style: normal; --btn-weight: 400; --btn-width: 15; } :root { --link-color: var(--action); --link-color-hover: var(--action-hover); --link-transition: var(--transition); --link-decoration: none; --link-decoration-hover: inherit; --link-underline-offset: auto; --link-weight: 400; } :root { --card-padding: var(--space-m); --card-gap: calc(var(--content-gap) / 2); --card-border-width: var(--border-width); --card-border-style: solid; --card-display: flex; --card-radius: var(--radius-xl); --card-heading-size: var(--h3); --card-text-size: var(--text-s); --card-button-font-size: var(--text-s); --card-icon-size: 68px; --card-line-height: 1.4; --card-avatar-radius: var(--radius); --card-avatar-border-width: var(--border-width); --card-avatar-border-style: var(--border-style); --card-avatar-size: 140px; --card-avatar-aspect-ratio: 1; --card-media-radius: var(--radius); --card-media-aspect-ratio: 1.3333333333; --card-media-object-fit: cover; --card-icon-radius: var(--icon-radius); } :root, .color-scheme--main, .color-scheme--alt { --light-card-background: var(--white); --light-card-background-hover: var(--light-card-background); --light-card-heading-color: var(--text-dark); --light-card-text-color: var(--text-dark-muted); --light-card-link-color: var(--primary); --light-card-button-style: primary; --light-card-border-color: var(--border-color-dark); --dark-card-background: var(--black); --dark-card-background-hover: var(--dark-card-background); --dark-card-heading-color: var(--text-light); --dark-card-text-color: var(--text-light-muted); --dark-card-link-color: var(--primary); --dark-card-link-color-hover: var(--primary-hover); --dark-card-button-style: primary; --dark-card-border-color: var(--border-color-light); } :root { --fr-card-padding:, ; } :root { --col-width-s: 13rem; --col-width-m: 25rem; --col-width-l: 38rem; --col-rule-width-s: 0.1em; --col-rule-width-m: 0.3em; --col-rule-width-l: 0.5em; } :root { --sticky-s: 2.5%; --sticky-m: 5%; --sticky-l: 10%; } :root { --content-gap: var(--space-m); --fr-content-gap: var(--space-m); --container-gap: var(--space-xl); --fr-container-gap: var(--space-xl); --grid-gap: var(--space-m); --fr-grid-gap: var(--space-m); --bg-ultra-light-text: var(--text-dark); --bg-light-text: var(--text-dark); --bg-dark-text: var(--text-light); --bg-ultra-dark-text: var(--text-light); --bg-ultra-light-heading: var(--text-dark); --bg-light-heading: var(--text-dark); --bg-dark-heading: var(--text-light); --bg-ultra-dark-heading: var(--text-light); --bg-ultra-light-button: primary; --bg-light-button: primary; --bg-dark-button: primary; --bg-ultra-dark-button: primary; } :root { --radius: 1rem; --radius-50: 50%; --radius-circle: 50vw; --radius-none: 0; --radius-xs: 0.4444444444rem; --radius-s: 0.6666666667rem; --radius-m: 1rem; --radius-l: 1.5rem; --radius-xl: 2.25rem; --radius-xxl: 3.375rem; --border-size: 1px; --border-width: 1px; --border-style: solid; --border-color-dark: var(--black-trans-20); --border-color-light: var(--white-trans-20); --border: var(--border-size) var(--border-style) var(--border-color-dark); --border-light: var(--border-size) var(--border-style) var(--border-color-light); --border-dark: var(--border-size) var(--border-style) var(--border-color-dark); } :root { --divider-size: 1px; --divider-style: solid; --divider-inline-size: 100%; --divider-gap: var(--content-gap); --divider-color-dark: var(--black-trans-20); --divider-color-light: var(--white-trans-20); --divider: var(--divider-size) var(--divider-style) var(--divider-color-dark); --divider-light: var(--divider-size) var(--divider-style) var(--divider-color-light); --divider-dark: var(--divider-size) var(--divider-style) var(--divider-color-dark); } :root { --transition-duration: 0.3s; --transition-timing: ease-in-out; --transition-delay: 0s; --transition: background var(--transition-duration) var(--transition-timing) var(--transition-delay), color var(--transition-duration) var(--transition-timing) var(--transition-delay), border var(--transition-duration) var(--transition-timing) var(--transition-delay), translate var(--transition-duration) var(--transition-timing) var(--transition-delay); } body.boxed-layout { inline-size: 100%; max-inline-size: var(--body-max-width, 1920px); box-shadow: var(--body-box-shadow, 0 0 80px 0 var(--shade-ultra-dark-trans-20)); border-color: var(--body-border-color, transparent); border-style: var(--body-border-style, none); border-width: var(--body-border-width, 0); border-radius: var(--body-border-radius, 0); margin-block-start: var(--body-margin-top, 0) !important; margin-inline: auto !important; } body.boxed-layout header.sticky > *, body.boxed-layout #brx-header.sticky.sticky > * { width: var(--boxed-width); margin-inline: auto; } [id] { scroll-margin-top: var(--offset, 0); } html { font-size: var(--root-font-size) !important; scroll-behavior: smooth; } :root { interpolate-size: allow-keywords; } *, *::before, *::after { box-sizing: border-box; } body { min-block-size: 100vh; } input, button, textarea, select { font: inherit; } :where(dd) { margin-inline-start: 0; } img { object-fit: var(--object-fit, cover); object-position: var(--object-position, 50% 50%); } .focus-parent:focus-within:not(:has(:focus-visible)) { outline: none; outline-offset: 0; } .focus-parent:focus-within { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } .focus-parent :focus { outline: none !important; box-shadow: none !important; } .focus-parent--shadow:focus-within:not(:has(:focus-visible)) { box-shadow: none; } .focus-parent--shadow:focus-within { box-shadow: 0 0 0 var(--focus-width) var(--focus-color); } .focus-parent--shadow :focus { outline: none !important; box-shadow: none !important; } .focus-parent--outline:focus-within:not(:has(:focus-visible)) { outline: none; outline-offset: 0; } .focus-parent--outline:focus-within { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } .focus-parent--outline :focus { outline: none !important; box-shadow: none !important; } .hidden-accessible { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip-path: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ::selection { background: var(--selection-bg-color, var(--action)); /* WebKit/Blink Browsers */ } ::-moz-selection { background: var(--selection-bg-color, var(--action)); /* Gecko Browsers */ } ::selection { color: var(--selection-text-color, var(--action-dark)); /* WebKit/Blink Browsers */ } ::-moz-selection { color: var(--selection-text-color, var(--action-dark)); /* Gecko Browsers */ } .selection--alt::selection, .selection--alt ::selection { background: var(--selection-bg-color-alt, var(--base)); /* WebKit/Blink Browsers */ } .selection--alt::selection, .selection--alt ::-moz-selection { background: var(--selection-bg-color-alt, var(--base)); /* Gecko Browsers */ } .selection--alt::selection, .selection--alt ::selection { color: var(--selection-text-color-alt, var(--white)); /* WebKit/Blink Browsers */ } .selection--alt::selection, .selection--alt ::-moz-selection { color: var(--selection-text-color-alt, var(--white)); /* Gecko Browsers */ } body:not(:has([data-sticky-header="0"]), .content-offset--off) .acss-offset-content:not(.panel-content) > *:first-child > *:first-child:not(.bricks-shape-divider) { margin-block-start: var(--header-height); } :where(section:not(section section)) { padding-block: var(--section-padding-block); padding-inline: var(--gutter); } body:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; } .smart-spacing-normalize :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; } .smart-spacing-preview > * + *, .smart-spacing.smart-spacing > * + * { margin-block-start: var(--flow-spacing, initial); margin-block-end: 0; } .smart-spacing-preview > * + :where(h1, h2, h3, h4, h5, h6), .smart-spacing.smart-spacing > * + :where(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h2), .smart-spacing.smart-spacing > :where(* + h2) { margin-block-start: var(--h2-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h3), .smart-spacing.smart-spacing > :where(* + h3) { margin-block-start: var(--h3-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h4), .smart-spacing.smart-spacing > :where(* + h4) { margin-block-start: var(--h4-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h5), .smart-spacing.smart-spacing > :where(* + h5) { margin-block-start: var(--h5-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > :where(* + h6), .smart-spacing.smart-spacing > :where(* + h6) { margin-block-start: var(--h6-spacing, var(--heading-spacing)); margin-block-end: 0; } .smart-spacing-preview > * + p, .smart-spacing.smart-spacing > * + p { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .smart-spacing-preview > :is(* + ul, * + ol), .smart-spacing.smart-spacing > :is(* + ul, * + ol) { margin-block: var(--list-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview > :is(ul, ol), .smart-spacing.smart-spacing > :is(ul, ol) { padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview > ul * + li, .smart-spacing-preview > ol * + li, .smart-spacing.smart-spacing > ul * + li, .smart-spacing.smart-spacing > ol * + li { margin-block-start: var(--list-item-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .smart-spacing-preview > ul ul, .smart-spacing-preview > ol ol, .smart-spacing-preview > ul ol, .smart-spacing-preview > ol ul, .smart-spacing.smart-spacing > ul ul, .smart-spacing.smart-spacing > ol ol, .smart-spacing.smart-spacing > ul ol, .smart-spacing.smart-spacing > ol ul { margin-block: var(--nested-list-spacing, var(--list-item-spacing, initial)); padding-inline-start: var(--nested-list-indent-spacing, initial); } .smart-spacing-preview > :is(ul, ol) :is(ul, ol) li, .smart-spacing.smart-spacing > :is(ul, ol) :is(ul, ol) li { margin-block-start: var(--nested-list-item-spacing, var(--list-item-spacing, initial)); } .smart-spacing-preview > * + figure, .smart-spacing-preview > * + picture, .smart-spacing.smart-spacing > * + figure, .smart-spacing.smart-spacing > * + picture { margin-block: var(--figure-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview figcaption, .smart-spacing.smart-spacing figcaption { margin-block: var(--figcaption-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview > * + blockquote:where(:not(figure > blockquote)), .smart-spacing.smart-spacing > * + blockquote:where(:not(figure > blockquote)) { margin-block: var(--blockquote-spacing, var(--flow-spacing, initial)); } .smart-spacing-preview > blockquote * + *, .smart-spacing.smart-spacing > blockquote * + * { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .smart-spacing-preview > :is(figure, blockquote, ul, ol) + *, .smart-spacing.smart-spacing > :is(figure, blockquote, ul, ol) + * { --paragraph-spacing: 0; --flow-spacing: 0; } .smart-spacing--off.smart-spacing--off :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; } :where(.woocommerce-checkout) p { margin: 0 0 1.2em; } .brxe-text > * + *, .brxe-post-content:where(:not([data-source="bricks"])) > * + * { margin-block-start: var(--flow-spacing, initial); margin-block-end: 0; } .brxe-text > * + :where(h1, h2, h3, h4, h5, h6), .brxe-post-content:where(:not([data-source="bricks"])) > * + :where(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .brxe-text > :where(* + h2), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h2) { margin-block-start: var(--h2-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > :where(* + h3), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h3) { margin-block-start: var(--h3-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > :where(* + h4), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h4) { margin-block-start: var(--h4-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > :where(* + h5), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h5) { margin-block-start: var(--h5-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > :where(* + h6), .brxe-post-content:where(:not([data-source="bricks"])) > :where(* + h6) { margin-block-start: var(--h6-spacing, var(--heading-spacing)); margin-block-end: 0; } .brxe-text > * + p, .brxe-post-content:where(:not([data-source="bricks"])) > * + p { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .brxe-text > :is(* + ul, * + ol), .brxe-post-content:where(:not([data-source="bricks"])) > :is(* + ul, * + ol) { margin-block: var(--list-spacing, var(--flow-spacing, initial)); } .brxe-text > :is(ul, ol), .brxe-post-content:where(:not([data-source="bricks"])) > :is(ul, ol) { padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial)); } .brxe-text > ul * + li, .brxe-text > ol * + li, .brxe-post-content:where(:not([data-source="bricks"])) > ul * + li, .brxe-post-content:where(:not([data-source="bricks"])) > ol * + li { margin-block-start: var(--list-item-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .brxe-text > ul ul, .brxe-text > ol ol, .brxe-text > ul ol, .brxe-text > ol ul, .brxe-post-content:where(:not([data-source="bricks"])) > ul ul, .brxe-post-content:where(:not([data-source="bricks"])) > ol ol, .brxe-post-content:where(:not([data-source="bricks"])) > ul ol, .brxe-post-content:where(:not([data-source="bricks"])) > ol ul { margin-block: var(--nested-list-spacing, var(--list-item-spacing, initial)); padding-inline-start: var(--nested-list-indent-spacing, initial); } .brxe-text > :is(ul, ol) :is(ul, ol) li, .brxe-post-content:where(:not([data-source="bricks"])) > :is(ul, ol) :is(ul, ol) li { margin-block-start: var(--nested-list-item-spacing, var(--list-item-spacing, initial)); } .brxe-text > * + figure, .brxe-text > * + picture, .brxe-post-content:where(:not([data-source="bricks"])) > * + figure, .brxe-post-content:where(:not([data-source="bricks"])) > * + picture { margin-block: var(--figure-spacing, var(--flow-spacing, initial)); } .brxe-text figcaption, .brxe-post-content:where(:not([data-source="bricks"])) figcaption { margin-block: var(--figcaption-spacing, var(--flow-spacing, initial)); } .brxe-text > * + blockquote:where(:not(figure > blockquote)), .brxe-post-content:where(:not([data-source="bricks"])) > * + blockquote:where(:not(figure > blockquote)) { margin-block: var(--blockquote-spacing, var(--flow-spacing, initial)); } .brxe-text > blockquote * + *, .brxe-post-content:where(:not([data-source="bricks"])) > blockquote * + * { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } .brxe-text > :is(figure, blockquote, ul, ol) + *, .brxe-post-content:where(:not([data-source="bricks"])) > :is(figure, blockquote, ul, ol) + * { --paragraph-spacing: 0; --flow-spacing: 0; } body :where(p:last-of-type) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-block-start: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + * { margin-block-start: var(--flow-spacing, initial); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + :where(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h2) { margin-block-start: var(--h2-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h3) { margin-block-start: var(--h3-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h4) { margin-block-start: var(--h4-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h5) { margin-block-start: var(--h5-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :where(* + h6) { margin-block-start: var(--h6-spacing, var(--heading-spacing)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + p { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :is(* + ul, * + ol) { margin-block: var(--list-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :is(ul, ol) { padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ul * + li, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ol * + li { margin-block-start: var(--list-item-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ul ul, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ol ol, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ul ol, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > ol ul { margin-block: var(--nested-list-spacing, var(--list-item-spacing, initial)); padding-inline-start: var(--nested-list-indent-spacing, initial); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :is(ul, ol) :is(ul, ol) li { margin-block-start: var(--nested-list-item-spacing, var(--list-item-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + figure, :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + picture { margin-block: var(--figure-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p figcaption { margin-block: var(--figcaption-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + blockquote:where(:not(figure > blockquote)) { margin-block: var(--blockquote-spacing, var(--flow-spacing, initial)); } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > blockquote * + * { margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial)); margin-block-end: 0; } :not(.woocommerce-checkout) [class*="woocommerce"] * + p > :is(figure, blockquote, ul, ol) + * { --paragraph-spacing: 0; --flow-spacing: 0; } .bg--action { background-color: var(--action); } .bg--action-hover { background-color: var(--action-hover); } .bg--action-ultra-light { background-color: var(--action-ultra-light); } .bg--action-light { background-color: var(--action-light); } .bg--action-semi-light { background-color: var(--action-semi-light); } .bg--action-semi-dark { background-color: var(--action-semi-dark); } .bg--action-dark { background-color: var(--action-dark); } .bg--action-ultra-dark { background-color: var(--action-ultra-dark); } .bg--action-comp { background-color: var(--action-comp); } .bg--action-medium { background-color: var(--action-medium); } .bg--action-trans-10 { background-color: var(--action-trans-10); } .bg--action-trans-20 { background-color: var(--action-trans-20); } .bg--action-trans-30 { background-color: var(--action-trans-30); } .bg--action-trans-40 { background-color: var(--action-trans-40); } .bg--action-trans-50 { background-color: var(--action-trans-50); } .bg--action-trans-60 { background-color: var(--action-trans-60); } .bg--action-trans-70 { background-color: var(--action-trans-70); } .bg--action-trans-80 { background-color: var(--action-trans-80); } .bg--action-trans-90 { background-color: var(--action-trans-90); } .bg--action-light-trans-10 { background-color: var(--action-light-trans-10); } .bg--action-light-trans-20 { background-color: var(--action-light-trans-20); } .bg--action-light-trans-30 { background-color: var(--action-light-trans-30); } .bg--action-light-trans-40 { background-color: var(--action-light-trans-40); } .bg--action-light-trans-50 { background-color: var(--action-light-trans-50); } .bg--action-light-trans-60 { background-color: var(--action-light-trans-60); } .bg--action-light-trans-70 { background-color: var(--action-light-trans-70); } .bg--action-light-trans-80 { background-color: var(--action-light-trans-80); } .bg--action-light-trans-90 { background-color: var(--action-light-trans-90); } .bg--action-dark-trans-10 { background-color: var(--action-dark-trans-10); } .bg--action-dark-trans-20 { background-color: var(--action-dark-trans-20); } .bg--action-dark-trans-30 { background-color: var(--action-dark-trans-30); } .bg--action-dark-trans-40 { background-color: var(--action-dark-trans-40); } .bg--action-dark-trans-50 { background-color: var(--action-dark-trans-50); } .bg--action-dark-trans-60 { background-color: var(--action-dark-trans-60); } .bg--action-dark-trans-70 { background-color: var(--action-dark-trans-70); } .bg--action-dark-trans-80 { background-color: var(--action-dark-trans-80); } .bg--action-dark-trans-90 { background-color: var(--action-dark-trans-90); } .bg--action-ultra-dark-trans-10 { background-color: var(--action-ultra-dark-trans-10); } .bg--action-ultra-dark-trans-20 { background-color: var(--action-ultra-dark-trans-20); } .bg--action-ultra-dark-trans-30 { background-color: var(--action-ultra-dark-trans-30); } .bg--action-ultra-dark-trans-40 { background-color: var(--action-ultra-dark-trans-40); } .bg--action-ultra-dark-trans-50 { background-color: var(--action-ultra-dark-trans-50); } .bg--action-ultra-dark-trans-60 { background-color: var(--action-ultra-dark-trans-60); } .bg--action-ultra-dark-trans-70 { background-color: var(--action-ultra-dark-trans-70); } .bg--action-ultra-dark-trans-80 { background-color: var(--action-ultra-dark-trans-80); } .bg--action-ultra-dark-trans-90 { background-color: var(--action-ultra-dark-trans-90); } .bg--primary { background-color: var(--primary); } .bg--primary-hover { background-color: var(--primary-hover); } .bg--primary-ultra-light { background-color: var(--primary-ultra-light); } .bg--primary-light { background-color: var(--primary-light); } .bg--primary-semi-light { background-color: var(--primary-semi-light); } .bg--primary-semi-dark { background-color: var(--primary-semi-dark); } .bg--primary-dark { background-color: var(--primary-dark); } .bg--primary-ultra-dark { background-color: var(--primary-ultra-dark); } .bg--primary-comp { background-color: var(--primary-comp); } .bg--primary-medium { background-color: var(--primary-medium); } .bg--primary-trans-10 { background-color: var(--primary-trans-10); } .bg--primary-trans-20 { background-color: var(--primary-trans-20); } .bg--primary-trans-30 { background-color: var(--primary-trans-30); } .bg--primary-trans-40 { background-color: var(--primary-trans-40); } .bg--primary-trans-50 { background-color: var(--primary-trans-50); } .bg--primary-trans-60 { background-color: var(--primary-trans-60); } .bg--primary-trans-70 { background-color: var(--primary-trans-70); } .bg--primary-trans-80 { background-color: var(--primary-trans-80); } .bg--primary-trans-90 { background-color: var(--primary-trans-90); } .bg--primary-light-trans-10 { background-color: var(--primary-light-trans-10); } .bg--primary-light-trans-20 { background-color: var(--primary-light-trans-20); } .bg--primary-light-trans-30 { background-color: var(--primary-light-trans-30); } .bg--primary-light-trans-40 { background-color: var(--primary-light-trans-40); } .bg--primary-light-trans-50 { background-color: var(--primary-light-trans-50); } .bg--primary-light-trans-60 { background-color: var(--primary-light-trans-60); } .bg--primary-light-trans-70 { background-color: var(--primary-light-trans-70); } .bg--primary-light-trans-80 { background-color: var(--primary-light-trans-80); } .bg--primary-light-trans-90 { background-color: var(--primary-light-trans-90); } .bg--primary-dark-trans-10 { background-color: var(--primary-dark-trans-10); } .bg--primary-dark-trans-20 { background-color: var(--primary-dark-trans-20); } .bg--primary-dark-trans-30 { background-color: var(--primary-dark-trans-30); } .bg--primary-dark-trans-40 { background-color: var(--primary-dark-trans-40); } .bg--primary-dark-trans-50 { background-color: var(--primary-dark-trans-50); } .bg--primary-dark-trans-60 { background-color: var(--primary-dark-trans-60); } .bg--primary-dark-trans-70 { background-color: var(--primary-dark-trans-70); } .bg--primary-dark-trans-80 { background-color: var(--primary-dark-trans-80); } .bg--primary-dark-trans-90 { background-color: var(--primary-dark-trans-90); } .bg--primary-ultra-dark-trans-10 { background-color: var(--primary-ultra-dark-trans-10); } .bg--primary-ultra-dark-trans-20 { background-color: var(--primary-ultra-dark-trans-20); } .bg--primary-ultra-dark-trans-30 { background-color: var(--primary-ultra-dark-trans-30); } .bg--primary-ultra-dark-trans-40 { background-color: var(--primary-ultra-dark-trans-40); } .bg--primary-ultra-dark-trans-50 { background-color: var(--primary-ultra-dark-trans-50); } .bg--primary-ultra-dark-trans-60 { background-color: var(--primary-ultra-dark-trans-60); } .bg--primary-ultra-dark-trans-70 { background-color: var(--primary-ultra-dark-trans-70); } .bg--primary-ultra-dark-trans-80 { background-color: var(--primary-ultra-dark-trans-80); } .bg--primary-ultra-dark-trans-90 { background-color: var(--primary-ultra-dark-trans-90); } .bg--secondary { background-color: var(--secondary); } .bg--secondary-hover { background-color: var(--secondary-hover); } .bg--secondary-ultra-light { background-color: var(--secondary-ultra-light); } .bg--secondary-light { background-color: var(--secondary-light); } .bg--secondary-semi-light { background-color: var(--secondary-semi-light); } .bg--secondary-semi-dark { background-color: var(--secondary-semi-dark); } .bg--secondary-dark { background-color: var(--secondary-dark); } .bg--secondary-ultra-dark { background-color: var(--secondary-ultra-dark); } .bg--secondary-comp { background-color: var(--secondary-comp); } .bg--secondary-medium { background-color: var(--secondary-medium); } .bg--secondary-trans-10 { background-color: var(--secondary-trans-10); } .bg--secondary-trans-20 { background-color: var(--secondary-trans-20); } .bg--secondary-trans-30 { background-color: var(--secondary-trans-30); } .bg--secondary-trans-40 { background-color: var(--secondary-trans-40); } .bg--secondary-trans-50 { background-color: var(--secondary-trans-50); } .bg--secondary-trans-60 { background-color: var(--secondary-trans-60); } .bg--secondary-trans-70 { background-color: var(--secondary-trans-70); } .bg--secondary-trans-80 { background-color: var(--secondary-trans-80); } .bg--secondary-trans-90 { background-color: var(--secondary-trans-90); } .bg--secondary-light-trans-10 { background-color: var(--secondary-light-trans-10); } .bg--secondary-light-trans-20 { background-color: var(--secondary-light-trans-20); } .bg--secondary-light-trans-30 { background-color: var(--secondary-light-trans-30); } .bg--secondary-light-trans-40 { background-color: var(--secondary-light-trans-40); } .bg--secondary-light-trans-50 { background-color: var(--secondary-light-trans-50); } .bg--secondary-light-trans-60 { background-color: var(--secondary-light-trans-60); } .bg--secondary-light-trans-70 { background-color: var(--secondary-light-trans-70); } .bg--secondary-light-trans-80 { background-color: var(--secondary-light-trans-80); } .bg--secondary-light-trans-90 { background-color: var(--secondary-light-trans-90); } .bg--secondary-dark-trans-10 { background-color: var(--secondary-dark-trans-10); } .bg--secondary-dark-trans-20 { background-color: var(--secondary-dark-trans-20); } .bg--secondary-dark-trans-30 { background-color: var(--secondary-dark-trans-30); } .bg--secondary-dark-trans-40 { background-color: var(--secondary-dark-trans-40); } .bg--secondary-dark-trans-50 { background-color: var(--secondary-dark-trans-50); } .bg--secondary-dark-trans-60 { background-color: var(--secondary-dark-trans-60); } .bg--secondary-dark-trans-70 { background-color: var(--secondary-dark-trans-70); } .bg--secondary-dark-trans-80 { background-color: var(--secondary-dark-trans-80); } .bg--secondary-dark-trans-90 { background-color: var(--secondary-dark-trans-90); } .bg--secondary-ultra-dark-trans-10 { background-color: var(--secondary-ultra-dark-trans-10); } .bg--secondary-ultra-dark-trans-20 { background-color: var(--secondary-ultra-dark-trans-20); } .bg--secondary-ultra-dark-trans-30 { background-color: var(--secondary-ultra-dark-trans-30); } .bg--secondary-ultra-dark-trans-40 { background-color: var(--secondary-ultra-dark-trans-40); } .bg--secondary-ultra-dark-trans-50 { background-color: var(--secondary-ultra-dark-trans-50); } .bg--secondary-ultra-dark-trans-60 { background-color: var(--secondary-ultra-dark-trans-60); } .bg--secondary-ultra-dark-trans-70 { background-color: var(--secondary-ultra-dark-trans-70); } .bg--secondary-ultra-dark-trans-80 { background-color: var(--secondary-ultra-dark-trans-80); } .bg--secondary-ultra-dark-trans-90 { background-color: var(--secondary-ultra-dark-trans-90); } .bg--accent { background-color: var(--accent); } .bg--accent-hover { background-color: var(--accent-hover); } .bg--accent-ultra-light { background-color: var(--accent-ultra-light); } .bg--accent-light { background-color: var(--accent-light); } .bg--accent-semi-light { background-color: var(--accent-semi-light); } .bg--accent-semi-dark { background-color: var(--accent-semi-dark); } .bg--accent-dark { background-color: var(--accent-dark); } .bg--accent-ultra-dark { background-color: var(--accent-ultra-dark); } .bg--accent-comp { background-color: var(--accent-comp); } .bg--accent-medium { background-color: var(--accent-medium); } .bg--accent-trans-10 { background-color: var(--accent-trans-10); } .bg--accent-trans-20 { background-color: var(--accent-trans-20); } .bg--accent-trans-30 { background-color: var(--accent-trans-30); } .bg--accent-trans-40 { background-color: var(--accent-trans-40); } .bg--accent-trans-50 { background-color: var(--accent-trans-50); } .bg--accent-trans-60 { background-color: var(--accent-trans-60); } .bg--accent-trans-70 { background-color: var(--accent-trans-70); } .bg--accent-trans-80 { background-color: var(--accent-trans-80); } .bg--accent-trans-90 { background-color: var(--accent-trans-90); } .bg--accent-light-trans-10 { background-color: var(--accent-light-trans-10); } .bg--accent-light-trans-20 { background-color: var(--accent-light-trans-20); } .bg--accent-light-trans-30 { background-color: var(--accent-light-trans-30); } .bg--accent-light-trans-40 { background-color: var(--accent-light-trans-40); } .bg--accent-light-trans-50 { background-color: var(--accent-light-trans-50); } .bg--accent-light-trans-60 { background-color: var(--accent-light-trans-60); } .bg--accent-light-trans-70 { background-color: var(--accent-light-trans-70); } .bg--accent-light-trans-80 { background-color: var(--accent-light-trans-80); } .bg--accent-light-trans-90 { background-color: var(--accent-light-trans-90); } .bg--accent-dark-trans-10 { background-color: var(--accent-dark-trans-10); } .bg--accent-dark-trans-20 { background-color: var(--accent-dark-trans-20); } .bg--accent-dark-trans-30 { background-color: var(--accent-dark-trans-30); } .bg--accent-dark-trans-40 { background-color: var(--accent-dark-trans-40); } .bg--accent-dark-trans-50 { background-color: var(--accent-dark-trans-50); } .bg--accent-dark-trans-60 { background-color: var(--accent-dark-trans-60); } .bg--accent-dark-trans-70 { background-color: var(--accent-dark-trans-70); } .bg--accent-dark-trans-80 { background-color: var(--accent-dark-trans-80); } .bg--accent-dark-trans-90 { background-color: var(--accent-dark-trans-90); } .bg--accent-ultra-dark-trans-10 { background-color: var(--accent-ultra-dark-trans-10); } .bg--accent-ultra-dark-trans-20 { background-color: var(--accent-ultra-dark-trans-20); } .bg--accent-ultra-dark-trans-30 { background-color: var(--accent-ultra-dark-trans-30); } .bg--accent-ultra-dark-trans-40 { background-color: var(--accent-ultra-dark-trans-40); } .bg--accent-ultra-dark-trans-50 { background-color: var(--accent-ultra-dark-trans-50); } .bg--accent-ultra-dark-trans-60 { background-color: var(--accent-ultra-dark-trans-60); } .bg--accent-ultra-dark-trans-70 { background-color: var(--accent-ultra-dark-trans-70); } .bg--accent-ultra-dark-trans-80 { background-color: var(--accent-ultra-dark-trans-80); } .bg--accent-ultra-dark-trans-90 { background-color: var(--accent-ultra-dark-trans-90); } .bg--base { background-color: var(--base); } .bg--base-hover { background-color: var(--base-hover); } .bg--base-ultra-light { background-color: var(--base-ultra-light); } .bg--base-light { background-color: var(--base-light); } .bg--base-semi-light { background-color: var(--base-semi-light); } .bg--base-semi-dark { background-color: var(--base-semi-dark); } .bg--base-dark { background-color: var(--base-dark); } .bg--base-ultra-dark { background-color: var(--base-ultra-dark); } .bg--base-comp { background-color: var(--base-comp); } .bg--base-medium { background-color: var(--base-medium); } .bg--base-trans-10 { background-color: var(--base-trans-10); } .bg--base-trans-20 { background-color: var(--base-trans-20); } .bg--base-trans-30 { background-color: var(--base-trans-30); } .bg--base-trans-40 { background-color: var(--base-trans-40); } .bg--base-trans-50 { background-color: var(--base-trans-50); } .bg--base-trans-60 { background-color: var(--base-trans-60); } .bg--base-trans-70 { background-color: var(--base-trans-70); } .bg--base-trans-80 { background-color: var(--base-trans-80); } .bg--base-trans-90 { background-color: var(--base-trans-90); } .bg--base-light-trans-10 { background-color: var(--base-light-trans-10); } .bg--base-light-trans-20 { background-color: var(--base-light-trans-20); } .bg--base-light-trans-30 { background-color: var(--base-light-trans-30); } .bg--base-light-trans-40 { background-color: var(--base-light-trans-40); } .bg--base-light-trans-50 { background-color: var(--base-light-trans-50); } .bg--base-light-trans-60 { background-color: var(--base-light-trans-60); } .bg--base-light-trans-70 { background-color: var(--base-light-trans-70); } .bg--base-light-trans-80 { background-color: var(--base-light-trans-80); } .bg--base-light-trans-90 { background-color: var(--base-light-trans-90); } .bg--base-dark-trans-10 { background-color: var(--base-dark-trans-10); } .bg--base-dark-trans-20 { background-color: var(--base-dark-trans-20); } .bg--base-dark-trans-30 { background-color: var(--base-dark-trans-30); } .bg--base-dark-trans-40 { background-color: var(--base-dark-trans-40); } .bg--base-dark-trans-50 { background-color: var(--base-dark-trans-50); } .bg--base-dark-trans-60 { background-color: var(--base-dark-trans-60); } .bg--base-dark-trans-70 { background-color: var(--base-dark-trans-70); } .bg--base-dark-trans-80 { background-color: var(--base-dark-trans-80); } .bg--base-dark-trans-90 { background-color: var(--base-dark-trans-90); } .bg--base-ultra-dark-trans-10 { background-color: var(--base-ultra-dark-trans-10); } .bg--base-ultra-dark-trans-20 { background-color: var(--base-ultra-dark-trans-20); } .bg--base-ultra-dark-trans-30 { background-color: var(--base-ultra-dark-trans-30); } .bg--base-ultra-dark-trans-40 { background-color: var(--base-ultra-dark-trans-40); } .bg--base-ultra-dark-trans-50 { background-color: var(--base-ultra-dark-trans-50); } .bg--base-ultra-dark-trans-60 { background-color: var(--base-ultra-dark-trans-60); } .bg--base-ultra-dark-trans-70 { background-color: var(--base-ultra-dark-trans-70); } .bg--base-ultra-dark-trans-80 { background-color: var(--base-ultra-dark-trans-80); } .bg--base-ultra-dark-trans-90 { background-color: var(--base-ultra-dark-trans-90); } .bg--neutral { background-color: var(--neutral); } .bg--neutral-hover { background-color: var(--neutral-hover); } .bg--neutral-ultra-light { background-color: var(--neutral-ultra-light); } .bg--neutral-light { background-color: var(--neutral-light); } .bg--neutral-semi-light { background-color: var(--neutral-semi-light); } .bg--neutral-semi-dark { background-color: var(--neutral-semi-dark); } .bg--neutral-dark { background-color: var(--neutral-dark); } .bg--neutral-ultra-dark { background-color: var(--neutral-ultra-dark); } .bg--neutral-comp { background-color: var(--neutral-comp); } .bg--neutral-medium { background-color: var(--neutral-medium); } .bg--white { background-color: var(--white); } .bg--black { background-color: var(--black); } .bg--white-trans-10 { background-color: var(--white-trans-10); } .bg--white-trans-20 { background-color: var(--white-trans-20); } .bg--white-trans-30 { background-color: var(--white-trans-30); } .bg--white-trans-40 { background-color: var(--white-trans-40); } .bg--white-trans-50 { background-color: var(--white-trans-50); } .bg--white-trans-60 { background-color: var(--white-trans-60); } .bg--white-trans-70 { background-color: var(--white-trans-70); } .bg--white-trans-80 { background-color: var(--white-trans-80); } .bg--white-trans-90 { background-color: var(--white-trans-90); } .bg--black-trans-10 { background-color: var(--black-trans-10); } .bg--black-trans-20 { background-color: var(--black-trans-20); } .bg--black-trans-30 { background-color: var(--black-trans-30); } .bg--black-trans-40 { background-color: var(--black-trans-40); } .bg--black-trans-50 { background-color: var(--black-trans-50); } .bg--black-trans-60 { background-color: var(--black-trans-60); } .bg--black-trans-70 { background-color: var(--black-trans-70); } .bg--black-trans-80 { background-color: var(--black-trans-80); } .bg--black-trans-90 { background-color: var(--black-trans-90); } :has(> .is-bg) { position: relative; isolation: isolate; } :is(*, img, figure, picture).is-bg { position: var(--bg-position, absolute); inset: var(--bg-inset, 0); inline-size: var(--bg-width, 100%); block-size: var(--bg-height, 100%); border-radius: var(--bg-radius, 0); object-fit: var(--bg-object-fit, cover); object-position: var(--bg-object-position, center); z-index: var(--bg-z-index, -2); border-radius: var(--bg-radius, 0); } :is(*, img, figure, picture).is-bg > img { object-fit: var(--bg-object-fit, cover); object-position: var(--bg-object-position, center); } .content-grid > :is(*, img, figure, picture).is-bg { grid-column: full; } .bg--ultra-light { background-color: var(--bg-ultra-light); } .bg--light { background-color: var(--bg-light); } .bg--dark { background-color: var(--bg-dark); } .bg--ultra-dark { background-color: var(--bg-ultra-dark); } .text--light.text--light, .text--light.text--light :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--text-light); } .text--light-muted.text--light-muted, .text--light-muted.text--light-muted :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--text-light-muted); } .text--dark.text--dark, .text--dark.text--dark :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--text-dark); } .text--dark-muted.text--dark-muted, .text--dark-muted.text--dark-muted :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--text-dark-muted); } .content-grid { --full: minmax(var(--gutter), 1fr); padding-inline: 0; column-gap: 0 !important; display: grid !important; grid-template-columns: [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width, 100px)) [feature-start] minmax(0, var(--feature-width, 50px)) [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width, 50px)) [feature-end] minmax(0, var(--feature-max-width, 100px)) [feature-max-end] var(--full) [full-end]; } .content-grid > :not(.content--feature, .content--feature-max, .content--full, .content--full-safe) { width: 100%; } .content-grid > :where(:not(.content--feature, .content--feature-max, .content--full, .content--full-safe)) { grid-column: content; } .content--feature { grid-column: feature; } .content--feature-max { grid-column: feature-max; } .content--full { grid-column: full; } .content--full-safe { grid-column: full; padding-inline: var(--gutter); } .content-grid:where(.content--full-safe) { padding-inline: var(--gutter); } :is(.content--feature, .content--feature-max, .content--full, .content--full-safe):not(.content-grid--off :is(.content--feature, .content--feature-max, .content--full, .content--full-safe)) { width: 100% !important; max-width: 100%; } .content-grid:is([class*="padding--"], [class*="section--"], [class*="header--"]) { padding-inline: 0; } :root, .color-scheme--main { --bg-ultra-light-text: var(--text-dark); --bg-light-text: var(--text-dark); --bg-dark-text: var(--text-light); --bg-ultra-dark-text: var(--text-light); --bg-ultra-light-heading: var(--text-dark); --bg-light-heading: var(--text-dark); --bg-dark-heading: var(--text-light); --bg-ultra-dark-heading: var(--text-light); } .color-scheme--alt { --bg-ultra-light-text: var(--text-dark); --bg-light-text: var(--text-dark); --bg-dark-text: var(--text-light); --bg-ultra-dark-text: var(--text-light); --bg-ultra-light-heading: var(--text-dark); --bg-light-heading: var(--text-dark); --bg-dark-heading: var(--text-light); --bg-ultra-dark-heading: var(--text-light); --bg-ultra-dark-text: var(--text-light); } :where(.bg--ultra-light), :where(.bg--ultra-light) :is(h1, h2, h3, h4, h5, h6) { color: var(--bg-ultra-light-text); } :where(.bg--light), :where(.bg--light) :is(h1, h2, h3, h4, h5, h6) { color: var(--bg-light-text); } :where(.bg--dark), :where(.bg--dark) :is(h1, h2, h3, h4, h5, h6) { color: var(--bg-dark-text); } :where(.bg--ultra-dark), :where(.bg--ultra-dark) :is(h1, h2, h3, h4, h5, h6) { color: var(--bg-ultra-dark-text); } .bg--ultra-light :where(h1, h2, h3, h4, h5, h6) { --heading-color: var(--bg-ultra-light-heading); --h1-color: var(--bg-ultra-light-heading); --h2-color: var(--bg-ultra-light-heading); --h3-color: var(--bg-ultra-light-heading); --h4-color: var(--bg-ultra-light-heading); --h5-color: var(--bg-ultra-light-heading); --h6-color: var(--bg-ultra-light-heading); color: var(--bg-ultra-light-heading); } .bg--light :where(h1, h2, h3, h4, h5, h6) { --heading-color: var(--bg-light-heading); --h1-color: var(--bg-light-heading); --h2-color: var(--bg-light-heading); --h3-color: var(--bg-light-heading); --h4-color: var(--bg-light-heading); --h5-color: var(--bg-light-heading); --h6-color: var(--bg-light-heading); color: var(--bg-light-heading); } .bg--dark :where(h1, h2, h3, h4, h5, h6) { --heading-color: var(--bg-dark-heading); --h1-color: var(--bg-dark-heading); --h2-color: var(--bg-dark-heading); --h3-color: var(--bg-dark-heading); --h4-color: var(--bg-dark-heading); --h5-color: var(--bg-dark-heading); --h6-color: var(--bg-dark-heading); color: var(--bg-dark-heading); } .bg--ultra-dark :where(h1, h2, h3, h4, h5, h6) { --heading-color: var(--bg-ultra-dark-heading); --h1-color: var(--bg-ultra-dark-heading); --h2-color: var(--bg-ultra-dark-heading); --h3-color: var(--bg-ultra-dark-heading); --h4-color: var(--bg-ultra-dark-heading); --h5-color: var(--bg-ultra-dark-heading); --h6-color: var(--bg-ultra-dark-heading); color: var(--bg-ultra-dark-heading); } .section--xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--none { padding-block: 0; padding-inline: var(--gutter); } @media (max-width: 1366px) { .section--xl-xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--xl-s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--xl-m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--xl-l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--xl-xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--xl-xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--xl-none { padding-inline: 0 var(--gutter); } } @media (max-width: 992px) { .section--l-xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--l-s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--l-m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--l-l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--l-xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--l-xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--l-none { padding-inline: 0 var(--gutter); } } @media (max-width: 768px) { .section--m-xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--m-s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--m-m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--m-l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--m-xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--m-xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--m-none { padding-inline: 0 var(--gutter); } } @media (max-width: 480px) { .section--s-xs { padding-block: var(--section-space-xs); padding-inline: var(--gutter); } .section--s-s { padding-block: var(--section-space-s); padding-inline: var(--gutter); } .section--s-m { padding-block: var(--section-space-m); padding-inline: var(--gutter); } .section--s-l { padding-block: var(--section-space-l); padding-inline: var(--gutter); } .section--s-xl { padding-block: var(--section-space-xl); padding-inline: var(--gutter); } .section--s-xxl { padding-block: var(--section-space-xxl); padding-inline: var(--gutter); } .section--s-none { padding-inline: 0 var(--gutter); } } .section__inner, .section__container, .acss__container { width: 100%; max-inline-size: var(--content-width); margin-inline: auto; } .card { --concentric-radius: calc(var(--radius) + var(--card-padding) / 2); --card-background: var(--light-card-background); --card-background-hover: var(--light-card-background-hover); --card-heading-color: var(--light-card-heading-color); --card-text-color: var(--light-card-text-color); --card-link-color: var(--light-card-link-color); --card-button-style: var(--light-card-button-style); --card-border-color: var(--light-card-border-color); display: var(--card-display, flex) !important; flex-direction: var(--card-flex-direction, column); position: relative; overflow: var(--card-overflow, clip); background-clip: padding-box; transition: var(--card-transition, var(--transition)); font-size: var(--card-text-size, var(--text-s)); border-width: var(--card-border-width, var(--border-width)); border-style: var(--card-border-style, var(--border-style)); border-color: var(--card-border-color, transparent); border-radius: var(--card-radius, var(--radius, 0)); padding: var(--card-padding, var(--space-m)); gap: var(--card-gap, var(--content-gap)); background: var(--card-background, var(--white)); color: var(--card-text-color, var(--text-dark)); line-height: var(--card-line-height, inherit); } .card:hover { background: var(--card-background-hover, var(--card-background)); } .card :where([class*="__media"]:not([class*="wrapper"])) { border-radius: var(--card-media-radius, var(--radius, 0)); aspect-ratio: var(--card-media-aspect-ratio, 16/9); object-fit: var(--card-media-object-fit, fill); overflow: clip; inline-size: 100%; } .card :where([class*="__media"]:not([class*="wrapper"])) img { object-fit: var(--card-media-object-fit, fill); } .card img[class*="__avatar"]:not([class*="wrapper"]), .card [class*="__avatar"] img { border-radius: var(--card-avatar-radius, 50vw); border-width: var(--card-avatar-border-width, 0); border-style: var(--card-avatar-border-style, solid); border-color: var(--card-avatar-border-color, transparent); inline-size: var(--card-avatar-size, 48px); block-size: var(--card-avatar-size, 48px); align-self: center; aspect-ratio: 1; object-fit: cover; overflow: clip; } .card img[class*="__avatar"]:not([class*="wrapper"]) img, .card [class*="__avatar"] img img { object-fit: cover; } .card :is(h1, h2, h3, h4, h5, h6) { font-size: var(--card-heading-size, var(--h3)); color: var(--card-heading-color, var(--text-dark)); } .card :where(a):where(:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, [class*="btn--"], [data-icon])) { color: var(--card-link-color, var(--primary)); } .card :where(a):where(:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, [class*="btn--"], [data-icon])):hover { color: var(--card-link-hover-color, var(--primary-hover)); } .card :where([class*="__icon"]) { --icon-radius: var(--card-icon-radius, var(--radius, 0)); --icon-size: var(--card-icon-size, 48px); } .card [class*="btn--"] { --btn-font-size: var(--card-button-font-size, var(--text-s)); } .card:where([class*="--alt"]) { --concentric-radius: calc(var(--radius) + var(--card-padding) / 2); --card-background: var(--dark-card-background); --card-background-hover: var(--dark-card-background-hover); --card-heading-color: var(--dark-card-heading-color); --card-text-color: var(--dark-card-text-color); --card-link-color: var(--dark-card-link-color); --card-link-color-hover: var(--dark-card-link-color-hover); --card-button-style: var(--dark-card-button-style); --card-border-color: var(--dark-card-border-color); } .card:where([class*="--alt"]) :where([class*="__icon"]) { --icon-radius: var(--card-icon-radius, var(--radius, 0)); --icon-size: var(--card-icon-size, 48px); --icon-color: var(--primary-light); --icon-color-hover: var(--primary-semi-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-semi-dark); --icon-border-color: var(--border-color-dark); --icon-border-color-hover: var(--border-color-dark); --icon-shadow: ; } .card:where([class*="--alt"]) :where([class*="__icon"]):is(svg, i, a) { display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(--icon-color, var(--neutral-dark)); font-size: var(--icon-size); height: var(--icon-height, var(--icon-size, 24px)); width: var(--icon-width, var(--icon-size, 24px)); transition: var(--icon-transition, var(--transition)); padding: var(--icon-padding, 12px); border-width: var(--icon-border-width, 0); border-style: var(--icon-border-style, solid); border-radius: var(--icon-radius, var(--radius)); background: var(--icon-background, var(--neutral-ultra-light)); border-color: var(--icon-border-color, transparent); box-shadow: var(--icon-shadow, none); } .card:where([class*="--alt"]) :where([class*="__icon"]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--alt"]) :where([class*="__icon"]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--alt"]) :where([class*="__icon"]) svg { color: var(--icon-color); } .card:where([class*="--alt"]) :where([class*="__icon"]):is(a):hover, .card:where([class*="--alt"]) :where([class*="__icon"]) [data-icon-hover]:hover, .card:where([class*="--alt"]) :where([class*="__icon"]) [data-icon-hover]:hover [data-icon] { --icon-background: var(--icon-background-hover); --icon-color: var(--icon-color-hover); --icon-border-color: var(--icon-border-color-hover); } .card:where([class*="--alt"]) :where([data-icon]) { --icon-color: var(--primary-light); --icon-color-hover: var(--primary-semi-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-semi-dark); --icon-border-color: var(--border-color-dark); --icon-border-color-hover: var(--border-color-dark); --icon-shadow: ; } .card:where([class*="--alt"]) :where([data-icon]):is(svg, i, a) { display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(--icon-color, var(--neutral-dark)); font-size: var(--icon-size); height: var(--icon-height, var(--icon-size, 24px)); width: var(--icon-width, var(--icon-size, 24px)); transition: var(--icon-transition, var(--transition)); padding: var(--icon-padding, 12px); border-width: var(--icon-border-width, 0); border-style: var(--icon-border-style, solid); border-radius: var(--icon-radius, var(--radius)); background: var(--icon-background, var(--neutral-ultra-light)); border-color: var(--icon-border-color, transparent); box-shadow: var(--icon-shadow, none); } .card:where([class*="--alt"]) :where([data-icon]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--alt"]) :where([data-icon]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--alt"]) :where([data-icon]) svg { color: var(--icon-color); } .card:where([class*="--alt"]) :where([data-icon]):is(a):hover, .card:where([class*="--alt"]) :where([data-icon]) [data-icon-hover]:hover, .card:where([class*="--alt"]) :where([data-icon]) [data-icon-hover]:hover [data-icon] { --icon-background: var(--icon-background-hover); --icon-color: var(--icon-color-hover); --icon-border-color: var(--icon-border-color-hover); } .card:where([class*="--alt"]) [class*="btn--"] { --btn-font-size: var(--card-button-font-size, var(--text-s)); } .card:where([class*="--light"]) { --concentric-radius: calc(var(--radius) + var(--card-padding) / 2); --card-background: var(--light-card-background); --card-background-hover: var(--light-card-background-hover); --card-heading-color: var(--light-card-heading-color); --card-text-color: var(--light-card-text-color); --card-link-color: var(--light-card-link-color); --card-button-style: var(--light-card-button-style); --card-border-color: var(--light-card-border-color); } .card:where([class*="--light"]) :where([class*="__icon"]) { --icon-radius: var(--card-icon-radius, var(--radius, 0)); --icon-size: var(--card-icon-size, 48px); --icon-color: var(--primary-dark); --icon-color-hover: var(--primary-semi-dark); --icon-background: var(--primary-ultra-light); --icon-background-hover: var(--primary-light); --icon-border-color: var(--border-color-light); --icon-border-color-hover: var(--border-color-light); --icon-shadow: ; } .card:where([class*="--light"]) :where([class*="__icon"]):is(svg, i, a) { display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(--icon-color, var(--neutral-dark)); font-size: var(--icon-size); height: var(--icon-height, var(--icon-size, 24px)); width: var(--icon-width, var(--icon-size, 24px)); transition: var(--icon-transition, var(--transition)); padding: var(--icon-padding, 12px); border-width: var(--icon-border-width, 0); border-style: var(--icon-border-style, solid); border-radius: var(--icon-radius, var(--radius)); background: var(--icon-background, var(--neutral-ultra-light)); border-color: var(--icon-border-color, transparent); box-shadow: var(--icon-shadow, none); } .card:where([class*="--light"]) :where([class*="__icon"]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--light"]) :where([class*="__icon"]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--light"]) :where([class*="__icon"]) svg { color: var(--icon-color); } .card:where([class*="--light"]) :where([class*="__icon"]):is(a):hover, .card:where([class*="--light"]) :where([class*="__icon"]) [data-icon-hover]:hover, .card:where([class*="--light"]) :where([class*="__icon"]) [data-icon-hover]:hover [data-icon] { --icon-background: var(--icon-background-hover); --icon-color: var(--icon-color-hover); --icon-border-color: var(--icon-border-color-hover); } .card:where([class*="--light"]) :where([data-icon]) { --icon-color: var(--primary-dark); --icon-color-hover: var(--primary-semi-dark); --icon-background: var(--primary-ultra-light); --icon-background-hover: var(--primary-light); --icon-border-color: var(--border-color-light); --icon-border-color-hover: var(--border-color-light); --icon-shadow: ; } .card:where([class*="--light"]) :where([data-icon]):is(svg, i, a) { display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(--icon-color, var(--neutral-dark)); font-size: var(--icon-size); height: var(--icon-height, var(--icon-size, 24px)); width: var(--icon-width, var(--icon-size, 24px)); transition: var(--icon-transition, var(--transition)); padding: var(--icon-padding, 12px); border-width: var(--icon-border-width, 0); border-style: var(--icon-border-style, solid); border-radius: var(--icon-radius, var(--radius)); background: var(--icon-background, var(--neutral-ultra-light)); border-color: var(--icon-border-color, transparent); box-shadow: var(--icon-shadow, none); } .card:where([class*="--light"]) :where([data-icon]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--light"]) :where([data-icon]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--light"]) :where([data-icon]) svg { color: var(--icon-color); } .card:where([class*="--light"]) :where([data-icon]):is(a):hover, .card:where([class*="--light"]) :where([data-icon]) [data-icon-hover]:hover, .card:where([class*="--light"]) :where([data-icon]) [data-icon-hover]:hover [data-icon] { --icon-background: var(--icon-background-hover); --icon-color: var(--icon-color-hover); --icon-border-color: var(--icon-border-color-hover); } .card:where([class*="--light"]) [class*="btn--"] { --btn-font-size: var(--card-button-font-size, var(--text-s)); } .card:where([class*="--dark"]) { --concentric-radius: calc(var(--radius) + var(--card-padding) / 2); --card-background: var(--dark-card-background); --card-background-hover: var(--dark-card-background-hover); --card-heading-color: var(--dark-card-heading-color); --card-text-color: var(--dark-card-text-color); --card-link-color: var(--dark-card-link-color); --card-link-color-hover: var(--dark-card-link-color-hover); --card-button-style: var(--dark-card-button-style); --card-border-color: var(--dark-card-border-color); } .card:where([class*="--dark"]) :where([class*="__icon"]) { --icon-radius: var(--card-icon-radius, var(--radius, 0)); --icon-size: var(--card-icon-size, 48px); --icon-color: var(--primary-light); --icon-color-hover: var(--primary-semi-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-semi-dark); --icon-border-color: var(--border-color-dark); --icon-border-color-hover: var(--border-color-dark); --icon-shadow: ; } .card:where([class*="--dark"]) :where([class*="__icon"]):is(svg, i, a) { display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(--icon-color, var(--neutral-dark)); font-size: var(--icon-size); height: var(--icon-height, var(--icon-size, 24px)); width: var(--icon-width, var(--icon-size, 24px)); transition: var(--icon-transition, var(--transition)); padding: var(--icon-padding, 12px); border-width: var(--icon-border-width, 0); border-style: var(--icon-border-style, solid); border-radius: var(--icon-radius, var(--radius)); background: var(--icon-background, var(--neutral-ultra-light)); border-color: var(--icon-border-color, transparent); box-shadow: var(--icon-shadow, none); } .card:where([class*="--dark"]) :where([class*="__icon"]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--dark"]) :where([class*="__icon"]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--dark"]) :where([class*="__icon"]) svg { color: var(--icon-color); } .card:where([class*="--dark"]) :where([class*="__icon"]):is(a):hover, .card:where([class*="--dark"]) :where([class*="__icon"]) [data-icon-hover]:hover, .card:where([class*="--dark"]) :where([class*="__icon"]) [data-icon-hover]:hover [data-icon] { --icon-background: var(--icon-background-hover); --icon-color: var(--icon-color-hover); --icon-border-color: var(--icon-border-color-hover); } .card:where([class*="--dark"]) :where([data-icon]) { --icon-color: var(--primary-light); --icon-color-hover: var(--primary-semi-light); --icon-background: var(--primary-dark); --icon-background-hover: var(--primary-semi-dark); --icon-border-color: var(--border-color-dark); --icon-border-color-hover: var(--border-color-dark); --icon-shadow: ; } .card:where([class*="--dark"]) :where([data-icon]):is(svg, i, a) { display: flex; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: content-box; color: var(--icon-color, var(--neutral-dark)); font-size: var(--icon-size); height: var(--icon-height, var(--icon-size, 24px)); width: var(--icon-width, var(--icon-size, 24px)); transition: var(--icon-transition, var(--transition)); padding: var(--icon-padding, 12px); border-width: var(--icon-border-width, 0); border-style: var(--icon-border-style, solid); border-radius: var(--icon-radius, var(--radius)); background: var(--icon-background, var(--neutral-ultra-light)); border-color: var(--icon-border-color, transparent); box-shadow: var(--icon-shadow, none); } .card:where([class*="--dark"]) :where([data-icon]):is(i)::before { width: 100%; height: 100%; text-align: center; font-size: var(--icon-size); } .card:where([class*="--dark"]) :where([data-icon]).brxe-icon { font-size: var(--icon-size); } .card:where([class*="--dark"]) :where([data-icon]) svg { color: var(--icon-color); } .card:where([class*="--dark"]) :where([data-icon]):is(a):hover, .card:where([class*="--dark"]) :where([data-icon]) [data-icon-hover]:hover, .card:where([class*="--dark"]) :where([data-icon]) [data-icon-hover]:hover [data-icon] { --icon-background: var(--icon-background-hover); --icon-color: var(--icon-color-hover); --icon-border-color: var(--icon-border-color-hover); } .card:where([class*="--dark"]) [class*="btn--"] { --btn-font-size: var(--card-button-font-size, var(--text-s)); } figure[class*="overlay--"]::before { z-index: 0; } :is(.text--xxl, .text--xl, .text--l, .text--m, .text--s, .text--xs), :is(.text--xxl, .text--xl, .text--l, .text--m, .text--s, .text--xs) > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-family: var(--text-font-family); line-height: var(--text-line-height); text-wrap: var(--text-text-wrap); } .text--xxl, .text--xxl > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-xxl); line-height: var(--text-xxl-line-height); } .text--xxl:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-xxl-max-width); } .text--xl, .text--xl > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-xl); line-height: var(--text-xl-line-height); } .text--xl:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-xl-max-width); } .text--l, .text--l > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-l); line-height: var(--text-l-line-height); } .text--l:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-l-max-width); } .text--m, .text--m > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-m); line-height: var(--text-m-line-height); } .text--m:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-m-max-width); } .text--s, .text--s > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-s); line-height: var(--text-s-line-height); } .text--s:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-s-max-width); } .text--xs, .text--xs > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { font-size: var(--text-xs); line-height: var(--text-xs-line-height); } .text--xs:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) { max-width: var(--text-xs-max-width); } .h1.h1, .h--1.h--1 { font-size: var(--h1); line-height: var(--h1-line-height); max-width: var(--h1-max-width); } .h2.h2, .h--2.h--2 { font-size: var(--h2); line-height: var(--h2-line-height); max-width: var(--h2-max-width); } .h3.h3, .h--3.h--3 { font-size: var(--h3); font-family: var(--h3-font-family); line-height: var(--h3-line-height); max-width: var(--h3-max-width); } .h4.h4, .h--4.h--4 { font-size: var(--h4); line-height: var(--h4-line-height); max-width: var(--h4-max-width); } .h5.h5, .h--5.h--5 { font-size: var(--h5); line-height: var(--h5-line-height); max-width: var(--h5-max-width); } .h6.h6, .h--6.h--6 { font-size: var(--h6); line-height: var(--h6-line-height); max-width: var(--h6-max-width); } .text--100 { font-weight: 100; } .text--200 { font-weight: 200; } .text--300 { font-weight: 300; } .text--400 { font-weight: 400; } .text--500 { font-weight: 500; } .text--600 { font-weight: 600; } .text--700 { font-weight: 700; } .text--800 { font-weight: 800; } .text--900 { font-weight: 900; } .text--bold { font-weight: bold; } .text--italic { font-style: italic; } .text--oblique { font-style: oblique; } .text--decoration-none { -webkit-text-decoration: none; text-decoration: none; } .text--underline { -webkit-text-decoration: underline; text-decoration: underline; } .text--underline-wavy { -webkit-text-decoration: underline wavy; text-decoration: underline wavy; } .text--underline-dotted { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } .text--underline-double { -webkit-text-decoration: underline double; text-decoration: underline double; } .text--underline-dashed { -webkit-text-decoration: underline dashed; text-decoration: underline dashed; } .text--overline { -webkit-text-decoration: overline; text-decoration: overline; } .text--line-through { -webkit-text-decoration: line-through; text-decoration: line-through; } .text--transform-none { text-transform: none; } .text--uppercase { text-transform: uppercase; } .text--lowercase { text-transform: lowercase; } .text--capitalize { text-transform: capitalize; } .text--left { text-align: left; } .text--center { text-align: center; } .text--right { text-align: right; } .text--justify { text-align: justify; } blockquote { text-wrap: pretty; } .balance, .text--balance { text-wrap: balance; } .balance p, .balance li, .balance blockquote, .balance h1, .balance h2, .balance h3, .balance h4, .balance h5, .balance h6, .text--balance p, .text--balance li, .text--balance blockquote, .text--balance h1, .text--balance h2, .text--balance h3, .text--balance h4, .text--balance h5, .text--balance h6 { text-wrap: balance; } .text--pretty { text-wrap: pretty; } .text--pretty p, .text--pretty li, .text--pretty blockquote, .text--pretty h1, .text--pretty h2, .text--pretty h3, .text--pretty h4, .text--pretty h5, .text--pretty h6 { text-wrap: pretty; } .unbalance { text-wrap: wrap; } .unbalance p, .unbalance li, .unbalance blockquote, .unbalance h1, .unbalance h2, .unbalance h3, .unbalance h4, .unbalance h5, .unbalance h6 { text-wrap: wrap; } [class*="line-clamp--"] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-count); } .line-clamp--1 { --line-count: 1; } .line-clamp--2 { --line-count: 2; } .line-clamp--3 { --line-count: 3; } .line-clamp--4 { --line-count: 4; } .line-clamp--5 { --line-count: 5; } @media (min-width: 1367px) { .breakout--s { inline-size: 60vw !important; max-inline-size: 60vw !important; margin: 0 calc(-30vw + 50%) !important; } .breakout--m { inline-size: 70vw !important; max-inline-size: 70vw !important; margin: 0 calc(-35vw + 50%) !important; } .breakout--l { inline-size: 80vw !important; max-inline-size: 80vw !important; margin: 0 calc(-40vw + 50%) !important; } .breakout--xl { inline-size: 90vw !important; max-inline-size: 90vw !important; margin: 0 calc(-45vw + 50%) !important; } } .breakout--full { inline-size: 100vw !important; max-inline-size: 100vw !important; margin-inline: calc(-50vw + 50%) !important; align-self: flex-start; } @media (max-width: 1366px) { [class*="breakout--"]:not(.breakout--full) { inline-size: 100% !important; max-inline-size: 100% !important; margin: 0 !important; } } [class*="center--"]:where(:not([class*="self"]))[class*="center--"]:where(:not([class*="self"])) { display: flex; flex-direction: column; align-items: var(--align-items, initial); align-content: var(--align-content, initial); justify-items: var(--justify-items, initial); justify-content: var(--justify-content, initial); text-align: var(--text-align, inherit); } .center--all.center--all { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y.center--y { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x.center--x { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left.center--left { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right.center--right { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top.center--top { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom.center--bottom { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } @media (max-width: 1366px) { .center--all-xl.center--all-xl { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y-xl.center--y-xl { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x-xl.center--x-xl { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left-xl.center--left-xl { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right-xl.center--right-xl { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top-xl.center--top-xl { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom-xl.center--bottom-xl { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } } @media (max-width: 992px) { .center--all-l.center--all-l { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y-l.center--y-l { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x-l.center--x-l { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left-l.center--left-l { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right-l.center--right-l { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top-l.center--top-l { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom-l.center--bottom-l { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } } @media (max-width: 768px) { .center--all-m.center--all-m { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y-m.center--y-m { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x-m.center--x-m { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left-m.center--left-m { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right-m.center--right-m { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top-m.center--top-m { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom-m.center--bottom-m { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } } @media (max-width: 480px) { .center--all-s.center--all-s { --align-items: center; --align-content: center; --justify-items: center; --justify-content: center; --text-align: center; } .center--y-s.center--y-s { --align-items: flex-start; --justify-items: center; --justify-content: center; } .center--x-s.center--x-s { --align-items: center; --justify-items: flex-start; --justify-content: flex-start; } .center--left-s.center--left-s { --align-items: flex-start; --align-content: flex-start; --justify-items: center; --justify-content: center; --text-align: left; } .center--right-s.center--right-s { --align-items: flex-end; --align-content: flex-end; --justify-items: center; --justify-content: center; --text-align: right; } .center--top-s.center--top-s { --align-items: center; --align-content: center; --justify-items: flex-start; --justify-content: flex-start; } .center--bottom-s.center--bottom-s { --align-items: center; --justify-items: flex-end; --justify-content: flex-end; } } .center--self.center--self { margin-left: auto; margin-right: auto; } .variable-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, calc(var(--content-width) / 2 - var(--space-xxl))), 100%), 1fr)); grid-template-rows: var(--grid-1); gap: var(--gap, var(--grid-gap)); } .grid--1 { display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)); inline-size: 100%; } .grid--1 > * { grid-column: 1 !important; } .grid--2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; } .grid--3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 100%; } .grid--4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: 100%; } .grid--5 { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); inline-size: 100%; } .grid--6 { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); inline-size: 100%; } .grid--7 { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); inline-size: 100%; } .grid--8 { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)); inline-size: 100%; } .grid--9 { display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)); inline-size: 100%; } .grid--10 { display: grid !important; grid-template-columns: repeat(10, minmax(0, 1fr)); inline-size: 100%; } .grid--11 { display: grid !important; grid-template-columns: repeat(11, minmax(0, 1fr)); inline-size: 100%; } .grid--12 { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); inline-size: 100%; } .grid--1-2 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); inline-size: 100%; } .grid--1-3 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); inline-size: 100%; } .grid--2-1 { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); inline-size: 100%; } .grid--2-3 { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); inline-size: 100%; } .grid--3-1 { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); inline-size: 100%; } .grid--3-2 { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); inline-size: 100%; } .grid-rows--1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } @media (max-width: 1366px) { .grid--xl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid--xl-1 > * { grid-column: 1 !important; } .grid--xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--xl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--xl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--xl-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid--xl-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid--xl-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid--xl-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid--xl-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid--xl-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows--xl-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--xl-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--xl-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--xl-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--xl-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--xl-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--xl-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--xl-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--xl-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--xl-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--xl-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--xl-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } } @media (max-width: 992px) { .grid--l-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid--l-1 > * { grid-column: 1 !important; } .grid--l-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--l-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--l-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--l-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--l-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--l-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid--l-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid--l-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid--l-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid--l-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid--l-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows--l-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--l-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--l-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--l-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--l-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--l-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--l-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--l-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--l-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--l-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--l-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--l-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } } @media (max-width: 768px) { .grid--m-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid--m-1 > * { grid-column: 1 !important; } .grid--m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--m-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--m-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--m-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--m-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid--m-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid--m-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid--m-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid--m-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid--m-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows--m-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--m-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--m-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--m-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--m-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--m-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--m-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--m-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--m-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--m-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--m-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--m-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } } @media (max-width: 480px) { .grid--s-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid--s-1 > * { grid-column: 1 !important; } .grid--s-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--s-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--s-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--s-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--s-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--s-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid--s-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid--s-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid--s-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid--s-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid--s-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows--s-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows--s-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows--s-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows--s-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows--s-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows--s-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows--s-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows--s-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows--s-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows--s-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows--s-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows--s-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } } @media (min-width: 1367px) { .grid--alternate-xl > .grid--2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--1-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--alternate-xl > .grid--1-2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--1-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--alternate-xl > .grid--1-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--2-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--alternate-xl > .grid--2-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--2-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--alternate-xl > .grid--2-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--3-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--alternate-xl > .grid--3-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-xl > .grid--3-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--alternate-xl > .grid--3-2:nth-of-type(even) > *:last-child { order: -1; } } @media (min-width: 993px) { .grid--alternate-l > .grid--2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--1-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--alternate-l > .grid--1-2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--1-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--alternate-l > .grid--1-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--2-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--alternate-l > .grid--2-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--2-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--alternate-l > .grid--2-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--3-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--alternate-l > .grid--3-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-l > .grid--3-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--alternate-l > .grid--3-2:nth-of-type(even) > *:last-child { order: -1; } } @media (min-width: 769px) { .grid--alternate-m > .grid--2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--1-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--alternate-m > .grid--1-2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--1-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--alternate-m > .grid--1-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--2-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--alternate-m > .grid--2-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--2-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--alternate-m > .grid--2-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--3-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--alternate-m > .grid--3-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-m > .grid--3-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--alternate-m > .grid--3-2:nth-of-type(even) > *:last-child { order: -1; } } @media (min-width: 481px) { .grid--alternate-s > .grid--2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--1-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--alternate-s > .grid--1-2:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--1-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--alternate-s > .grid--1-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--2-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--alternate-s > .grid--2-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--2-3:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--alternate-s > .grid--2-3:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--3-1:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--alternate-s > .grid--3-1:nth-of-type(even) > *:last-child { order: -1; } .grid--alternate-s > .grid--3-2:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--alternate-s > .grid--3-2:nth-of-type(even) > *:last-child { order: -1; } } .row-span--1 { grid-row-end: span 1; } .col-span--1 { grid-column-end: span 1; } .row-start--1 { grid-row-start: 1; } .row-end--1 { grid-row-end: 1; } .col-start--1 { grid-column-start: 1; } .col-end--1 { grid-column-end: 1; } .row-span--2 { grid-row-end: span 2; } .col-span--2 { grid-column-end: span 2; } .row-start--2 { grid-row-start: 2; } .row-end--2 { grid-row-end: 2; } .col-start--2 { grid-column-start: 2; } .col-end--2 { grid-column-end: 2; } .row-span--3 { grid-row-end: span 3; } .col-span--3 { grid-column-end: span 3; } .row-start--3 { grid-row-start: 3; } .row-end--3 { grid-row-end: 3; } .col-start--3 { grid-column-start: 3; } .col-end--3 { grid-column-end: 3; } .row-span--4 { grid-row-end: span 4; } .col-span--4 { grid-column-end: span 4; } .row-start--4 { grid-row-start: 4; } .row-end--4 { grid-row-end: 4; } .col-start--4 { grid-column-start: 4; } .col-end--4 { grid-column-end: 4; } .row-span--5 { grid-row-end: span 5; } .col-span--5 { grid-column-end: span 5; } .row-start--5 { grid-row-start: 5; } .row-end--5 { grid-row-end: 5; } .col-start--5 { grid-column-start: 5; } .col-end--5 { grid-column-end: 5; } .row-span--6 { grid-row-end: span 6; } .col-span--6 { grid-column-end: span 6; } .row-start--6 { grid-row-start: 6; } .row-end--6 { grid-row-end: 6; } .col-start--6 { grid-column-start: 6; } .col-end--6 { grid-column-end: 6; } .row-span--7 { grid-row-end: span 7; } .col-span--7 { grid-column-end: span 7; } .row-start--7 { grid-row-start: 7; } .row-end--7 { grid-row-end: 7; } .col-start--7 { grid-column-start: 7; } .col-end--7 { grid-column-end: 7; } .row-span--8 { grid-row-end: span 8; } .col-span--8 { grid-column-end: span 8; } .row-start--8 { grid-row-start: 8; } .row-end--8 { grid-row-end: 8; } .col-start--8 { grid-column-start: 8; } .col-end--8 { grid-column-end: 8; } .row-span--9 { grid-row-end: span 9; } .col-span--9 { grid-column-end: span 9; } .row-start--9 { grid-row-start: 9; } .row-end--9 { grid-row-end: 9; } .col-start--9 { grid-column-start: 9; } .col-end--9 { grid-column-end: 9; } .row-span--10 { grid-row-end: span 10; } .col-span--10 { grid-column-end: span 10; } .row-start--10 { grid-row-start: 10; } .row-end--10 { grid-row-end: 10; } .col-start--10 { grid-column-start: 10; } .col-end--10 { grid-column-end: 10; } .row-span--11 { grid-row-end: span 11; } .col-span--11 { grid-column-end: span 11; } .row-start--11 { grid-row-start: 11; } .row-end--11 { grid-row-end: 11; } .col-start--11 { grid-column-start: 11; } .col-end--11 { grid-column-end: 11; } .row-span--12 { grid-row-end: span 12; } .col-span--12 { grid-column-end: span 12; } .row-start--12 { grid-row-start: 12; } .row-end--12 { grid-row-end: 12; } .col-start--12 { grid-column-start: 12; } .col-end--12 { grid-column-end: 12; } @media (max-width: 1366px) { .row-span--xl-1 { grid-row: span 1; } .col-span--xl-1 { grid-column: span 1; } .row-start--xl-1 { grid-row-start: 1; } .row-end--xl-1 { grid-row-end: 1; } .col-start--xl-1 { grid-column-start: 1; } .col-end--xl-1 { grid-column-end: 1; } .row-span--xl-2 { grid-row: span 2; } .col-span--xl-2 { grid-column: span 2; } .row-start--xl-2 { grid-row-start: 2; } .row-end--xl-2 { grid-row-end: 2; } .col-start--xl-2 { grid-column-start: 2; } .col-end--xl-2 { grid-column-end: 2; } .row-span--xl-3 { grid-row: span 3; } .col-span--xl-3 { grid-column: span 3; } .row-start--xl-3 { grid-row-start: 3; } .row-end--xl-3 { grid-row-end: 3; } .col-start--xl-3 { grid-column-start: 3; } .col-end--xl-3 { grid-column-end: 3; } .row-span--xl-4 { grid-row: span 4; } .col-span--xl-4 { grid-column: span 4; } .row-start--xl-4 { grid-row-start: 4; } .row-end--xl-4 { grid-row-end: 4; } .col-start--xl-4 { grid-column-start: 4; } .col-end--xl-4 { grid-column-end: 4; } .row-span--xl-5 { grid-row: span 5; } .col-span--xl-5 { grid-column: span 5; } .row-start--xl-5 { grid-row-start: 5; } .row-end--xl-5 { grid-row-end: 5; } .col-start--xl-5 { grid-column-start: 5; } .col-end--xl-5 { grid-column-end: 5; } .row-span--xl-6 { grid-row: span 6; } .col-span--xl-6 { grid-column: span 6; } .row-start--xl-6 { grid-row-start: 6; } .row-end--xl-6 { grid-row-end: 6; } .col-start--xl-6 { grid-column-start: 6; } .col-end--xl-6 { grid-column-end: 6; } .row-span--xl-7 { grid-row: span 7; } .col-span--xl-7 { grid-column: span 7; } .row-start--xl-7 { grid-row-start: 7; } .row-end--xl-7 { grid-row-end: 7; } .col-start--xl-7 { grid-column-start: 7; } .col-end--xl-7 { grid-column-end: 7; } .row-span--xl-8 { grid-row: span 8; } .col-span--xl-8 { grid-column: span 8; } .row-start--xl-8 { grid-row-start: 8; } .row-end--xl-8 { grid-row-end: 8; } .col-start--xl-8 { grid-column-start: 8; } .col-end--xl-8 { grid-column-end: 8; } .row-span--xl-9 { grid-row: span 9; } .col-span--xl-9 { grid-column: span 9; } .row-start--xl-9 { grid-row-start: 9; } .row-end--xl-9 { grid-row-end: 9; } .col-start--xl-9 { grid-column-start: 9; } .col-end--xl-9 { grid-column-end: 9; } .row-span--xl-10 { grid-row: span 10; } .col-span--xl-10 { grid-column: span 10; } .row-start--xl-10 { grid-row-start: 10; } .row-end--xl-10 { grid-row-end: 10; } .col-start--xl-10 { grid-column-start: 10; } .col-end--xl-10 { grid-column-end: 10; } .row-span--xl-11 { grid-row: span 11; } .col-span--xl-11 { grid-column: span 11; } .row-start--xl-11 { grid-row-start: 11; } .row-end--xl-11 { grid-row-end: 11; } .col-start--xl-11 { grid-column-start: 11; } .col-end--xl-11 { grid-column-end: 11; } .row-span--xl-12 { grid-row: span 12; } .col-span--xl-12 { grid-column: span 12; } .row-start--xl-12 { grid-row-start: 12; } .row-end--xl-12 { grid-row-end: 12; } .col-start--xl-12 { grid-column-start: 12; } .col-end--xl-12 { grid-column-end: 12; } } @media (max-width: 992px) { .row-span--l-1 { grid-row: span 1; } .col-span--l-1 { grid-column: span 1; } .row-start--l-1 { grid-row-start: 1; } .row-end--l-1 { grid-row-end: 1; } .col-start--l-1 { grid-column-start: 1; } .col-end--l-1 { grid-column-end: 1; } .row-span--l-2 { grid-row: span 2; } .col-span--l-2 { grid-column: span 2; } .row-start--l-2 { grid-row-start: 2; } .row-end--l-2 { grid-row-end: 2; } .col-start--l-2 { grid-column-start: 2; } .col-end--l-2 { grid-column-end: 2; } .row-span--l-3 { grid-row: span 3; } .col-span--l-3 { grid-column: span 3; } .row-start--l-3 { grid-row-start: 3; } .row-end--l-3 { grid-row-end: 3; } .col-start--l-3 { grid-column-start: 3; } .col-end--l-3 { grid-column-end: 3; } .row-span--l-4 { grid-row: span 4; } .col-span--l-4 { grid-column: span 4; } .row-start--l-4 { grid-row-start: 4; } .row-end--l-4 { grid-row-end: 4; } .col-start--l-4 { grid-column-start: 4; } .col-end--l-4 { grid-column-end: 4; } .row-span--l-5 { grid-row: span 5; } .col-span--l-5 { grid-column: span 5; } .row-start--l-5 { grid-row-start: 5; } .row-end--l-5 { grid-row-end: 5; } .col-start--l-5 { grid-column-start: 5; } .col-end--l-5 { grid-column-end: 5; } .row-span--l-6 { grid-row: span 6; } .col-span--l-6 { grid-column: span 6; } .row-start--l-6 { grid-row-start: 6; } .row-end--l-6 { grid-row-end: 6; } .col-start--l-6 { grid-column-start: 6; } .col-end--l-6 { grid-column-end: 6; } .row-span--l-7 { grid-row: span 7; } .col-span--l-7 { grid-column: span 7; } .row-start--l-7 { grid-row-start: 7; } .row-end--l-7 { grid-row-end: 7; } .col-start--l-7 { grid-column-start: 7; } .col-end--l-7 { grid-column-end: 7; } .row-span--l-8 { grid-row: span 8; } .col-span--l-8 { grid-column: span 8; } .row-start--l-8 { grid-row-start: 8; } .row-end--l-8 { grid-row-end: 8; } .col-start--l-8 { grid-column-start: 8; } .col-end--l-8 { grid-column-end: 8; } .row-span--l-9 { grid-row: span 9; } .col-span--l-9 { grid-column: span 9; } .row-start--l-9 { grid-row-start: 9; } .row-end--l-9 { grid-row-end: 9; } .col-start--l-9 { grid-column-start: 9; } .col-end--l-9 { grid-column-end: 9; } .row-span--l-10 { grid-row: span 10; } .col-span--l-10 { grid-column: span 10; } .row-start--l-10 { grid-row-start: 10; } .row-end--l-10 { grid-row-end: 10; } .col-start--l-10 { grid-column-start: 10; } .col-end--l-10 { grid-column-end: 10; } .row-span--l-11 { grid-row: span 11; } .col-span--l-11 { grid-column: span 11; } .row-start--l-11 { grid-row-start: 11; } .row-end--l-11 { grid-row-end: 11; } .col-start--l-11 { grid-column-start: 11; } .col-end--l-11 { grid-column-end: 11; } .row-span--l-12 { grid-row: span 12; } .col-span--l-12 { grid-column: span 12; } .row-start--l-12 { grid-row-start: 12; } .row-end--l-12 { grid-row-end: 12; } .col-start--l-12 { grid-column-start: 12; } .col-end--l-12 { grid-column-end: 12; } } @media (max-width: 768px) { .row-span--m-1 { grid-row: span 1; } .col-span--m-1 { grid-column: span 1; } .row-start--m-1 { grid-row-start: 1; } .row-end--m-1 { grid-row-end: 1; } .col-start--m-1 { grid-column-start: 1; } .col-end--m-1 { grid-column-end: 1; } .row-span--m-2 { grid-row: span 2; } .col-span--m-2 { grid-column: span 2; } .row-start--m-2 { grid-row-start: 2; } .row-end--m-2 { grid-row-end: 2; } .col-start--m-2 { grid-column-start: 2; } .col-end--m-2 { grid-column-end: 2; } .row-span--m-3 { grid-row: span 3; } .col-span--m-3 { grid-column: span 3; } .row-start--m-3 { grid-row-start: 3; } .row-end--m-3 { grid-row-end: 3; } .col-start--m-3 { grid-column-start: 3; } .col-end--m-3 { grid-column-end: 3; } .row-span--m-4 { grid-row: span 4; } .col-span--m-4 { grid-column: span 4; } .row-start--m-4 { grid-row-start: 4; } .row-end--m-4 { grid-row-end: 4; } .col-start--m-4 { grid-column-start: 4; } .col-end--m-4 { grid-column-end: 4; } .row-span--m-5 { grid-row: span 5; } .col-span--m-5 { grid-column: span 5; } .row-start--m-5 { grid-row-start: 5; } .row-end--m-5 { grid-row-end: 5; } .col-start--m-5 { grid-column-start: 5; } .col-end--m-5 { grid-column-end: 5; } .row-span--m-6 { grid-row: span 6; } .col-span--m-6 { grid-column: span 6; } .row-start--m-6 { grid-row-start: 6; } .row-end--m-6 { grid-row-end: 6; } .col-start--m-6 { grid-column-start: 6; } .col-end--m-6 { grid-column-end: 6; } .row-span--m-7 { grid-row: span 7; } .col-span--m-7 { grid-column: span 7; } .row-start--m-7 { grid-row-start: 7; } .row-end--m-7 { grid-row-end: 7; } .col-start--m-7 { grid-column-start: 7; } .col-end--m-7 { grid-column-end: 7; } .row-span--m-8 { grid-row: span 8; } .col-span--m-8 { grid-column: span 8; } .row-start--m-8 { grid-row-start: 8; } .row-end--m-8 { grid-row-end: 8; } .col-start--m-8 { grid-column-start: 8; } .col-end--m-8 { grid-column-end: 8; } .row-span--m-9 { grid-row: span 9; } .col-span--m-9 { grid-column: span 9; } .row-start--m-9 { grid-row-start: 9; } .row-end--m-9 { grid-row-end: 9; } .col-start--m-9 { grid-column-start: 9; } .col-end--m-9 { grid-column-end: 9; } .row-span--m-10 { grid-row: span 10; } .col-span--m-10 { grid-column: span 10; } .row-start--m-10 { grid-row-start: 10; } .row-end--m-10 { grid-row-end: 10; } .col-start--m-10 { grid-column-start: 10; } .col-end--m-10 { grid-column-end: 10; } .row-span--m-11 { grid-row: span 11; } .col-span--m-11 { grid-column: span 11; } .row-start--m-11 { grid-row-start: 11; } .row-end--m-11 { grid-row-end: 11; } .col-start--m-11 { grid-column-start: 11; } .col-end--m-11 { grid-column-end: 11; } .row-span--m-12 { grid-row: span 12; } .col-span--m-12 { grid-column: span 12; } .row-start--m-12 { grid-row-start: 12; } .row-end--m-12 { grid-row-end: 12; } .col-start--m-12 { grid-column-start: 12; } .col-end--m-12 { grid-column-end: 12; } } @media (max-width: 480px) { .row-span--s-1 { grid-row: span 1; } .col-span--s-1 { grid-column: span 1; } .row-start--s-1 { grid-row-start: 1; } .row-end--s-1 { grid-row-end: 1; } .col-start--s-1 { grid-column-start: 1; } .col-end--s-1 { grid-column-end: 1; } .row-span--s-2 { grid-row: span 2; } .col-span--s-2 { grid-column: span 2; } .row-start--s-2 { grid-row-start: 2; } .row-end--s-2 { grid-row-end: 2; } .col-start--s-2 { grid-column-start: 2; } .col-end--s-2 { grid-column-end: 2; } .row-span--s-3 { grid-row: span 3; } .col-span--s-3 { grid-column: span 3; } .row-start--s-3 { grid-row-start: 3; } .row-end--s-3 { grid-row-end: 3; } .col-start--s-3 { grid-column-start: 3; } .col-end--s-3 { grid-column-end: 3; } .row-span--s-4 { grid-row: span 4; } .col-span--s-4 { grid-column: span 4; } .row-start--s-4 { grid-row-start: 4; } .row-end--s-4 { grid-row-end: 4; } .col-start--s-4 { grid-column-start: 4; } .col-end--s-4 { grid-column-end: 4; } .row-span--s-5 { grid-row: span 5; } .col-span--s-5 { grid-column: span 5; } .row-start--s-5 { grid-row-start: 5; } .row-end--s-5 { grid-row-end: 5; } .col-start--s-5 { grid-column-start: 5; } .col-end--s-5 { grid-column-end: 5; } .row-span--s-6 { grid-row: span 6; } .col-span--s-6 { grid-column: span 6; } .row-start--s-6 { grid-row-start: 6; } .row-end--s-6 { grid-row-end: 6; } .col-start--s-6 { grid-column-start: 6; } .col-end--s-6 { grid-column-end: 6; } .row-span--s-7 { grid-row: span 7; } .col-span--s-7 { grid-column: span 7; } .row-start--s-7 { grid-row-start: 7; } .row-end--s-7 { grid-row-end: 7; } .col-start--s-7 { grid-column-start: 7; } .col-end--s-7 { grid-column-end: 7; } .row-span--s-8 { grid-row: span 8; } .col-span--s-8 { grid-column: span 8; } .row-start--s-8 { grid-row-start: 8; } .row-end--s-8 { grid-row-end: 8; } .col-start--s-8 { grid-column-start: 8; } .col-end--s-8 { grid-column-end: 8; } .row-span--s-9 { grid-row: span 9; } .col-span--s-9 { grid-column: span 9; } .row-start--s-9 { grid-row-start: 9; } .row-end--s-9 { grid-row-end: 9; } .col-start--s-9 { grid-column-start: 9; } .col-end--s-9 { grid-column-end: 9; } .row-span--s-10 { grid-row: span 10; } .col-span--s-10 { grid-column: span 10; } .row-start--s-10 { grid-row-start: 10; } .row-end--s-10 { grid-row-end: 10; } .col-start--s-10 { grid-column-start: 10; } .col-end--s-10 { grid-column-end: 10; } .row-span--s-11 { grid-row: span 11; } .col-span--s-11 { grid-column: span 11; } .row-start--s-11 { grid-row-start: 11; } .row-end--s-11 { grid-row-end: 11; } .col-start--s-11 { grid-column-start: 11; } .col-end--s-11 { grid-column-end: 11; } .row-span--s-12 { grid-row: span 12; } .col-span--s-12 { grid-column: span 12; } .row-start--s-12 { grid-row-start: 12; } .row-end--s-12 { grid-row-end: 12; } .col-start--s-12 { grid-column-start: 12; } .col-end--s-12 { grid-column-end: 12; } } .col-span--all { grid-column: 1 / -1; } @media (max-width: 1366px) { .col-span--xl-all { grid-column: 1 / -1; } } @media (max-width: 992px) { .col-span--l-all { grid-column: 1 / -1; } } @media (max-width: 768px) { .col-span--m-all { grid-column: 1 / -1; } } @media (max-width: 480px) { .col-span--s-all { grid-column: 1 / -1; } } .order--first { order: -1; } .order--last { order: 999; } .col-end--last { grid-column-end: -1; } @media (max-width: 1366px) { .order--first-xl { order: -1; } .order--last-xl { order: 999; } .col-end--xl-last { grid-column-end: -1; } } @media (max-width: 992px) { .order--first-l { order: -1; } .order--last-l { order: 999; } .col-end--l-last { grid-column-end: -1; } } @media (max-width: 768px) { .order--first-m { order: -1; } .order--last-m { order: 999; } .col-end--m-last { grid-column-end: -1; } } @media (max-width: 480px) { .order--first-s { order: -1; } .order--last-s { order: 999; } .col-end--s-last { grid-column-end: -1; } } .grid--auto-rows.grid--auto-rows { grid-auto-rows: minmax(-webkit-min-content, 1fr); grid-auto-rows: minmax(min-content, 1fr); } [class*="grid--auto"]:where(:not([class*="rows"])) { display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --grid-template-columns-any: var(--grid-template-columns-fit); --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --grid-template-columns-fit: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-fill: repeat(auto-fill, minmax(var(--min-formula), 1fr)); --grid-template-columns-even-fit: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); --grid-template-columns-even-fill: repeat(auto-fill, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } [class*="grid--auto"]:where(:not([class*="rows"])) > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } :is(.grid--auto-2, .grid--auto-3, .grid--auto-4, .grid--auto-5, .grid--auto-6, .grid--auto-7, .grid--auto-8, .grid--auto-9, .grid--auto-10, .grid--auto-11, .grid--auto-12):where(.grid--auto-rows) { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); } :is(.grid--auto-2, .grid--auto-3, .grid--auto-4, .grid--auto-5, .grid--auto-6, .grid--auto-7, .grid--auto-8, .grid--auto-9, .grid--auto-10, .grid--auto-11, .grid--auto-12):where(.grid--auto-rows) > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 2; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 3; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-4 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 4; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-5 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 5; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-6 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 6; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-7 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 7; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-8 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 8; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-9 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 9; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-10 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 10; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-11 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 11; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-12 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 12; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); } .grid--auto-1-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--auto-1-2 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-1-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .grid--auto-1-3 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2-1 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--auto-2-1 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .grid--auto-2-3 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-3-1 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .grid--auto-3-1 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-3-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grid--auto-3-2 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } @media (max-width: 992px) { .grid--auto-1-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-1-2 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-1-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-1-3 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2-1 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-2-1 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-2-3 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-2-3 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-3-1 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-3-1 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .grid--auto-3-2 { --min: calc((var(--content-width) - ((var(--column-count) - 1) * var(--grid-gap))) / var(--column-count)) * 0.7; --column-count: 1; --grid-template-columns: repeat(auto-fit, minmax(var(--min-formula), 1fr)); --grid-template-columns-even: repeat(auto-fit, minmax(var(--min-formula), 1fr) minmax(var(--min-formula), 1fr)); display: grid !important; grid-template-columns: var(--grid-template-columns); gap: var(--grid-gap); inline-size: 100%; --min-formula: min(100%, max(var(--min), (100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count))); --column-count: 1; } .grid--auto-3-2 > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } } .grid--auto-fill { --grid-template-columns: var(--grid-template-columns-fill); } .grid--auto-fit { --grid-template-columns: var(--grid-template-columns-fit); } @media (min-width: 481px) { .grid--stack-even { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } .grid--stack-any { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-fill); } .grid--stack-any.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-fit); } @media (max-width: 1366px) { .grid--stack-any-xl { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any-xl.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-any-fill); } .grid--stack-any-xl.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-any-fit); } } @media (min-width: 1367px) { .grid--stack-even-xl { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even-xl.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even-xl.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } @media (max-width: 992px) { .grid--stack-any-l { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any-l.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-any-fill); } .grid--stack-any-l.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-any-fit); } } @media (min-width: 993px) { .grid--stack-even-l { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even-l.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even-l.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } @media (max-width: 768px) { .grid--stack-any-m { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any-m.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-any-fill); } .grid--stack-any-m.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-any-fit); } } @media (min-width: 769px) { .grid--stack-even-m { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even-m.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even-m.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } @media (max-width: 480px) { .grid--stack-any-s { --grid-template-columns: var(--grid-template-columns-any); } .grid--stack-any-s.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-any-fill); } .grid--stack-any-s.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-any-fit); } } @media (min-width: 481px) { .grid--stack-even-s { --grid-template-columns: var(--grid-template-columns-even); } .grid--stack-even-s.grid--auto-fill { --grid-template-columns: var(--grid-template-columns-even-fill); } .grid--stack-even-s.grid--auto-fit { --grid-template-columns: var(--grid-template-columns-even-fit); } } .width--xs:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.1); max-inline-size: 100%; } .width--s:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.2); max-inline-size: 100%; } .width--m:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.4); max-inline-size: 100%; } .width--l:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.6); max-inline-size: 100%; } .width--xl:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.8); max-inline-size: 100%; } .width--xxl:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.9); max-inline-size: 100%; } .width--vp-max:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 1); max-inline-size: 100%; } .width--content:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 1); max-inline-size: 100%; } .width--10:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.1); max-inline-size: 100%; } .width--20:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.2); max-inline-size: 100%; } .width--30:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.3); max-inline-size: 100%; } .width--40:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.4); max-inline-size: 100%; } .width--50:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.5); max-inline-size: 100%; } .width--60:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.6); max-inline-size: 100%; } .width--70:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.7); max-inline-size: 100%; } .width--80:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.8); max-inline-size: 100%; } .width--90:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.9); max-inline-size: 100%; } .width--full:not([class*="breakout--"]) { inline-size: 100%; max-inline-size: 100%; } figure[class*="width--"] img { inline-size: 100%; } .width--auto.width--auto { inline-size: auto !important; max-inline-size: 100%; } .content-width.content-width { inline-size: 100%; max-inline-size: var(--content-width); margin-inline: auto; } .content-width--safe.content-width--safe { inline-size: 100%; max-inline-size: var(--content-width-safe); margin-inline: auto; } /* TODO: @kevingeary this probably should go somewhere else */ ul.list--none, ol.list--none, .list--none > ul, .list--none > ol { list-style: none; padding-inline-start: 0; list-style-type: none; -webkit-margin-before: 0em; margin-block-start: 0em; margin-block-end: 0; } :has(> .ribbon) { position: relative; overflow: hidden; } .ribbon { --ribbon-width: 30rem; --ribbon-offset: -2rem; --ribbon-padding: .5em 1em; --ribbon-background-color: var(--action); --ribbon-text-color: var(--white); --ribbon-text-size: var(--text-s); --ribbon-shadow: 0 5px 10px var(--neutral-trans-10); --ribbon-transform: translateY(-100%) rotate(90deg) translateX(70.71067811865476%) rotate(-45deg); --ribbon-transform-origin: bottom right; position: absolute; display: block; padding: var(--ribbon-padding); background-color: var(--ribbon-background-color); box-shadow: var(--ribbon-shadow); text-align: center; font-size: var(--ribbon-text-size); color: var(--ribbon-text-color); inline-size: var(--ribbon-width); } .ribbon--top-right, .ribbon[data-ribbon-position="top-right"] { inset-block-start: var(--ribbon-offset); inset-inline-end: var(--ribbon-offset); transform: var(--ribbon-transform); transform-origin: var(--ribbon-transform-origin); } .ribbon--top-left, .ribbon[data-ribbon-position="top-left"] { --ribbon-transform: translateY(-100%) rotate(90deg) translateX(70.71067811865476%) rotate(-135deg); --ribbon-transform-origin: bottom left; inset-block-start: var(--ribbon-offset); inset-inline-start: var(--ribbon-offset); transform: var(--ribbon-transform); transform-origin: var(--ribbon-transform-origin); } span.ribbon { inline-size: var(--ribbon-width) !important; } .display--inline.display--inline { display: inline; } .display--block.display--block { display: block; } .display--contents.display--contents { display: contents; } .display--inline-block.display--inline-block { display: inline-block; } .display--inline-flex.display--inline-flex { display: inline-flex; } .display--list-item.display--list-item { display: list-item; } .display--none.display--none { display: none; } @media (max-width: 1366px) { .display--xl-block.display--xl-block { display: block; } .display--xl-none.display--xl-none { display: none; } } @media (max-width: 992px) { .display--l-block.display--l-block { display: block; } .display--l-none.display--l-none { display: none; } } @media (max-width: 768px) { .display--m-block.display--m-block { display: block; } .display--m-none.display--m-none { display: none; } } @media (max-width: 480px) { .display--s-block.display--s-block { display: block; } .display--s-none.display--s-none { display: none; } } @supports (font-size: calc(1vw + 2vw)) { :root { --text-xs: calc(1.3rem + (0.1 * ((100vw - 32rem) / 104.6))); --text-s: calc(1.4rem + (0.2 * ((100vw - 32rem) / 104.6))); --text-m: calc(1.6rem + (0.2 * ((100vw - 32rem) / 104.6))); --text-l: calc(1.92rem + (0.4794 * ((100vw - 32rem) / 104.6))); --text-xl: calc(2.304rem + (0.8944002 * ((100vw - 32rem) / 104.6))); --text-xxl: calc(2.7648rem + (1.4986674666 * ((100vw - 32rem) / 104.6))); --h6: calc(1.4rem + (0.2 * ((100vw - 32rem) / 104.6))); --h5: calc(1.6rem + (0.2 * ((100vw - 32rem) / 104.6))); --h4: calc(1.6rem + (0.4 * ((100vw - 32rem) / 104.6))); --h3: calc(1.92rem + (1.08 * ((100vw - 32rem) / 104.6))); --h2: calc(2.304rem + (2.196 * ((100vw - 32rem) / 104.6))); --h1: calc(2.7648rem + (3.9852 * ((100vw - 32rem) / 104.6))); } @media (min-width: 1367px) { :root { --text-xs: 1.4rem; --text-s: 1.6rem; --text-m: 1.8rem; --text-l: 2.3994rem; --text-xl: 3.1984002rem; --text-xxl: 4.2634674666rem; --h6: 1.6rem; --h5: 1.8rem; --h4: 2rem; --h3: 3rem; --h2: 4.5rem; --h1: 6.75rem; } } } @supports (font-size: clamp(1vw, 2vw, 3vw)) { :root { --text-xs: clamp(1.3rem, calc(0.0956022945vw + 1.2694072658rem), 1.4rem); --text-s: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem); --text-m: clamp(1.6rem, calc(0.1912045889vw + 1.5388145315rem), 1.8rem); --text-l: clamp(1.92rem, calc(0.4583173996vw + 1.7733384321rem), 2.3994rem); --text-xl: clamp(2.304rem, calc(0.8550671128vw + 2.0303785239rem), 3.1984002rem); --text-xxl: clamp(2.7648rem, calc(1.4327604843vw + 2.306316645rem), 4.2634674666rem); --h6: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem); --h5: clamp(1.6rem, calc(0.1912045889vw + 1.5388145315rem), 1.8rem); --h4: clamp(1.6rem, calc(0.3824091778vw + 1.4776290631rem), 2rem); --h3: clamp(1.92rem, calc(1.0325047801vw + 1.5895984704rem), 3rem); --h2: clamp(2.304rem, calc(2.0994263862vw + 1.6321835564rem), 4.5rem); --h1: clamp(2.7648rem, calc(3.8099426386vw + 1.5456183556rem), 6.75rem); } } @supports (padding: calc(1vw + 2vw)) { :root { --space-xs: calc(1.3506752532rem + (-0.0173419199 * ((100vw - 32rem) / 104.6))); --space-s: calc(1.8004501125rem + (0.1995498875 * ((100vw - 32rem) / 104.6))); --space-m: calc(2.4rem + (0.6 * ((100vw - 32rem) / 104.6))); --space-l: calc(3.1992rem + (1.3008 * ((100vw - 32rem) / 104.6))); --space-xl: calc(4.2645336rem + (2.4854664 * ((100vw - 32rem) / 104.6))); --space-xxl: calc(5.6846232888rem + (4.4403767112 * ((100vw - 32rem) / 104.6))); --section-space-xs: calc(2.7013505064rem + (2.6319828269 * ((100vw - 32rem) / 104.6))); --section-space-s: calc(3.6009002251rem + (4.3990997749 * ((100vw - 32rem) / 104.6))); --section-space-m: calc(4.8rem + (7.2 * ((100vw - 32rem) / 104.6))); --section-space-l: calc(6.3984rem + (11.6016 * ((100vw - 32rem) / 104.6))); --section-space-xl: calc(8.5290672rem + (18.4709328 * ((100vw - 32rem) / 104.6))); --section-space-xxl: calc(11.3692465776rem + (29.1307534224 * ((100vw - 32rem) / 104.6))); --section-padding-x: calc(1.6rem + (4.4 * ((100vw - 32rem) / 104.6))); --gutter: calc(1.6rem + (4.4 * ((100vw - 32rem) / 104.6))); } @media (min-width: 1367px) { :root { --space-xs: 1.3333333333rem; --space-s: 2rem; --space-m: 3rem; --space-l: 4.5rem; --space-xl: 6.75rem; --space-xxl: 10.125rem; --section-space-xs: 5.3333333333rem; --section-space-s: 8rem; --section-space-m: 12rem; --section-space-l: 18rem; --section-space-xl: 27rem; --section-space-xxl: 40.5rem; --section-padding-x: 6rem; --gutter: 6rem; } } } @supports (padding: clamp(1vw, 2vw, 3vw)) { :root { --space-xs: clamp(1.3506752532rem, calc(-0.0165792733vw + 1.3559806207rem), 1.3333333333rem); --space-s: clamp(1.8004501125rem, calc(0.190774271vw + 1.7394023458rem), 2rem); --space-m: clamp(2.4rem, calc(0.5736137667vw + 2.2164435946rem), 3rem); --space-l: clamp(3.1992rem, calc(1.2435946463vw + 2.8012497132rem), 4.5rem); --space-xl: clamp(4.2645336rem, calc(2.3761629063vw + 3.50416147rem), 6.75rem); --space-xxl: clamp(5.6846232888rem, calc(4.2451020184vw + 4.3261906429rem), 10.125rem); --section-space-xs: clamp(2.7013505064rem, calc(2.5162359722vw + 1.8961549953rem), 5.3333333333rem); --section-space-s: clamp(3.6009002251rem, calc(4.2056403202vw + 2.2550953226rem), 8rem); --section-space-m: clamp(4.8rem, calc(6.8833652008vw + 2.5973231358rem), 12rem); --section-space-l: clamp(6.3984rem, calc(11.0913957935vw + 2.8491533461rem), 18rem); --section-space-xl: clamp(8.5290672rem, calc(17.6586355641vw + 2.8783038195rem), 27rem); --section-space-xxl: clamp(11.3692465776rem, calc(27.8496686639vw + 2.4573526052rem), 40.5rem); --section-padding-x: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem); --gutter: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem); } } .contain { container-type: inline-size; } .contain > * { container-type: inline-size; } .gap--xs.gap--xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--s.gap--s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--m.gap--m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--l.gap--l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--xl.gap--xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--xxl.gap--xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } @media (max-width: 1366px) { .gap--xl-xs.gap--xl-xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--xl-s.gap--xl-s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--xl-m.gap--xl-m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--xl-l.gap--xl-l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--xl-xl.gap--xl-xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--xl-xxl.gap--xl-xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } } @media (max-width: 992px) { .gap--l-xs.gap--l-xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--l-s.gap--l-s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--l-m.gap--l-m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--l-l.gap--l-l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--l-xl.gap--l-xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--l-xxl.gap--l-xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } } @media (max-width: 768px) { .gap--m-xs.gap--m-xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--m-s.gap--m-s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--m-m.gap--m-m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--m-l.gap--m-l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--m-xl.gap--m-xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--m-xxl.gap--m-xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } } @media (max-width: 480px) { .gap--s-xs.gap--s-xs { gap: var(--space-xs); --row-gap: var(--space-xs); --col-gap: var(--space-xs); --grid-gap: var(--space-xs); } .gap--s-s.gap--s-s { gap: var(--space-s); --row-gap: var(--space-s); --col-gap: var(--space-s); --grid-gap: var(--space-s); } .gap--s-m.gap--s-m { gap: var(--space-m); --row-gap: var(--space-m); --col-gap: var(--space-m); --grid-gap: var(--space-m); } .gap--s-l.gap--s-l { gap: var(--space-l); --row-gap: var(--space-l); --col-gap: var(--space-l); --grid-gap: var(--space-l); } .gap--s-xl.gap--s-xl { gap: var(--space-xl); --row-gap: var(--space-xl); --col-gap: var(--space-xl); --grid-gap: var(--space-xl); } .gap--s-xxl.gap--s-xxl { gap: var(--space-xxl); --row-gap: var(--space-xxl); --col-gap: var(--space-xxl); --grid-gap: var(--space-xxl); } } .col-gap--xs.col-gap--xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--s.col-gap--s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--m.col-gap--m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--l.col-gap--l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--xl.col-gap--xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--xxl.col-gap--xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } @media (max-width: 1366px) { .col-gap--xl-xs.col-gap--xl-xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--xl-s.col-gap--xl-s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--xl-m.col-gap--xl-m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--xl-l.col-gap--xl-l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--xl-xl.col-gap--xl-xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--xl-xxl.col-gap--xl-xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } } @media (max-width: 992px) { .col-gap--l-xs.col-gap--l-xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--l-s.col-gap--l-s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--l-m.col-gap--l-m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--l-l.col-gap--l-l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--l-xl.col-gap--l-xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--l-xxl.col-gap--l-xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } } @media (max-width: 768px) { .col-gap--m-xs.col-gap--m-xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--m-s.col-gap--m-s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--m-m.col-gap--m-m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--m-l.col-gap--m-l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--m-xl.col-gap--m-xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--m-xxl.col-gap--m-xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } } @media (max-width: 480px) { .col-gap--s-xs.col-gap--s-xs { column-gap: var(--space-xs); --col-gap: var(--space-xs); } .col-gap--s-s.col-gap--s-s { column-gap: var(--space-s); --col-gap: var(--space-s); } .col-gap--s-m.col-gap--s-m { column-gap: var(--space-m); --col-gap: var(--space-m); } .col-gap--s-l.col-gap--s-l { column-gap: var(--space-l); --col-gap: var(--space-l); } .col-gap--s-xl.col-gap--s-xl { column-gap: var(--space-xl); --col-gap: var(--space-xl); } .col-gap--s-xxl.col-gap--s-xxl { column-gap: var(--space-xxl); --col-gap: var(--space-xxl); } } .row-gap--xs.row-gap--xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--s.row-gap--s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--m.row-gap--m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--l.row-gap--l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--xl.row-gap--xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--xxl.row-gap--xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } @media (max-width: 1366px) { .row-gap--xl-xs.row-gap--xl-xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--xl-s.row-gap--xl-s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--xl-m.row-gap--xl-m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--xl-l.row-gap--xl-l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--xl-xl.row-gap--xl-xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--xl-xxl.row-gap--xl-xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } } @media (max-width: 992px) { .row-gap--l-xs.row-gap--l-xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--l-s.row-gap--l-s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--l-m.row-gap--l-m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--l-l.row-gap--l-l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--l-xl.row-gap--l-xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--l-xxl.row-gap--l-xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } } @media (max-width: 768px) { .row-gap--m-xs.row-gap--m-xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--m-s.row-gap--m-s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--m-m.row-gap--m-m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--m-l.row-gap--m-l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--m-xl.row-gap--m-xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--m-xxl.row-gap--m-xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } } @media (max-width: 480px) { .row-gap--s-xs.row-gap--s-xs { row-gap: var(--space-xs); --row-gap: var(--space-xs); } .row-gap--s-s.row-gap--s-s { row-gap: var(--space-s); --row-gap: var(--space-s); } .row-gap--s-m.row-gap--s-m { row-gap: var(--space-m); --row-gap: var(--space-m); } .row-gap--s-l.row-gap--s-l { row-gap: var(--space-l); --row-gap: var(--space-l); } .row-gap--s-xl.row-gap--s-xl { row-gap: var(--space-xl); --row-gap: var(--space-xl); } .row-gap--s-xxl.row-gap--s-xxl { row-gap: var(--space-xxl); --row-gap: var(--space-xxl); } } .fr-container-gap, .container-gap { --row-gap: var(--container-gap); --col-gap: var(--container-gap); gap: var(--container-gap); } .fr-content-gap, .content-gap { --row-gap: var(--content-gap); --col-gap: var(--content-gap); gap: var(--content-gap); } .fr-grid-gap, .grid-gap { --row-gap: var(--grid-gap); --col-gap: var(--grid-gap); gap: var(--grid-gap); } .gap--none { --row-gap: 0; --col-gap: 0; gap: 0; } section:where(:not(.bricks-shape-divider)) { display: flex; flex-direction: column; align-items: center; gap: var(--container-gap); } section > div:where(:not(.bricks-shape-divider)) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); } :where(:where(.brxe-block)) { gap: var(--content-gap); } :where(:where(.brxe-div)) { gap: var(--content-gap); } section > div:where([class*="grid--"]), :where([class*="grid--"]) { gap: var(--grid-gap); } :root { --fr-bg-light: var(--bg-light); --fr-bg-dark: var(--bg-dark); --fr-text-light: var(--text-light); --fr-text-dark: var(--text-dark); --fr-card-padding: var(--card-padding, var(--space-m)); --fr-card-gap: var(--card-gap, var(--space-s)); --fr-card-border-size: var(--card-border-width, 0.15rem); --fr-card-border-color: var(--card-border-color, var(--shade-light)); --fr-card-border-style: var(--card-border-style, solid); --fr-card-radius: var(--card-radius, var(--radius-xs)); --fr-card-avatar-radius: var(--card-avatar-radius, 50%); --fr-lede-width: 60ch; --fr-list-pad-y: 0.75em; --fr-list-pad-x: 1.25em; --fr-hero-padding: var(--section-space-xl); } .fr-lede, p.fr-lede { max-width: 60ch; } .fr-hero-padding { padding-block: var(--fr-hero-padding); } .fr-text--light { color: var(--text-light); } .fr-text--dark { color: var(--text-dark); } .fr-bg--light { background-color: var(--bg-light); } .fr-bg--dark { background-color: var(--bg-dark); } :root { --f-label-size: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem); --f-label-font-weight: 400; --f-label-line-height: 1; --f-label-padding-x: 0; --f-label-padding-y: 0; --f-label-margin-bottom: 0.5em; --f-label-text-transform: none; --f-label-inside-position-left: 1.5em; --f-label-inside-position-top: 0; --f-label-inside-scale: 1; --f-legend-text-weight: 400; --f-legend-size: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem); --f-legend-margin-bottom: 1em; --f-legend-border: none; --f-legend-line-height: 1.2; --f-help-text-weight: 400; --f-help-size: clamp(1.2rem, calc(0.1912045889vw + 1.1388145315rem), 1.4rem); --f-help-line-height: 1.4; --f-help-margin-block: 0.5em 0; --f-field-margin-bottom: 1.5em; --f-fieldset-margin-bottom: 1.5em; --f-grid-gutter: 2rem; --f-input-border-style: solid; --f-input-border-top-size: 0.1rem; --f-input-border-right-size: 0.1rem; --f-input-border-bottom-size: 0.1rem; --f-input-border-left-size: 0.1rem; --f-input-border-radius: var(--btn-radius); --f-input-size: clamp(1.4rem, calc(0.3824091778vw + 1.2776290631rem), 1.8rem); --f-input-font-weight: 400; --f-input-line-height: 1; --f-input-height: 5rem; --f-input-padding-x: 1em; --f-input-padding-y: 0.5em; --f-btn-border-style: solid; --f-btn-border-width: var(--btn-border-width); --f-btn-border-radius: var(--f-light-input-radius); --f-btn-text-size: clamp(1.4rem, calc(0.3824091778vw + 1.2776290631rem), 1.8rem); --f-btn-font-weight: 400; --f-btn-line-height: 1; --f-btn-padding-y: 0.75em; --f-btn-padding-x: 1.5em; --f-btn-margin-top: 0; --f-btn-text-decoration: none; --f-btn-text-transform: none; --f-option-label-font-weight: 400; --f-option-label-size: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem); --f-option-label-spacing: 0.5em; --f-option-label-line-height: 1.4; --f-progress-height: 3rem; --f-progress-bar-radius: var(--btn-radius); --f-tab-border-size: 0; --f-tab-border-style: solid; --f-tab-border-radius: 0; --f-tab-text-size: clamp(1.6rem, calc(0.1912045889vw + 1.5388145315rem), 1.8rem); --f-tab-text-weight: 400; --f-tab-text-line-height: 1; --f-tab-text-align: center; --f-tab-text-transform: none; --f-tab-text-decoration: none; --f-tab-padding-y: 0.75em; --f-tab-padding-x: 1.5em; --f-tab-margin-x: 0; --f-tab-width: auto; --f-tab-active-border-bottom-size: 3px; --f-tab-active-text-weight: 600; --f-tab-active-border-size: 0; --f-tab-active-border-style: solid; --f-tab-group-padding-y: 0; --f-tab-group-padding-x: 0; --f-tab-group-border-bottom-size: 2px; --f-tab-group-border-bottom-style: solid; --f-tab-group-margin-bottom: 3rem; } .form--light form[data-wsf-style-id], .form--dark form[data-wsf-style-id] { --wsf-form-transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); --wsf-field-radio-size: calc(var(--f-option-label-size) * var(--f-option-label-line-height)); } .form--light form[data-wsf-style-id] { --wsf-field-color-background-hover: var(--white); --wsf-field-border-color-hover: var(--neutral-light); --wsf-field-color-hover: var(--neutral-dark); --wsf-field-color-placeholder-hover: var(--neutral-dark); --wsf-field-color-background-focus: var(--white); --wsf-field-checkbox-checked-color-background: var(--action); --wsf-field-checkbox-checked-switch-color-background:var(--action); --wsf-field-radio-checked-color: var(--action); --wsf-field-radio-checked-switch-color-background: var(--action); --wsf-field-radio-color-background: transparent; --wsf-field-border: 1px solid var(--shade-ultra-light); --wsf-field-color-placeholder: hsl(0 0% 25% / 0.5); --wsf-field-button-primary-color-background-hover: var(--action-hover); --wsf-field-button-primary-border-color-hover: var(--action-hover); --wsf-field-button-primary-color: var(--action-ultra-light); --wsf-field-button-primary-color-hover: var(--action-ultra-light); --wsf-field-button-secondary-color-background: var(--neutral-light); --wsf-field-button-secondary-color-background-hover: var(--neutral-ultra-light); --wsf-field-button-secondary-border-color: var(--neutral-light); --wsf-field-button-secondary-border-color-hover: var(--neutral-ultra-light); --wsf-field-button-secondary-color: var(--neutral-ultra-dark); --wsf-field-button-secondary-color-hover: var(--neutral-ultra-dark); } .form--dark form[data-wsf-style-id] { --wsf-field-color-background-hover: var(--neutral-dark); --wsf-field-border-color-hover: var(--neutral-semi-dark); --wsf-field-color-hover: var(--neutral-ultra-light); --wsf-field-color-placeholder-hover: var(--neutral-ultra-light); --wsf-field-color-background-focus: var(--neutral-dark); --wsf-field-checkbox-checked-color-background: var(--primary); --wsf-field-checkbox-checked-switch-color-background:var(--primary); --wsf-field-radio-checked-color: var(--primary); --wsf-field-radio-checked-switch-color-background: var(--primary); --wsf-field-radio-color-background: transparent; --wsf-field-border: 1px solid var(--neutral); --wsf-field-color-placeholder: hsl(38 100% 95% / 0.5); --wsf-field-button-primary-color-background-hover: var(--primary-hover); --wsf-field-button-primary-border-color-hover: var(--primary-hover); --wsf-field-button-primary-color: var(--primary-ultra-light); --wsf-field-button-primary-color-hover: var(--primary-ultra-light); --wsf-field-button-secondary-color-background: var(--neutral-light); --wsf-field-button-secondary-color-background-hover: var(--neutral-ultra-light); --wsf-field-button-secondary-border-color: var(--neutral-light); --wsf-field-button-secondary-border-color-hover: var(--neutral-ultra-light); --wsf-field-button-secondary-color: var(--neutral-ultra-dark); --wsf-field-button-secondary-color-hover: var(--neutral-ultra-dark); } .form--dark .wsf-form input[type="date"].wsf-field, .form--dark .wsf-form input[type="datetime-local"].wsf-field, .form--dark .wsf-form input[type="file"].wsf-field, .form--dark .wsf-form input[type="month"].wsf-field, .form--dark .wsf-form input[type="password"].wsf-field, .form--dark .wsf-form input[type="search"].wsf-field, .form--dark .wsf-form input[type="time"].wsf-field, .form--dark .wsf-form input[type="week"].wsf-field, .form--dark .wsf-form input[type="email"].wsf-field, .form--dark .wsf-form input[type="number"].wsf-field, .form--dark .wsf-form input[type="tel"].wsf-field, .form--dark .wsf-form input[type="text"].wsf-field, .form--dark .wsf-form input[type="url"].wsf-field, .form--dark .wsf-form select.wsf-field:not([multiple]):not([size]), .form--dark .wsf-form select.wsf-field ~ .select2-container .select2-selection { height: var(--f-input-height, 5rem); } .form--dark .wsf-form input[type="date"].wsf-field, .form--dark .wsf-form input[type="datetime-local"].wsf-field, .form--dark .wsf-form input[type="file"].wsf-field, .form--dark .wsf-form input[type="month"].wsf-field, .form--dark .wsf-form input[type="password"].wsf-field, .form--dark .wsf-form input[type="search"].wsf-field, .form--dark .wsf-form input[type="time"].wsf-field, .form--dark .wsf-form input[type="week"].wsf-field, .form--dark .wsf-form input[type="email"].wsf-field, .form--dark .wsf-form input[type="number"].wsf-field, .form--dark .wsf-form input[type="tel"].wsf-field, .form--dark .wsf-form input[type="text"].wsf-field, .form--dark .wsf-form input[type="url"].wsf-field, .form--dark .wsf-form select.wsf-field, .form--dark .wsf-form select.wsf-field:not([multiple]):not([size]), .form--dark .wsf-form select.wsf-field ~ .select2-container .select2-selection, .form--dark .wsf-form textarea.wsf-field { background-color: var(--f-dark-input-background, var(--neutral-dark)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-dark-input-border-color, var(--neutral-semi-dark)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--dark .wsf-form input[type="date"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="date"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="datetime-local"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="datetime-local"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="file"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="file"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="month"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="month"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="password"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="password"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="search"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="search"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="time"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="time"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="week"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="week"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="email"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="email"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="number"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="number"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="tel"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="tel"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="text"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="text"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form input[type="url"].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="url"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form select.wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form select.wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form select.wsf-field:not([multiple]):not([size]):hover:not([data-wsf-legal]), .form--dark .wsf-form select.wsf-field:not([multiple]):not([size]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form select.wsf-field ~ .select2-container .select2-selection:hover:not([data-wsf-legal]), .form--dark .wsf-form select.wsf-field ~ .select2-container .select2-selection:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .wsf-form textarea.wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form textarea.wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-dark-input-color-background-hover, var(--neutral-dark)); border-color: var(--f-dark-input-border-color-hover, var(--neutral-semi-dark)); color: var(--f-dark-input-text-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form .wsf-grid { margin-inline: calc(-1 * calc(var(--f-grid-gutter, 2rem) / 2)); } .form--dark .wsf-form [data-type="texteditor"] { color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); } .form--dark .wsf-form [data-type="texteditor"] * + :is(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing); } .form--dark .wsf-form [data-type="texteditor"] * + p { margin-block-start: var(--paragraph-spacing); } .form--dark .wsf-form [data-type="texteditor"] * + ul, .form--dark .wsf-form [data-type="texteditor"] * + ol { margin-block-start: var(--list-spacing); } .form--dark .wsf-form [data-type="texteditor"] * + li { margin-block-start: var(--list-item-spacing); } .form--dark .wsf-form [data-type="html"] { color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); } .form--dark .wsf-form select.wsf-field:not([multiple]):not([size]) { padding-inline-end: calc(20px + var(--f-input-padding-x, 1em)); } .form--dark .wsf-form select.wsf-field:not([multiple]):not([size]):not(:has(+ span)) { background-image: linear-gradient(45deg, transparent 50%, var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) 0), linear-gradient(135deg, var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) 50%, transparent 0); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; } .form--dark .wsf-form select.wsf-field:invalid { color: hsl(var(--f-dark-input-placeholder-hsl, 38 100% 95%) / var(--f-dark-input-placeholder-opacity, 0.5)) !important; } .form--dark .wsf-form select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow { border-color: var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) transparent transparent transparent; right: calc(20px + var(--f-input-padding-x, 1em)); } .form--dark .wsf-form select.wsf-field ~ .select2-container .select2-selection--single .select2-selection__rendered, .form--dark .wsf-form select.wsf-field ~ .select2-container .select2-selection--single .select2-selection__placeholder, .form--dark .wsf-form select.wsf-field ~ .select2-container .select2-selection .select2-search--inline .select2-search__field, .form--dark .wsf-form select.wsf-field ~ .select2-container .select2-selection input.select2-search__field::placeholder { color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); } .form--dark .wsf-form .wsf-select2-dropdown .select2-results .select2-results__option { border-top: 1px solid var(--f-dark-input-border-color, var(--neutral-semi-dark)); font-size: var(--f-input-size, --text-m); } .form--dark .wsf-form .wsf-select2-dropdown .select2-results .select2-results__option--highlighted[aria-selected] { background-color: var(--f-dark-input-background, var(--neutral-dark)); color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); } .form--dark .wsf-form.wsf-validated select.wsf-field:not([multiple]):not([size]):invalid, .form--dark .wsf-form.wsf-validated input[type="date"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="datetime-local"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="file"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="month"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="password"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="search"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="time"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="week"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="email"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="number"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="tel"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="text"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated input[type="url"].wsf-field:invalid, .form--dark .wsf-form.wsf-validated select.wsf-field:invalid, .form--dark .wsf-form.wsf-validated textarea.wsf-field:invalid { border-color: hsl(var(--danger-h, 354), var(--danger-s, 70%), var(--danger-l, 54%)); color: hsl(var(--danger-h, 354), var(--danger-s, 70%), var(--danger-l, 54%)); } .form--dark .wsf-form .wsf-invalid-feedback { color: hsl(var(--danger-h, 354), var(--danger-s, 70%), var(--danger-l, 54%)); } .form--dark .wsf-form .iti--allow-dropdown input, .form--dark .wsf-form .iti--allow-dropdown input[type="tel"], .form--dark .wsf-form .iti--allow-dropdown input[type="text"], .form--dark .wsf-form .iti--separate-dial-code input, .form--dark .wsf-form .iti--separate-dial-code input[type="tel"], .form--dark .wsf-form .iti--separate-dial-code input[type="text"] { padding-inline-start: calc(4.8rem + 6px); } .form--dark .wsf-form input.wsf-field::placeholder, .form--dark .wsf-form textarea.wsf-field::placeholder { color: var(--f-dark-input-placeholder-color, var(--neutral-ultra-light)); opacity: var(--f-dark-input-placeholder-opacity, 0.5); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--dark .wsf-form input.wsf-field:hover::placeholder, .form--dark .wsf-form textarea.wsf-field:hover::placeholder { color: var(--f-dark-input-placeholder-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form label.wsf-label, .form--dark .wsf-form label { background-color: var(--f-dark-label-background-color, transparent); color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); } .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder] + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder] + .wsf-input-group-append + label { background-color: var(--f-dark-label-background-color, transparent); color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); top: calc(var(--f-input-height, 5rem) / 2); transform: translateY(-50%); transition: all 0.3s ease; background-color: var(--f-dark-label-inside-background-color, transparent); left: calc(calc(var(--f-grid-gutter, 2rem) / 2) + var(--f-input-padding-x, 1em)); } .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:hover:placeholder-shown:not(:focus) + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:hover:not(:focus):placeholder-shown + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:hover:placeholder-shown:not(:focus) + .wsf-input-group-append + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:hover:not(:focus):placeholder-shown + .wsf-input-group-append + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:hover:placeholder-shown:not(:focus) + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:hover:not(:focus):placeholder-shown + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:hover:placeholder-shown:not(:focus) + .wsf-input-group-append + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:hover:not(:focus):placeholder-shown + .wsf-input-group-append + label { color: var(--f-dark-input-placeholder-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + .wsf-input-group-append + label { background-color: var(--f-dark-label-background-color, transparent); color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); top: calc(var(--f-input-height, 5rem) / 2); transform: translateY(-50%); transition: all 0.3s ease; background-color: var(--f-dark-label-inside-background-color, transparent); left: calc(calc(var(--f-grid-gutter, 2rem) / 2) + 1em); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + label:hover, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + .wsf-input-group-append + label:hover { color: var(--f-dark-input-placeholder-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:focus + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:not(:placeholder-shown) + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:focus + .wsf-input-group-append + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:not(:placeholder-shown) + .wsf-input-group-append + label { top: var(--f-label-inside-position-top, 0); left: var(--f-label-inside-position-left, 1.5em); scale: var(--f-label-inside-scale, 1); background-color: var(--f-dark-label-inside-background-color-focus, transparent); } .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:focus + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:focus + .wsf-input-group-append + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:not(:placeholder-shown) + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:not(:placeholder-shown) + .wsf-input-group-append + label { top: var(--f-label-inside-position-top, 0); left: var(--f-label-inside-position-left, 1.5em); scale: var(--f-label-inside-scale, 1); background-color: var(--f-dark-label-inside-background-color-focus, transparent); } .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:placeholder-shown + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:placeholder-shown + .wsf-input-group-append + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:placeholder-shown + label { opacity: var(--f-dark-input-placeholder-opacity, 0.5); } .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:focus:placeholder-shown + label, .form--dark .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:focus:placeholder-shown + .wsf-input-group-append + label, .form--dark .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:focus:placeholder-shown + label { background-color: var(--f-dark-label-inside-background-color-focus, transparent); opacity: 1; } .form--dark .wsf-form .wsf-label-position-inside .iti--allow-dropdown input + label, .form--dark .wsf-form .wsf-label-position-inside .iti--allow-dropdown input[type="tel"] + label, .form--dark .wsf-form .wsf-label-position-inside .iti--allow-dropdown input[type="text"] + label, .form--dark .wsf-form .wsf-label-position-inside .iti--separate-dial-code input + label, .form--dark .wsf-form .wsf-label-position-inside .iti--separate-dial-code input[type="tel"] + label, .form--dark .wsf-form .wsf-label-position-inside .iti--separate-dial-code input[type="text"] + label { left: calc(4.8rem + var(--f-input-padding-x, 1em)); } .form--dark .wsf-form .wsf-label-position-inside .iti input.wsf-field[placeholder]:focus + label { background-color: var(--f-dark-label-inside-background-color, transparent); opacity: 1; transform: translate(0px, -50%) scale(0.9); top: 0; left: calc(4.8rem + var(--f-input-padding-x, 1em)); } .form--dark .wsf-form .wsf-label-position-inside select.wsf-field + label { background-color: var(--f-dark-label-inside-background-color, transparent); } .form--dark .wsf-form button.wsf-button, .form--dark .wsf-form button.wsf-button.wsf-button-primary { background-color: var(--f-dark-btn-background, var(--primary)); color: var(--f-dark-btn-text-color, var(--primary-ultra-light)); border-style: var(--f-btn-border-style, solid); border-width: var(--f-btn-border-width, var(--btn-border-width)); border-color: var(--f-dark-btn-border-color, var(--primary)); border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -webkit-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -moz-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -ms-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -o-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); font-size: var(--f-btn-text-size, --text-m); font-weight: var(--f-btn-font-weight, 400); line-height: var(--f-btn-line-height, 1); padding: var(--f-btn-padding-y, 0.75em) var(--f-btn-padding-x, 1.5em); margin-block-start: var(--f-btn-margin-top, 0); text-align: center; -webkit-text-decoration: var(--f-btn-text-decoration, none); text-decoration: var(--f-btn-text-decoration, none); text-transform: var(--f-btn-text-transform, none); transition: all var(--btn-transition-duration) ease; min-height: var(--f-input-height, 5rem); } .form--dark .wsf-form button.wsf-button:hover, .form--dark .wsf-form button.wsf-button.wsf-button-primary:hover { background-color: var(--f-dark-btn-background-hover, var(--primary-hover)); color: var(--f-dark-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-dark-btn-border-color-hover, var(--primary-hover)); } .form--dark .wsf-form button.wsf-button:hover, .form--dark .wsf-form button.wsf-button.wsf-button-primary:hover { background-color: var(--f-dark-btn-background-hover, var(--primary-hover)); color: var(--f-dark-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-dark-btn-border-color-hover, var(--primary-hover)); } .form--dark .wsf-form button.wsf-button.wsf-button-secondary { background-color: var(--f-dark-secondary-btn-background-color, var(--neutral-light)); color: var(--f-dark-secondary-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-dark-secondary-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--dark .wsf-form button.wsf-button.wsf-button-secondary:hover { background-color: var(--f-dark-secondary-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-dark-secondary-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-dark-secondary-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form button.wsf-button[data-action="wsf-tab_next"] { background-color: var(--f-dark-next-btn-background-color, var(--neutral-light)); color: var(--f-dark-next-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-dark-next-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--dark .wsf-form button.wsf-button[data-action="wsf-tab_next"]:hover { background-color: var(--f-dark-next-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-dark-next-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-dark-next-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form button.wsf-button[data-action="wsf-tab_previous"] { background-color: var(--f-dark-prev-btn-background-color, var(--neutral-light)); color: var(--f-dark-prev-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-dark-prev-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--dark .wsf-form button.wsf-button[data-action="wsf-tab_previous"]:hover { background-color: var(--f-dark-prev-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-dark-prev-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-dark-prev-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form button.wsf-button[data-action="wsf-save"] { background-color: var(--f-dark-save-btn-background-color, var(--neutral-light)); color: var(--f-dark-save-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-dark-save-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--dark .wsf-form button.wsf-button[data-action="wsf-save"]:hover { background-color: var(--f-dark-save-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-dark-save-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-dark-save-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form button.wsf-button[data-action="wsf-reset"] { background-color: var(--f-dark-reset-btn-background-color, var(--neutral-light)); color: var(--f-dark-reset-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-dark-reset-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--dark .wsf-form button.wsf-button[data-action="wsf-reset"]:hover { background-color: var(--f-dark-reset-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-dark-reset-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-dark-reset-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form button.wsf-button[data-action="wsf-clear"] { background-color: var(--f-dark-clear-btn-background-color, var(--neutral-light)); color: var(--f-dark-clear-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-dark-clear-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--dark .wsf-form button.wsf-button[data-action="wsf-clear"]:hover { background-color: var(--f-dark-clear-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-dark-clear-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-dark-clear-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form ul.wsf-group-tabs { background-color: var(--f-dark-tab-group-background-color, transparent); padding: var(--f-tab-group-padding-y, 0) var(--f-tab-group-padding-x, 0); margin-block-end: var(--f-tab-group-margin-bottom, 3rem); } .form--dark .wsf-form ul.wsf-group-tabs:not(.wsf-steps) { border-block-end: var(--f-tab-group-border-bottom-size, 2px) var(--f-tab-group-border-bottom-style, solid) var(--f-dark-tab-group-border-bottom-color, var(--neutral-ultra-light)) !important; } .form--dark .wsf-form ul.wsf-group-tabs > li { width: var(--f-tab-width, auto); } .form--dark .wsf-form ul.wsf-group-tabs > li:not(:last-child) { margin-inline-end: var(--f-tab-margin-x, 0); } .form--dark .wsf-form ul.wsf-group-tabs > li > a { border: var(--f-tab-border-size, 0) var(--f-tab-border-style, solid) var(--f-dark-tab-border-color, var(--action)) !important; border-radius: var(--f-tab-border-radius, 0); background-color: var(--f-dark-tab-background-color, transparent); color: var(--f-dark-tab-text-color, var(--neutral-dark)); font-size: var(--f-tab-text-size, --text-m); font-weight: var(--f-tab-text-weight, 400); line-height: var(--f-tab-text-line-height, 1); padding: var(--f-tab-padding-y, 0.75em) var(--f-tab-padding-x, 1.5em); text-align: var(--f-tab-text-align, center); text-decoration: var(--f-tab-text-decoration, none); text-transform: var(--f-tab-text-transform, none); } .form--dark .wsf-form ul.wsf-group-tabs > li > a.wsf-tab-disabled { color: var(--f-dark-tab-inactive-text-color, var(--shade-light-trans-80)); } .form--dark .wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a { border: var(--f-tab-active-border-size, 0) var(--f-tab-active-border-style, solid) var(--f-dark-tab-active-border-color, var(--primary)) !important; border-block-end: var(--f-tab-active-border-bottom-size, 3px) var(--f-tab-active-border-style, solid) var(--f-dark-tab-active-border-color, var(--primary)) !important; background-color: var(--f-dark-tab-active-background-color, transparent) !important; color: var(--f-dark-tab-active-text-color, var(--neutral-light)) !important; font-weight: var(--f-tab-active-text-weight, 600); } .form--dark .wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a::before { color: var(--f-dark-tab-active-text-color, var(--neutral-light)) !important; } .form--dark .wsf-form ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active > a { border-block-end: none !important; } .form--dark .wsf-form ul.wsf-group-tabs.wsf-steps > li > a::before { background-color: var(--f-dark-tab-active-border-color, var(--primary)); border: 1px solid var(--f-dark-tab-active-border-color, var(--primary)); } .form--dark .wsf-form ul.wsf-group-tabs.wsf-steps > li > a::after { background-color: var(--f-dark-tab-active-border-color, var(--primary)); } .form--dark .wsf-form ul.wsf-group-tabs.wsf-steps > li > a:not(.wsf-tab-disabled):focus:before { border-color: var(--f-dark-tab-active-border-color, var(--primary)); } .form--dark .wsf-form .wsf-section > legend, .form--dark .wsf-form .wsf-fieldset > legend { border: var(--f-legend-border, none); font-size: var(--f-legend-size, --text-m); font-weight: var(--f-legend-text-weight, 400); line-height: var(--f-legend-line-height, 1.2); margin-block-end: var(--f-legend-margin-bottom, 1em); color: var(--f-dark-legend-text-color, var(--neutral-ultra-light)); padding: 0; } .form--dark .wsf-form .wsf-help { font-size: var(--f-help-size, --text-m); font-weight: var(--f-help-text-weight, 400); line-height: var(--f-help-line-height, 1.4); color: var(--f-dark-help-text-color, var(--neutral-light)); margin-block: var(--f-help-margin-block, 0.5em 0); } .form--dark .wsf-form .wsf-help-pre { margin-block: var(--f-help-margin-block, 0.5em 0); } .form--dark .wsf-form .wsf-field-wrapper:not(.wsf-alert) { margin-block-end: var(--f-field-margin-bottom, 1.5em); } .form--dark .wsf-form fieldset:not(:last-child) { margin-block-end: var(--f-fieldset-margin-bottom, 1.5em); } .form--dark .wsf-form .wsf-tile { padding-inline: calc(var(--f-grid-gutter, 2rem) / 2); } .form--dark .wsf-form input[type="radio"].wsf-field + label.wsf-label { background-color: var(--f-dark-option-background-color, transparent); display: inline-block; color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; background-color: unset; margin: 0; } .form--dark .wsf-form input[type="radio"].wsf-field:checked + label.wsf-label:before { background-color: var(--f-dark-option-action-color, var(--primary)); border-color: var(--f-dark-option-border-color, var(--neutral)); } .form--dark .wsf-form input[type="radio"].wsf-field + label.wsf-label:before { background-color: var(--f-dark-option-background-color, transparent); border-color: var(--f-dark-option-border-color, var(--neutral)); } .form--dark .wsf-form input[type="radio"].wsf-image + label.wsf-label { padding-inline-start: 0; } .form--dark .wsf-form [data-type="radio"] > div:not(.wsf-grid) > div + div, .form--dark .wsf-form [data-type="price_radio"] > div:not(.wsf-grid) > div + div, .form--dark .wsf-form [data-type="radio"] fieldset > div:not(.wsf-grid) > div + div, .form--dark .wsf-form [data-type="price_radio"] fieldset > div:not(.wsf-grid) > div + div { margin-block-start: var(--f-option-label-spacing, 0.5em); } .form--dark .wsf-form [data-type="radio"] > div.wsf-grid, .form--dark .wsf-form [data-type="price_radio"] > div.wsf-grid, .form--dark .wsf-form [data-type="radio"] fieldset > div.wsf-grid, .form--dark .wsf-form [data-type="price_radio"] fieldset > div.wsf-grid { row-gap: var(--f-option-label-spacing); } .form--dark .wsf-form input[type="checkbox"].wsf-field + label.wsf-label::before, .form--dark .wsf-form input[type="checkbox"].wsf-field + label.wsf-label::after { width: 1.4em; height: 1.4em; transform: none; } .form--dark .wsf-form input[type="checkbox"].wsf-field:checked + label.wsf-label::before { background-color: var(--f-dark-option-action-color, var(--primary)); border-color: var(--f-dark-option-border-color, var(--neutral)); } .form--dark .wsf-form input[type="checkbox"].wsf-field + label.wsf-label::before { background-color: var(--f-dark-option-background-color, transparent); border-color: var(--f-dark-option-border-color, var(--neutral)); } .form--dark .wsf-form input[type="checkbox"].wsf-field + label.wsf-label { background-color: var(--f-dark-option-background-color, transparent); display: inline-block; color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; background-color: unset; margin: 0; } .form--dark .wsf-form [data-type="checkbox"] > div:not(.wsf-grid) > div + div, .form--dark .wsf-form [data-type="price_checkbox"] > div:not(.wsf-grid) > div + div, .form--dark .wsf-form [data-type="checkbox"] fieldset > div:not(.wsf-grid) > div + div, .form--dark .wsf-form [data-type="price_checkbox"] fieldset > div:not(.wsf-grid) > div + div { margin-block-start: var(--f-option-label-spacing, 0.5em); } .form--dark .wsf-form [data-type="checkbox"] > div.wsf-grid, .form--dark .wsf-form [data-type="price_checkbox"] > div.wsf-grid, .form--dark .wsf-form [data-type="checkbox"] fieldset > div.wsf-grid, .form--dark .wsf-form [data-type="price_checkbox"] fieldset > div.wsf-grid { row-gap: var(--f-option-label-spacing); } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-switch + label.wsf-label, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-switch + label.wsf-label { -webkit-padding-start: 2.85em; padding-inline-start: 2.85em; } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-switch + label.wsf-label:before, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-switch + label.wsf-label:before { width: 2.5em; height: 1.4em; border-radius: 1.2em; } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-switch + label.wsf-label:after, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-switch + label.wsf-label:after { height: calc(1.4em - 4px); width: calc(1.4em - 4px); } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-switch:checked + label.wsf-label:after, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-switch:checked + label.wsf-label:after { left: calc(2.5em - calc(1.4em - 2px)); } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-image + label.wsf-label, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-image + label.wsf-label { -webkit-padding-start: 0; padding-inline-start: 0; } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-button + label.wsf-label, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-button + label.wsf-label { background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); } @media (hover: hover) and (pointer: fine) { .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-button + label.wsf-label:hover, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-button + label.wsf-label:hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); text-decoration: var(--btn-text-decoration-hover); } } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-button + label.wsf-label:focus, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-button + label.wsf-label:focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-button:checked + label.wsf-label, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-button:checked + label.wsf-label { background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); } @media (hover: hover) and (pointer: fine) { .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-button:checked + label.wsf-label:hover, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-button:checked + label.wsf-label:hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); text-decoration: var(--btn-text-decoration-hover); } } .form--dark .wsf-form input[type="checkbox"].wsf-field.wsf-button:checked + label.wsf-label:focus, .form--dark .wsf-form input[type="radio"].wsf-field.wsf-button:checked + label.wsf-label:focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } .form--dark .wsf-form progress[value]::-webkit-progress-bar { background-color: var(--f-dark-progress-background-color, var(--base-ultra-light)); height: var(--f-progress-height, 3rem); display: block; } .form--dark .wsf-form progress.wsf-progress { height: var(--f-progress-height, 3rem); border-radius: var(--f-progress-bar-radius, var(--btn-radius)); overflow: hidden; } .form--dark .wsf-form progress[value]::-webkit-progress-value { background-color: var(--f-dark-progress-bar-fill-color, var(--primary)); border-radius: var(--f-progress-bar-radius, var(--btn-radius)); } .form--dark .wsf-form .minicolors-theme-ws-form .minicolors-swatch { height: calc(100% - 1px); } .form--dark .wsf-form input[type="range"] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ appearance: none; width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ --wsf-color-lower-track: var(--f-dark-range-left-track-color, var(--neutral-semi-dark)); --wsf-color-upper-track: var(--f-dark-range-right-track-color, var(--neutral-semi-dark)); background-color: var(--f-dark-range-background-color, var(--neutral-semi-dark)); } .form--dark .wsf-form input[type="range"]::-moz-range-track { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ appearance: none; width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ --wsf-color-lower-track: var(--f-dark-range-left-track-color, var(--neutral-semi-dark)); --wsf-color-upper-track: var(--f-dark-range-right-track-color, var(--neutral-semi-dark)); background-color: var(--f-dark-range-background-color, var(--neutral-semi-dark)); } .form--dark .wsf-form input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background-color: var(--f-dark-range-thumb-color, var(--primary)); } .form--dark .wsf-form input[type="range"]::-moz-range-thumb { -webkit-appearance: none; appearance: none; background-color: var(--f-dark-range-thumb-color, var(--primary)); } .form--dark .wsf-form input[type="range"]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } .form--dark .wsf-form input[type="range"]::-ms-track { width: 100%; cursor: pointer; /* Hides the slider so custom styles can be added */ background: transparent; border-color: transparent; color: transparent; } .form--dark .wsf-form .wsf-required-wrapper .wsf-text-danger { color: var(--f-dark-required-color, var(--action)); } .form--dark .wsf-form input[type="text"].wsf-field ~ .dropzone { background-color: var(--f-dark-input-background, var(--neutral-dark)); border-color: var(--f-dark-input-border-color, var(--neutral-semi-dark)); } .form--dark .wsf-form input[type="text"].wsf-field ~ .dropzone .dz-message { color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); } .form--dark .wsf-form input[type="file"].wsf-field { padding-inline-start: 1rem; } .form--dark .wsf-form input[type="file"].wsf-field::file-selector-button { background: var(--f-dark-upload-btn-background-color, var(--neutral-light)) !important; color: var(--f-dark-upload-btn-text-color, var(--neutral-ultra-dark)); height: var(--f-input-height, 5rem); position: relative; top: -1px; transition: all var(--btn-transition-duration) ease; } .form--dark .wsf-form input[type="file"].wsf-field::file-selector-button:hover { background: var(--f-dark-upload-btn-background-color-hover, var(--neutral-ultra-light)) !important; color: var(--f-dark-upload-btn-text-color-hover, var(--neutral-ultra-dark)); } .form--dark .wsf-form [data-wsf-legal].wsf-field { background-color: var(--f-dark-input-background, var(--neutral-dark)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-dark-input-border-color, var(--neutral-semi-dark)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--dark .wsf-form [data-wsf-legal].wsf-field:hover:not([data-wsf-legal]), .form--dark .wsf-form [data-wsf-legal].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-dark-input-color-background-hover, var(--neutral-dark)); border-color: var(--f-dark-input-border-color-hover, var(--neutral-semi-dark)); color: var(--f-dark-input-text-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form .wsf-alert { background-color: var(--f-dark-input-background, var(--neutral-dark)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-dark-input-border-color, var(--neutral-semi-dark)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); background-color: var(--base-ultra-light); border-left-width: 0.4rem; margin-block-end: 0; display: inline-block; } .form--dark .wsf-form .wsf-alert:hover:not([data-wsf-legal]), .form--dark .wsf-form .wsf-alert:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-dark-input-color-background-hover, var(--neutral-dark)); border-color: var(--f-dark-input-border-color-hover, var(--neutral-semi-dark)); color: var(--f-dark-input-text-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form .wsf-alert.wsf-alert-danger { background-color: hsl(var(--danger-light-h, 354), var(--danger-light-s, 70%), var(--danger-light-l, 85%)); border-color: #DC3545; color: hsl(var(--danger-dark-h, 354), var(--danger-dark-s, 70%), var(--danger-dark-l, 15%)); } .form--dark .wsf-form .wsf-alert.wsf-alert-warning { background-color: hsl(var(--warning-light-h, 45), var(--warning-light-s, 100%), var(--warning-light-l, 85%)); border-color: #FFC10A; color: hsl(var(--warning-dark-h, 45), var(--warning-dark-s, 100%), var(--warning-dark-l, 15%)); } .form--dark .wsf-form .wsf-alert.wsf-alert-information { background-color: hsl(var(--info-light-h, 188), var(--info-light-s, 77%), var(--info-light-l, 85%)); border-color: var(--info-hex, #18A2B8); color: hsl(var(--info-dark-h, 188), var(--info-dark-s, 77%), var(--info-dark-l, 15%)); } .form--dark .wsf-form .wsf-alert.wsf-alert-success { background-color: hsl(var(--success-light-h, 133), var(--success-light-s, 61%), var(--success-light-l, 85%)); border-color: var(--success-hex, #29A745); color: hsl(var(--success-dark-h, 133), var(--success-dark-s, 61%), var(--success-dark-l, 15%)); } .form--dark .wsf-form .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .form--dark .wsf-form .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, .form--dark .wsf-form .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, .form--dark .wsf-form .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, .form--dark .wsf-form .xdsoft_datetimepicker .xdsoft_calendar td:hover, .form--dark .wsf-form .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background: var(--primary) !important; } .form--dark .wsf-form input[type="text"].wsf-field ~ canvas { background-color: var(--f-dark-input-background, var(--neutral-dark)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-dark-input-border-color, var(--neutral-semi-dark)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); padding: 0; height: auto; background: none; } .form--dark .wsf-form input[type="text"].wsf-field ~ canvas:hover:not([data-wsf-legal]), .form--dark .wsf-form input[type="text"].wsf-field ~ canvas:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-dark-input-color-background-hover, var(--neutral-dark)); border-color: var(--f-dark-input-border-color-hover, var(--neutral-semi-dark)); color: var(--f-dark-input-text-color-hover, var(--neutral-ultra-light)); } .form--dark .wsf-form input[type="date"].wsf-field:focus, .form--dark .wsf-form input[type="datetime-local"].wsf-field:focus, .form--dark .wsf-form input[type="file"].wsf-field:focus, .form--dark .wsf-form input[type="month"].wsf-field:focus, .form--dark .wsf-form input[type="password"].wsf-field:focus, .form--dark .wsf-form input[type="search"].wsf-field:focus, .form--dark .wsf-form input[type="time"].wsf-field:focus, .form--dark .wsf-form input[type="week"].wsf-field:focus, .form--dark .wsf-form input[type="email"].wsf-field:focus, .form--dark .wsf-form input[type="number"].wsf-field:focus, .form--dark .wsf-form input[type="tel"].wsf-field:focus, .form--dark .wsf-form input[type="text"].wsf-field:focus, .form--dark .wsf-form input[type="url"].wsf-field:focus, .form--dark .wsf-form select.wsf-field:focus, .form--dark .wsf-form select.wsf-field ~ .select2-container--default.select2-container--focus:not(.select2-container--disabled) .select2-selection--single, .form--dark .wsf-form select.wsf-field ~ .select2-container--default.select2-container--focus:not(.select2-container--disabled) .select2-selection--multiple, .form--dark .wsf-form textarea.wsf-field:focus, .form--dark .wsf-form button.wsf-button:focus, .form--dark .wsf-form button.wsf-button.wsf-button-primary:focus { border-color: var(--f-dark-focus-color, var(--primary)); box-shadow: 0 0 0 4px hsl(var(--f-dark-focus-hsl, 92 13% 46%) / var(--f-dark-focus-color-opacity, 0.25)); outline: 0; } .form--dark input[type="date"], .form--dark input[type="datetime-local"], .form--dark input[type="month"], .form--dark input[type="password"], .form--dark input[type="search"], .form--dark input[type="time"], .form--dark input[type="week"], .form--dark input[type="email"], .form--dark input[type="number"], .form--dark input[type="tel"], .form--dark input[type="text"], .form--dark input[type="url"], .form--dark select:not([multiple]):not([size]), .form--dark .bricks-search-form input[type="date"], .form--dark .bricks-search-form input[type="datetime-local"], .form--dark .bricks-search-form input[type="month"], .form--dark .bricks-search-form input[type="password"], .form--dark .bricks-search-form input[type="search"], .form--dark .bricks-search-form input[type="time"], .form--dark .bricks-search-form input[type="week"], .form--dark .bricks-search-form input[type="email"], .form--dark .bricks-search-form input[type="number"], .form--dark .bricks-search-form input[type="tel"], .form--dark .bricks-search-form input[type="text"], .form--dark .bricks-search-form input[type="url"], .form--dark .bricks-search-form select:not([multiple]):not([size]), .form--dark .brxe-post-comments input[type="date"], .form--dark .brxe-post-comments input[type="datetime-local"], .form--dark .brxe-post-comments input[type="month"], .form--dark .brxe-post-comments input[type="password"], .form--dark .brxe-post-comments input[type="search"], .form--dark .brxe-post-comments input[type="time"], .form--dark .brxe-post-comments input[type="week"], .form--dark .brxe-post-comments input[type="email"], .form--dark .brxe-post-comments input[type="number"], .form--dark .brxe-post-comments input[type="tel"], .form--dark .brxe-post-comments input[type="text"], .form--dark .brxe-post-comments input[type="url"], .form--dark .brxe-post-comments select:not([multiple]):not([size]) { height: var(--f-input-height, 5rem); } .form--dark .input, .form--dark input:not([type="submit"]), .form--dark select, .form--dark textarea, .form--dark .bricks-search-form .input, .form--dark .bricks-search-form input:not([type="submit"]), .form--dark .bricks-search-form select, .form--dark .bricks-search-form textarea, .form--dark .brxe-post-comments .input, .form--dark .brxe-post-comments input:not([type="submit"]), .form--dark .brxe-post-comments select, .form--dark .brxe-post-comments textarea { background-color: var(--f-dark-input-background, var(--neutral-dark)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-dark-input-border-color, var(--neutral-semi-dark)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-dark-input-text-color, var(--neutral-ultra-light)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--dark .input:hover:not([data-wsf-legal]), .form--dark .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark select:hover:not([data-wsf-legal]), .form--dark select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark textarea:hover:not([data-wsf-legal]), .form--dark textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form .input:hover:not([data-wsf-legal]), .form--dark .bricks-search-form .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark .bricks-search-form input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form select:hover:not([data-wsf-legal]), .form--dark .bricks-search-form select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form textarea:hover:not([data-wsf-legal]), .form--dark .bricks-search-form textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments .input:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark .brxe-post-comments input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments select:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments textarea:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments textarea:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-dark-input-color-background-hover, var(--neutral-dark)); border-color: var(--f-dark-input-border-color-hover, var(--neutral-semi-dark)); color: var(--f-dark-input-text-color-hover, var(--neutral-ultra-light)); } .form--dark .input::placeholder, .form--dark input:not([type="submit"])::placeholder, .form--dark select::placeholder, .form--dark textarea::placeholder, .form--dark .bricks-search-form .input::placeholder, .form--dark .bricks-search-form input:not([type="submit"])::placeholder, .form--dark .bricks-search-form select::placeholder, .form--dark .bricks-search-form textarea::placeholder, .form--dark .brxe-post-comments .input::placeholder, .form--dark .brxe-post-comments input:not([type="submit"])::placeholder, .form--dark .brxe-post-comments select::placeholder, .form--dark .brxe-post-comments textarea::placeholder { color: var(--f-dark-input-placeholder-color, var(--neutral-ultra-light)); opacity: var(--f-dark-input-placeholder-opacity, 0.5); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--dark .input:hover::placeholder, .form--dark input:not([type="submit"]):hover::placeholder, .form--dark select:hover::placeholder, .form--dark textarea:hover::placeholder, .form--dark .bricks-search-form .input:hover::placeholder, .form--dark .bricks-search-form input:not([type="submit"]):hover::placeholder, .form--dark .bricks-search-form select:hover::placeholder, .form--dark .bricks-search-form textarea:hover::placeholder, .form--dark .brxe-post-comments .input:hover::placeholder, .form--dark .brxe-post-comments input:not([type="submit"]):hover::placeholder, .form--dark .brxe-post-comments select:hover::placeholder, .form--dark .brxe-post-comments textarea:hover::placeholder { color: var(--f-dark-input-placeholder-color-hover, var(--neutral-ultra-light)); } .form--dark .bricks-button, .form--dark .bricks-search-form .bricks-button, .form--dark .brxe-post-comments .bricks-button { background-color: var(--f-dark-btn-background, var(--primary)); color: var(--f-dark-btn-text-color, var(--primary-ultra-light)); border-style: var(--f-btn-border-style, solid); border-width: var(--f-btn-border-width, var(--btn-border-width)); border-color: var(--f-dark-btn-border-color, var(--primary)); border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -webkit-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -moz-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -ms-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -o-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); font-size: var(--f-btn-text-size, --text-m); font-weight: var(--f-btn-font-weight, 400); line-height: var(--f-btn-line-height, 1); padding: var(--f-btn-padding-y, 0.75em) var(--f-btn-padding-x, 1.5em); margin-block-start: var(--f-btn-margin-top, 0); text-align: center; -webkit-text-decoration: var(--f-btn-text-decoration, none); text-decoration: var(--f-btn-text-decoration, none); text-transform: var(--f-btn-text-transform, none); transition: all var(--btn-transition-duration) ease; min-height: var(--f-input-height, 5rem); } .form--dark .bricks-button:hover, .form--dark .bricks-search-form .bricks-button:hover, .form--dark .brxe-post-comments .bricks-button:hover { background-color: var(--f-dark-btn-background-hover, var(--primary-hover)); color: var(--f-dark-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-dark-btn-border-color-hover, var(--primary-hover)); } .form--dark .bricks-button.bricks-background-secondary, .form--dark .bricks-search-form .bricks-button.bricks-background-secondary, .form--dark .brxe-post-comments .bricks-button.bricks-background-secondary { background-color: var(--f-dark-secondary-btn-background-color, var(--neutral-light)); color: var(--f-dark-secondary-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-dark-secondary-btn-background-color, var(--neutral-light)); } .form--dark .bricks-button.bricks-background-secondary:hover, .form--dark .bricks-search-form .bricks-button.bricks-background-secondary:hover, .form--dark .brxe-post-comments .bricks-button.bricks-background-secondary:hover { background-color: var(--f-dark-secondary-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-dark-secondary-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-dark-secondary-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .form-group, .form--dark .bricks-search-form .form-group, .form--dark .brxe-post-comments .form-group { padding: 0; } .form--dark .form-group:not(.submit-button-wrapper), .form--dark .bricks-search-form .form-group:not(.submit-button-wrapper), .form--dark .brxe-post-comments .form-group:not(.submit-button-wrapper) { margin-block-end: var(--f-field-margin-bottom, 1.5em); } .form--dark .message, .form--dark .bricks-search-form .message, .form--dark .brxe-post-comments .message { margin-block-start: var(--f-field-margin-bottom, 1.5em); } .form--dark label:not(.ff-el-form-check-label), .form--dark div.label, .form--dark .bricks-search-form label:not(.ff-el-form-check-label), .form--dark .bricks-search-form div.label, .form--dark .brxe-post-comments label:not(.ff-el-form-check-label), .form--dark .brxe-post-comments div.label { background-color: var(--f-dark-label-background-color, transparent); color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); } .form--dark .required:after, .form--dark .bricks-search-form .required:after, .form--dark .brxe-post-comments .required:after { color: var(--f-dark-required-color, var(--action)); } .form--dark input[type="file"], .form--dark .bricks-search-form input[type="file"], .form--dark .brxe-post-comments input[type="file"] { padding: 0; } .form--dark .choose-files, .form--dark .bricks-search-form .choose-files, .form--dark .brxe-post-comments .choose-files { padding: var(--f-input-padding-y 1em, 0.5em 1em); color: var(--f-dark-upload-btn-text-color, var(--neutral-ultra-dark)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); background: var(--f-dark-upload-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--dark .choose-files:hover, .form--dark .bricks-search-form .choose-files:hover, .form--dark .brxe-post-comments .choose-files:hover { color: var(--f-dark-upload-btn-text-color-hover, var(--neutral-ultra-dark)); background: var(--f-dark-upload-btn-background-color-hover, var(--neutral-ultra-light)); } .form--dark .file-result.show, .form--dark .bricks-search-form .file-result.show, .form--dark .brxe-post-comments .file-result.show { font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); transition: all var(--btn-transition-duration) ease; } .form--dark .file-result.show .remove:hover, .form--dark .bricks-search-form .file-result.show .remove:hover, .form--dark .brxe-post-comments .file-result.show .remove:hover { background-color: var(--f-dark-btn-background-hover, var(--primary-hover)); color: var(--f-dark-btn-text-color-hover, var(--primary-ultra-light)); border-color: var(--f-dark-btn-border-color-hover, var(--primary-hover)); } .form--dark input[type="radio"], .form--dark .bricks-search-form input[type="radio"], .form--dark .brxe-post-comments input[type="radio"] { accent-color: var(--f-dark-option-action-color, var(--primary)); } .form--dark input[type="radio"] + label, .form--dark .bricks-search-form input[type="radio"] + label, .form--dark .brxe-post-comments input[type="radio"] + label { background-color: var(--f-dark-option-background-color, transparent); display: inline-block; color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; -webkit-padding-start: inherit; padding-inline-start: inherit; margin: 0; } .form--dark .options-wrapper li, .form--dark .bricks-search-form .options-wrapper li, .form--dark .brxe-post-comments .options-wrapper li { position: relative; } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) { width: 0px; height: 0px; padding: 0; margin: 0; opacity: 0; position: absolute; } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus { outline: none; } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before { border-color: var(--f-dark-focus-color, var(--primary)); box-shadow: 0 0 0 4px hsl(var(--f-dark-focus-hsl, 92 13% 46%) / var(--f-dark-focus-color-opacity, 0.25)); outline: 0; } .form--dark input[type="checkbox"] + label, .form--dark .bricks-search-form input[type="checkbox"] + label, .form--dark .brxe-post-comments input[type="checkbox"] + label { background-color: var(--f-dark-option-background-color, transparent); display: inline-block; color: var(--f-dark-label-text-color, var(--neutral-ultra-light)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; background-color: unset; display: block; position: relative; margin: 0; cursor: pointer; } .form--dark input[type="checkbox"]:hover + label:before, .form--dark .bricks-search-form input[type="checkbox"]:hover + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:hover + label:before { background: var(--f-dark-option-action-color, var(--primary)); box-shadow: inset 0px 0px 0px 2px transparent; } .form--dark input[type="checkbox"] + label:before, .form--dark .bricks-search-form input[type="checkbox"] + label:before, .form--dark .brxe-post-comments input[type="checkbox"] + label:before { content: ""; display: block; width: 1.4em; height: 1.4em; border: 1px solid var(--f-dark-option-border-color, var(--neutral)); border-radius: 0.2em; position: absolute; inset-block-start: 0; inset-inline-start: 0; -webkit-transition: all 0.2s, background 0.2s ease-in-out; transition: all 0.2s, background 0.2s ease-in-out; background-color: var(--f-dark-option-background-color, transparent); } .form--dark input[type="checkbox"]:checked + label:before, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--primary); box-shadow: 0 0 0 1px var(--f-dark-option-border-color, var(--neutral)); } .form--dark input[type="checkbox"]:checked + label:before, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--f-dark-option-action-color, var(--primary)); box-shadow: 0 0 0 1px var(--f-dark-option-border-color, var(--neutral)); } .form--dark input[type="checkbox"]:checked + label:after, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:after, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:after { content: ""; cursor: pointer; display: inline-block; height: 1.5em; width: 1.5em; position: absolute; inset-block-start: 0; inset-inline-start: 0; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") 50% no-repeat; background-size: 50%; } .form--dark select, .form--dark .bricks-search-form select, .form--dark .brxe-post-comments select { background-image: none; } .form--dark select:not(:has(+ span)), .form--dark .bricks-search-form select:not(:has(+ span)), .form--dark .brxe-post-comments select:not(:has(+ span)) { background-image: linear-gradient(45deg, transparent 50%, var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) 0), linear-gradient(135deg, var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) 50%, transparent 0); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; } .form--dark .options-wrapper li + li, .form--dark .bricks-search-form .options-wrapper li + li, .form--dark .brxe-post-comments .options-wrapper li + li { margin-block-start: var(--f-option-label-spacing, 0.5em); } main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_calendar td:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background: var(--primary) !important; } .form--light .wsf-form input[type="date"].wsf-field, .form--light .wsf-form input[type="datetime-local"].wsf-field, .form--light .wsf-form input[type="file"].wsf-field, .form--light .wsf-form input[type="month"].wsf-field, .form--light .wsf-form input[type="password"].wsf-field, .form--light .wsf-form input[type="search"].wsf-field, .form--light .wsf-form input[type="time"].wsf-field, .form--light .wsf-form input[type="week"].wsf-field, .form--light .wsf-form input[type="email"].wsf-field, .form--light .wsf-form input[type="number"].wsf-field, .form--light .wsf-form input[type="tel"].wsf-field, .form--light .wsf-form input[type="text"].wsf-field, .form--light .wsf-form input[type="url"].wsf-field, .form--light .wsf-form select.wsf-field:not([multiple]):not([size]), .form--light .wsf-form select.wsf-field ~ .select2-container .select2-selection { height: var(--f-input-height, 5rem); } .form--light .wsf-form input[type="date"].wsf-field, .form--light .wsf-form input[type="datetime-local"].wsf-field, .form--light .wsf-form input[type="file"].wsf-field, .form--light .wsf-form input[type="month"].wsf-field, .form--light .wsf-form input[type="password"].wsf-field, .form--light .wsf-form input[type="search"].wsf-field, .form--light .wsf-form input[type="time"].wsf-field, .form--light .wsf-form input[type="week"].wsf-field, .form--light .wsf-form input[type="email"].wsf-field, .form--light .wsf-form input[type="number"].wsf-field, .form--light .wsf-form input[type="tel"].wsf-field, .form--light .wsf-form input[type="text"].wsf-field, .form--light .wsf-form input[type="url"].wsf-field, .form--light .wsf-form select.wsf-field, .form--light .wsf-form select.wsf-field:not([multiple]):not([size]), .form--light .wsf-form select.wsf-field ~ .select2-container .select2-selection, .form--light .wsf-form textarea.wsf-field { background-color: var(--f-light-input-background, var(--white)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-light-input-border-color, var(--shade-light)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-light-input-text-color, var(--shade-dark)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--light .wsf-form input[type="date"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="date"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="datetime-local"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="datetime-local"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="file"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="file"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="month"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="month"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="password"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="password"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="search"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="search"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="time"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="time"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="week"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="week"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="email"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="email"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="number"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="number"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="tel"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="tel"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="text"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="text"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form input[type="url"].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="url"].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form select.wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form select.wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form select.wsf-field:not([multiple]):not([size]):hover:not([data-wsf-legal]), .form--light .wsf-form select.wsf-field:not([multiple]):not([size]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form select.wsf-field ~ .select2-container .select2-selection:hover:not([data-wsf-legal]), .form--light .wsf-form select.wsf-field ~ .select2-container .select2-selection:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .wsf-form textarea.wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form textarea.wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-light-input-color-background-hover, var(--white)); border-color: var(--f-light-input-border-color-hover, var(--neutral-light)); color: var(--f-light-input-text-color-hover, var(--neutral-dark)); } .form--light .wsf-form .wsf-grid { margin-inline: calc(-1 * calc(var(--f-grid-gutter, 2rem) / 2)); } .form--light .wsf-form [data-type="texteditor"] { color: var(--f-light-input-text-color, var(--shade-dark)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); } .form--light .wsf-form [data-type="texteditor"] * + :is(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing); } .form--light .wsf-form [data-type="texteditor"] * + p { margin-block-start: var(--paragraph-spacing); } .form--light .wsf-form [data-type="texteditor"] * + ul, .form--light .wsf-form [data-type="texteditor"] * + ol { margin-block-start: var(--list-spacing); } .form--light .wsf-form [data-type="texteditor"] * + li { margin-block-start: var(--list-item-spacing); } .form--light .wsf-form [data-type="html"] { color: var(--f-light-label-text-color, var(--base-dark)); } .form--light .wsf-form select.wsf-field:not([multiple]):not([size]) { padding-inline-end: calc(20px + var(--f-input-padding-x, 1em)); } .form--light .wsf-form select.wsf-field:not([multiple]):not([size]):not(:has(+ span)) { background-image: linear-gradient(45deg, transparent 50%, var(--f-light-select-arrow-color, var(--neutral)) 0), linear-gradient(135deg, var(--f-light-select-arrow-color, var(--neutral)) 50%, transparent 0); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; } .form--light .wsf-form select.wsf-field:invalid { color: hsl(var(--f-light-input-placeholder-hsl, 0 0% 25%) / var(--f-light-input-placeholder-opacity, 0.5)) !important; } .form--light .wsf-form select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow { border-color: var(--f-light-select-arrow-color, var(--neutral)) transparent transparent transparent; right: calc(20px + var(--f-input-padding-x, 1em)); } .form--light .wsf-form select.wsf-field ~ .select2-container .select2-selection--single .select2-selection__rendered, .form--light .wsf-form select.wsf-field ~ .select2-container .select2-selection--single .select2-selection__placeholder, .form--light .wsf-form select.wsf-field ~ .select2-container .select2-selection .select2-search--inline .select2-search__field, .form--light .wsf-form select.wsf-field ~ .select2-container .select2-selection input.select2-search__field::placeholder { color: var(--f-light-input-text-color, var(--shade-dark)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); } .form--light .wsf-form .wsf-select2-dropdown .select2-results .select2-results__option { border-top: 1px solid var(--f-light-input-border-color, var(--shade-light)); font-size: var(--f-input-size, --text-m); } .form--light .wsf-form .wsf-select2-dropdown .select2-results .select2-results__option--highlighted[aria-selected] { background-color: var(--f-light-input-background, var(--white)); color: var(--f-light-input-text-color, var(--shade-dark)); } .form--light .wsf-form.wsf-validated select.wsf-field:not([multiple]):not([size]):invalid, .form--light .wsf-form.wsf-validated input[type="date"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="datetime-local"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="file"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="month"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="password"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="search"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="time"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="week"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="email"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="number"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="tel"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="text"].wsf-field:invalid, .form--light .wsf-form.wsf-validated input[type="url"].wsf-field:invalid, .form--light .wsf-form.wsf-validated select.wsf-field:invalid, .form--light .wsf-form.wsf-validated textarea.wsf-field:invalid { border-color: hsl(var(--danger-h, 354), var(--danger-s, 70%), var(--danger-l, 54%)); color: hsl(var(--danger-h, 354), var(--danger-s, 70%), var(--danger-l, 54%)); } .form--light .wsf-form .wsf-invalid-feedback { color: hsl(var(--danger-h, 354), var(--danger-s, 70%), var(--danger-l, 54%)); } .form--light .wsf-form .iti--allow-dropdown input, .form--light .wsf-form .iti--allow-dropdown input[type="tel"], .form--light .wsf-form .iti--allow-dropdown input[type="text"], .form--light .wsf-form .iti--separate-dial-code input, .form--light .wsf-form .iti--separate-dial-code input[type="tel"], .form--light .wsf-form .iti--separate-dial-code input[type="text"] { padding-inline-start: calc(4.8rem + 6px); } .form--light .wsf-form input.wsf-field::placeholder, .form--light .wsf-form textarea.wsf-field::placeholder { color: var(--f-light-input-placeholder-color, var(--shade-dark)); opacity: var(--f-light-input-placeholder-opacity, 0.5); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--light .wsf-form input.wsf-field:hover::placeholder, .form--light .wsf-form textarea.wsf-field:hover::placeholder { color: var(--f-light-input-placeholder-color-hover, var(--neutral-dark)); } .form--light .wsf-form label.wsf-label, .form--light .wsf-form label { background-color: var(--f-light-label-background-color, ); color: var(--f-light-label-text-color, var(--base-dark)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); } .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder] + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder] + .wsf-input-group-append + label { background-color: var(--f-light-label-background-color, ); color: var(--f-light-label-text-color, var(--base-dark)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); top: calc(var(--f-input-height, 5rem) / 2); transform: translateY(-50%); transition: all 0.3s ease; left: calc(calc(var(--f-grid-gutter, 2rem) / 2) + var(--f-input-padding-x, 1em)); } .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:hover:placeholder-shown:not(:focus) + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:hover:not(:focus):placeholder-shown + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:hover:placeholder-shown:not(:focus) + .wsf-input-group-append + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:hover:not(:focus):placeholder-shown + .wsf-input-group-append + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:hover:placeholder-shown:not(:focus) + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:hover:not(:focus):placeholder-shown + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:hover:placeholder-shown:not(:focus) + .wsf-input-group-append + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:hover:not(:focus):placeholder-shown + .wsf-input-group-append + label { color: var(--f-light-input-placeholder-color-hover, var(--neutral-dark)); } .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + .wsf-input-group-append + label { background-color: var(--f-light-label-background-color, ); color: var(--f-light-label-text-color, var(--base-dark)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); left: calc(calc(var(--f-grid-gutter, 2rem) / 2) + 1em); top: calc(10px + var(--f-input-padding-y, 0.5em)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + label:hover, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + .wsf-input-group-append + label:hover { color: var(--f-light-input-placeholder-color-hover, var(--neutral-dark)); } .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:focus + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:not(:placeholder-shown) + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:focus + .wsf-input-group-append + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:not(:placeholder-shown) + .wsf-input-group-append + label { background-color: var(--f-light-label-inside-background-color, transparent); top: 0; left: calc(calc(var(--f-grid-gutter, 2rem) / 2) + var(--f-input-padding-x, 1em)); } .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:focus + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:focus + .wsf-input-group-append + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:not(:placeholder-shown) + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:not(:placeholder-shown) + .wsf-input-group-append + label { background-color: var(--f-light-label-inside-background-color, transparent); top: 10px; left: calc(calc(var(--f-grid-gutter, 2rem) / 2) + var(--f-input-padding-x, 1em)); } .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:placeholder-shown + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:placeholder-shown + .wsf-input-group-append + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:placeholder-shown + label { opacity: var(--f-light-input-placeholder-opacity, 0.5); } .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:focus:placeholder-shown + label, .form--light .wsf-form .wsf-label-position-inside input.wsf-field[placeholder]:focus:placeholder-shown + .wsf-input-group-append + label, .form--light .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder]:focus:placeholder-shown + label { background-color: var(--f-light-label-inside-background-color, transparent); opacity: 1; } .form--light .wsf-form .wsf-label-position-inside .iti--allow-dropdown input + label, .form--light .wsf-form .wsf-label-position-inside .iti--allow-dropdown input[type="tel"] + label, .form--light .wsf-form .wsf-label-position-inside .iti--allow-dropdown input[type="text"] + label, .form--light .wsf-form .wsf-label-position-inside .iti--separate-dial-code input + label, .form--light .wsf-form .wsf-label-position-inside .iti--separate-dial-code input[type="tel"] + label, .form--light .wsf-form .wsf-label-position-inside .iti--separate-dial-code input[type="text"] + label { left: calc(4.8rem + var(--f-input-padding-x, 1em)); } .form--light .wsf-form .wsf-label-position-inside .iti input.wsf-field[placeholder]:focus + label { background-color: var(--f-light-label-inside-background-color, transparent); opacity: 1; transform: translate(0px, -50%) scale(0.9); top: 0; left: calc(4.8rem + var(--f-input-padding-x, 1em)); } .form--light .wsf-form .wsf-label-position-inside select.wsf-field + label { background-color: var(--f-light-label-inside-background-color, transparent); } .form--light .wsf-form button.wsf-button, .form--light .wsf-form button.wsf-button.wsf-button-primary { background-color: var(--f-light-btn-background, var(--action)); color: var(--f-light-btn-text-color, var(--action-ultra-light)); border-style: var(--f-btn-border-style, solid); border-width: var(--f-btn-border-width, var(--btn-border-width)); border-color: var(--f-light-btn-border-color, var(--action)); border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -webkit-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -moz-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -ms-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -o-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); font-size: var(--f-btn-text-size, --text-m); font-weight: var(--f-btn-font-weight, 400); line-height: var(--f-btn-line-height, 1); padding: var(--f-btn-padding-y, 0.75em) var(--f-btn-padding-x, 1.5em); margin-block-start: var(--f-btn-margin-top, 0); text-align: center; -webkit-text-decoration: var(--f-btn-text-decoration, none); text-decoration: var(--f-btn-text-decoration, none); text-transform: var(--f-btn-text-transform, none); transition: all var(--btn-transition-duration) ease; min-height: var(--f-input-height, 5rem); } .form--light .wsf-form button.wsf-button:hover, .form--light .wsf-form button.wsf-button.wsf-button-primary:hover { background-color: var(--f-light-btn-background-hover, var(--action-hover)); color: var(--f-light-btn-text-color-hover, var(--action-ultra-light)); border-color: var(--f-light-btn-border-color-hover, var(--action-hover)); } .form--light .wsf-form button.wsf-button:hover, .form--light .wsf-form button.wsf-button.wsf-button-primary:hover { background-color: var(--f-light-btn-background-hover, var(--action-hover)); color: var(--f-light-btn-text-color-hover, var(--action-ultra-light)); border-color: var(--f-light-btn-border-color-hover, var(--action-hover)); } .form--light .wsf-form button.wsf-button.wsf-button-secondary { background-color: var(--f-light-secondary-btn-background-color, var(--neutral-light)); color: var(--f-light-secondary-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-light-secondary-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--light .wsf-form button.wsf-button.wsf-button-secondary:hover { background-color: var(--f-light-secondary-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-light-secondary-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-light-secondary-btn-background-color-hover, var(--neutral-ultra-light)); } .form--light .wsf-form button.wsf-button[data-action="wsf-tab_next"] { background-color: var(--f-light-next-btn-background-color, var(--neutral-light)); color: var(--f-light-next-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-light-next-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--light .wsf-form button.wsf-button[data-action="wsf-tab_next"]:hover { background-color: var(--f-light-next-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-light-next-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-light-next-btn-background-color-hover, var(--neutral-ultra-light)); } .form--light .wsf-form button.wsf-button[data-action="wsf-tab_previous"] { background-color: var(--f-light-prev-btn-background-color, var(--shade-light)); color: var(--f-light-prev-btn-text-color, var(--shade-ultra-dark)); border-color: var(--f-light-prev-btn-background-color, var(--shade-light)); transition: all var(--btn-transition-duration) ease; } .form--light .wsf-form button.wsf-button[data-action="wsf-tab_previous"]:hover { background-color: var(--f-light-prev-btn-background-color-hover, var(--shade-ultra-light)); color: var(--f-light-prev-btn-text-color-hover, var(--shade-ultra-dark)); border-color: var(--f-light-prev-btn-background-color-hover, var(--shade-ultra-light)); } .form--light .wsf-form button.wsf-button[data-action="wsf-save"] { background-color: var(--f-light-save-btn-background-color, var(--shade-light)); color: var(--f-light-save-btn-text-color, var(--shade-ultra-dark)); border-color: var(--f-light-save-btn-background-color, var(--shade-light)); transition: all var(--btn-transition-duration) ease; } .form--light .wsf-form button.wsf-button[data-action="wsf-save"]:hover { background-color: var(--f-light-save-btn-background-color-hover, var(--shade-ultra-light)); color: var(--f-light-save-btn-text-color-hover, var(--shade-ultra-dark)); border-color: var(--f-light-save-btn-background-color-hover, var(--shade-ultra-light)); } .form--light .wsf-form button.wsf-button[data-action="wsf-reset"] { background-color: var(--f-light-reset-btn-background-color, var(--shade-light)); color: var(--f-light-reset-btn-text-color, var(--shade-ultra-dark)); border-color: var(--f-light-reset-btn-background-color, var(--shade-light)); transition: all var(--btn-transition-duration) ease; } .form--light .wsf-form button.wsf-button[data-action="wsf-reset"]:hover { background-color: var(--f-light-reset-btn-background-color-hover, var(--shade-ultra-light)); color: var(--f-light-reset-btn-text-color-hover, var(--shade-ultra-dark)); border-color: var(--f-light-reset-btn-background-color-hover, var(--shade-ultra-light)); } .form--light .wsf-form button.wsf-button[data-action="wsf-clear"] { background-color: var(--f-light-clear-btn-background-color, var(--shade-light)); color: var(--f-light-clear-btn-text-color, var(--shade-ultra-dark)); border-color: var(--f-light-clear-btn-background-color, var(--shade-light)); transition: all var(--btn-transition-duration) ease; } .form--light .wsf-form button.wsf-button[data-action="wsf-clear"]:hover { background-color: var(--f-light-clear-btn-background-color-hover, var(--shade-ultra-light)); color: var(--f-light-clear-btn-text-color-hover, var(--shade-ultra-dark)); border-color: var(--f-light-clear-btn-background-color-hover, var(--shade-ultra-light)); } .form--light .wsf-form ul.wsf-group-tabs { background-color: var(--f-light-tab-group-background-color, transparent); padding: var(--f-tab-group-padding-y, 0) var(--f-tab-group-padding-x, 0); margin-block-end: var(--f-tab-group-margin-bottom, 3rem); } .form--light .wsf-form ul.wsf-group-tabs:not(.wsf-steps) { border-block-end: var(--f-tab-group-border-bottom-size, 2px) var(--f-tab-group-border-bottom-style, solid) var(--f-light-tab-group-border-bottom-color, var(--shade-ultra-light)) !important; } .form--light .wsf-form ul.wsf-group-tabs > li { width: var(--f-tab-width, auto); } .form--light .wsf-form ul.wsf-group-tabs > li:not(:last-child) { margin-inline-end: var(--f-tab-margin-x, 0); } .form--light .wsf-form ul.wsf-group-tabs > li > a { border: var(--f-tab-border-size, 0) var(--f-tab-border-style, solid) var(--f-light-tab-border-color, var(--action)) !important; border-radius: var(--f-tab-border-radius, 0); background-color: var(--f-light-tab-background-color, transparent); color: var(--f-light-tab-text-color, var(--shade-dark)); font-size: var(--f-tab-text-size, --text-m); font-weight: var(--f-tab-text-weight, 400); line-height: var(--f-tab-text-line-height, 1); padding: var(--f-tab-padding-y, 0.75em) var(--f-tab-padding-x, 1.5em); text-align: var(--f-tab-text-align, center); text-decoration: var(--f-tab-text-decoration, none); text-transform: var(--f-tab-text-transform, none); } .form--light .wsf-form ul.wsf-group-tabs > li > a.wsf-tab-disabled { color: var(--f-light-tab-inactive-text-color, var(--shade-dark-trans-80)); } .form--light .wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a { border: var(--f-tab-active-border-size, 0) var(--f-tab-active-border-style, solid) var(--f-light-tab-active-border-color, var(--primary)) !important; border-block-end: var(--f-tab-active-border-bottom-size, 3px) var(--f-tab-active-border-style, solid) var(--f-light-tab-active-border-color, var(--primary)) !important; background-color: var(--f-light-tab-active-background-color, transparent) !important; color: var(--f-light-tab-active-text-color, var(--shade-dark)) !important; font-weight: var(--f-tab-active-text-weight, 600); } .form--light .wsf-form ul.wsf-group-tabs > li.wsf-tab-active > a::before { color: var(--f-light-tab-active-text-color, var(--shade-dark)) !important; } .form--light .wsf-form ul.wsf-group-tabs.wsf-steps > li.wsf-tab-active > a { border-block-end: none !important; } .form--light .wsf-form ul.wsf-group-tabs.wsf-steps > li > a::before { background-color: var(--f-light-tab-active-border-color, var(--primary)); border: 1px solid var(--f-light-tab-active-border-color, var(--primary)); } .form--light .wsf-form ul.wsf-group-tabs.wsf-steps > li > a::after { background-color: var(--f-light-tab-active-border-color, var(--primary)); } .form--light .wsf-form ul.wsf-group-tabs.wsf-steps > li > a:not(.wsf-tab-disabled):focus:before { border-color: var(--f-light-tab-active-border-color, var(--primary)); } .form--light .wsf-form .wsf-section > legend, .form--light .wsf-form .wsf-fieldset > legend { border: var(--f-legend-border, none); font-size: var(--f-legend-size, --text-m); font-weight: var(--f-legend-text-weight, 400); line-height: var(--f-legend-line-height, 1.2); margin-block-end: var(--f-legend-margin-bottom, 1em); color: var(--f-light-legend-text-color, var(--base-ultra-dark)); padding: 0; } .form--light .wsf-form .wsf-help { font-size: var(--f-help-size, --text-m); font-weight: var(--f-help-text-weight, 400); line-height: var(--f-help-line-height, 1.4); color: var(--f-light-help-text-color, var(--shade-medium)); margin-block: var(--f-help-margin-block, 0.5em 0); } .form--light .wsf-form .wsf-help-pre { margin-block: var(--f-help-margin-block, 0.5em 0); } .form--light .wsf-form .wsf-field-wrapper:not(.wsf-alert) { margin-block-end: var(--f-field-margin-bottom, 1.5em); } .form--light .wsf-form fieldset:not(:last-child) { margin-block-end: var(--f-fieldset-margin-bottom, 1.5em); } .form--light .wsf-form .wsf-tile { padding-inline: calc(var(--f-grid-gutter, 2rem) / 2); } .form--light .wsf-form input[type="radio"].wsf-field + label.wsf-label { background-color: var(--f-light-option-background-color, transparent); display: inline-block; color: var(--f-light-label-text-color, var(--base-dark)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; background-color: unset; margin: 0; } .form--light .wsf-form input[type="radio"].wsf-field:checked + label.wsf-label:before { background-color: var(--f-light-option-action-color, var(--action)); border-color: var(--f-light-option-border-color, var(--shade-ultra-light)); } .form--light .wsf-form input[type="radio"].wsf-field + label.wsf-label:before { background-color: var(--f-light-option-background-color, transparent); border-color: var(--f-light-option-border-color, var(--shade-ultra-light)); } .form--light .wsf-form input[type="radio"].wsf-image + label.wsf-label { padding-inline-start: 0; } .form--light .wsf-form [data-type="radio"] > div:not(.wsf-grid) > div + div, .form--light .wsf-form [data-type="price_radio"] > div:not(.wsf-grid) > div + div, .form--light .wsf-form [data-type="radio"] fieldset > div:not(.wsf-grid) > div + div, .form--light .wsf-form [data-type="price_radio"] fieldset > div:not(.wsf-grid) > div + div { margin-block-start: var(--f-option-label-spacing); } .form--light .wsf-form [data-type="radio"] > div.wsf-grid, .form--light .wsf-form [data-type="price_radio"] > div.wsf-grid, .form--light .wsf-form [data-type="radio"] fieldset > div.wsf-grid, .form--light .wsf-form [data-type="price_radio"] fieldset > div.wsf-grid { row-gap: var(--f-option-label-spacing); } .form--light .wsf-form input[type="checkbox"].wsf-field + label.wsf-label::before, .form--light .wsf-form input[type="checkbox"].wsf-field + label.wsf-label::after { width: 1.4em; height: 1.4em; transform: none; } .form--light .wsf-form input[type="checkbox"].wsf-field:checked + label.wsf-label::before { background-color: var(--f-light-option-action-color, var(--action)); border-color: var(--f-light-option-border-color, var(--shade-ultra-light)); } .form--light .wsf-form input[type="checkbox"].wsf-field + label.wsf-label::before { background-color: var(--f-light-option-background-color, transparent); border-color: var(--f-light-option-border-color, var(--shade-ultra-light)); } .form--light .wsf-form input[type="checkbox"].wsf-field + label.wsf-label { background-color: var(--f-light-option-background-color, transparent); display: inline-block; color: var(--f-light-label-text-color, var(--base-dark)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; background-color: unset; margin: 0; } .form--light .wsf-form [data-type="checkbox"] > div:not(.wsf-grid) > div + div, .form--light .wsf-form [data-type="price_checkbox"] > div:not(.wsf-grid) > div + div, .form--light .wsf-form [data-type="checkbox"] fieldset > div:not(.wsf-grid) > div + div, .form--light .wsf-form [data-type="price_checkbox"] fieldset > div:not(.wsf-grid) > div + div { margin-block-start: var(--f-option-label-spacing, 0.5em); } .form--light .wsf-form [data-type="checkbox"] > div.wsf-grid, .form--light .wsf-form [data-type="price_checkbox"] > div.wsf-grid, .form--light .wsf-form [data-type="checkbox"] fieldset > div.wsf-grid, .form--light .wsf-form [data-type="price_checkbox"] fieldset > div.wsf-grid { row-gap: var(--f-option-label-spacing); } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-switch + label.wsf-label, .form--light .wsf-form input[type="radio"].wsf-field.wsf-switch + label.wsf-label { -webkit-padding-start: 2.85em; padding-inline-start: 2.85em; } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-switch + label.wsf-label:before, .form--light .wsf-form input[type="radio"].wsf-field.wsf-switch + label.wsf-label:before { width: 2.5em; height: 1.4em; border-radius: 1.2em; } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-switch + label.wsf-label:after, .form--light .wsf-form input[type="radio"].wsf-field.wsf-switch + label.wsf-label:after { height: calc(1.4em - 4px); width: calc(1.4em - 4px); } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-switch:checked + label.wsf-label:after, .form--light .wsf-form input[type="radio"].wsf-field.wsf-switch:checked + label.wsf-label:after { left: calc(2.5em - calc(1.4em - 2px)); } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-image + label.wsf-label, .form--light .wsf-form input[type="radio"].wsf-field.wsf-image + label.wsf-label { -webkit-padding-start: 0; padding-inline-start: 0; } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-button + label.wsf-label, .form--light .wsf-form input[type="radio"].wsf-field.wsf-button + label.wsf-label { background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); } @media (hover: hover) and (pointer: fine) { .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-button + label.wsf-label:hover, .form--light .wsf-form input[type="radio"].wsf-field.wsf-button + label.wsf-label:hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); text-decoration: var(--btn-text-decoration-hover); } } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-button + label.wsf-label:focus, .form--light .wsf-form input[type="radio"].wsf-field.wsf-button + label.wsf-label:focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-button:checked + label.wsf-label, .form--light .wsf-form input[type="radio"].wsf-field.wsf-button:checked + label.wsf-label { background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); } @media (hover: hover) and (pointer: fine) { .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-button:checked + label.wsf-label:hover, .form--light .wsf-form input[type="radio"].wsf-field.wsf-button:checked + label.wsf-label:hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); text-decoration: var(--btn-text-decoration-hover); } } .form--light .wsf-form input[type="checkbox"].wsf-field.wsf-button:checked + label.wsf-label:focus, .form--light .wsf-form input[type="radio"].wsf-field.wsf-button:checked + label.wsf-label:focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } .form--light .wsf-form progress[value]::-webkit-progress-bar { background-color: var(--f-light-progress-background-color, var(--base-ultra-light)); height: var(--f-progress-height, 3rem); display: block; } .form--light .wsf-form progress.wsf-progress { height: var(--f-progress-height, 3rem); border-radius: var(--f-progress-bar-radius, var(--btn-radius)); overflow: hidden; } .form--light .wsf-form progress[value]::-webkit-progress-value { background-color: var(--f-light-progress-bar-fill-color, var(--action)); border-radius: var(--f-progress-bar-radius, var(--btn-radius)); } .form--light .wsf-form .minicolors-theme-ws-form .minicolors-swatch { height: calc(100% - 1px); } .form--light .wsf-form input[type="range"] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ appearance: none; width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ --wsf-color-lower-track: var(--f-light-range-left-track-color, var(--base-ultra-light)); --wsf-color-upper-track: var(--f-light-range-right-track-color, var(--base-ultra-light)); background-color: var(--f-light-range-background-color, var(--neutral-ultra-light)); } .form--light .wsf-form input[type="range"]::-moz-range-track { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ appearance: none; width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ --wsf-color-lower-track: var(--f-light-range-left-track-color, var(--base-ultra-light)); --wsf-color-upper-track: var(--f-light-range-right-track-color, var(--base-ultra-light)); background-color: var(--f-light-range-background-color, var(--neutral-ultra-light)); } .form--light .wsf-form input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background-color: var(--f-light-range-thumb-color, var(--action)); } .form--light .wsf-form input[type="range"]::-moz-range-thumb { -webkit-appearance: none; appearance: none; background-color: var(--f-light-range-thumb-color, var(--action)); } .form--light .wsf-form input[type="range"]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } .form--light .wsf-form input[type="range"]::-ms-track { width: 100%; cursor: pointer; /* Hides the slider so custom styles can be added */ background: transparent; border-color: transparent; color: transparent; } .form--light .wsf-form .wsf-required-wrapper .wsf-text-danger { color: var(--f-light-required-color, var(--action)); } .form--light .wsf-form input[type="text"].wsf-field ~ .dropzone { background-color: var(--f-light-input-background, var(--white)); border-color: var(--f-light-input-border-color, var(--shade-light)); } .form--light .wsf-form input[type="text"].wsf-field ~ .dropzone .dz-message { color: var(--f-light-input-text-color, var(--shade-dark)); } .form--light .wsf-form input[type="file"].wsf-field { padding-inline-start: 1rem; } .form--light .wsf-form input[type="file"].wsf-field::file-selector-button { background: var(--f-light-upload-btn-background-color, var(--neutral-light)) !important; color: var(--f-light-upload-btn-text-color, var(--neutral-ultra-dark)); height: var(--f-input-height, 5rem); position: relative; top: -1px; transition: all var(--btn-transition-duration) ease; } .form--light .wsf-form input[type="file"].wsf-field::file-selector-button:hover { background: var(--f-light-upload-btn-background-color-hover, var(--neutral-ultra-light)) !important; color: var(--f-light-upload-btn-text-color-hover, var(--neutral-ultra-dark)); } .form--light .wsf-form [data-wsf-legal].wsf-field { background-color: var(--f-light-input-background, var(--white)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-light-input-border-color, var(--shade-light)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-light-input-text-color, var(--shade-dark)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--light .wsf-form [data-wsf-legal].wsf-field:hover:not([data-wsf-legal]), .form--light .wsf-form [data-wsf-legal].wsf-field:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-light-input-color-background-hover, var(--white)); border-color: var(--f-light-input-border-color-hover, var(--neutral-light)); color: var(--f-light-input-text-color-hover, var(--neutral-dark)); } .form--light .wsf-form .wsf-alert { background-color: var(--f-light-input-background, var(--white)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-light-input-border-color, var(--shade-light)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-light-input-text-color, var(--shade-dark)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); background-color: var(--base-ultra-light); border-left-width: 0.4rem; margin-block-end: 0; display: inline-block; } .form--light .wsf-form .wsf-alert:hover:not([data-wsf-legal]), .form--light .wsf-form .wsf-alert:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-light-input-color-background-hover, var(--white)); border-color: var(--f-light-input-border-color-hover, var(--neutral-light)); color: var(--f-light-input-text-color-hover, var(--neutral-dark)); } .form--light .wsf-form .wsf-alert.wsf-alert-danger { background-color: hsl(var(--danger-light-h, 354), var(--danger-light-s, 70%), var(--danger-light-l, 85%)); border-color: #DC3545; color: hsl(var(--danger-dark-h, 354), var(--danger-dark-s, 70%), var(--danger-dark-l, 15%)); } .form--light .wsf-form .wsf-alert.wsf-alert-warning { background-color: hsl(var(--warning-light-h, 45), var(--warning-light-s, 100%), var(--warning-light-l, 85%)); border-color: #FFC10A; color: hsl(var(--warning-dark-h, 45), var(--warning-dark-s, 100%), var(--warning-dark-l, 15%)); } .form--light .wsf-form .wsf-alert.wsf-alert-information { background-color: hsl(var(--info-light-h, 188), var(--info-light-s, 77%), var(--info-light-l, 85%)); border-color: var(--info-hex, #18A2B8); color: hsl(var(--info-dark-h, 188), var(--info-dark-s, 77%), var(--info-dark-l, 15%)); } .form--light .wsf-form .wsf-alert.wsf-alert-success { background-color: hsl(var(--success-light-h, 133), var(--success-light-s, 61%), var(--success-light-l, 85%)); border-color: var(--success-hex, #29A745); color: hsl(var(--success-dark-h, 133), var(--success-dark-s, 61%), var(--success-dark-l, 15%)); } .form--light .wsf-form .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .form--light .wsf-form .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, .form--light .wsf-form .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, .form--light .wsf-form .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, .form--light .wsf-form .xdsoft_datetimepicker .xdsoft_calendar td:hover, .form--light .wsf-form .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background: var(--primary) !important; } .form--light .wsf-form input[type="text"].wsf-field ~ canvas { background-color: var(--f-light-input-background, var(--white)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-light-input-border-color, var(--shade-light)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-light-input-text-color, var(--shade-dark)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); padding: 0; height: auto; background: none; } .form--light .wsf-form input[type="text"].wsf-field ~ canvas:hover:not([data-wsf-legal]), .form--light .wsf-form input[type="text"].wsf-field ~ canvas:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-light-input-color-background-hover, var(--white)); border-color: var(--f-light-input-border-color-hover, var(--neutral-light)); color: var(--f-light-input-text-color-hover, var(--neutral-dark)); } .form--light .wsf-form input[type="date"].wsf-field:focus, .form--light .wsf-form input[type="datetime-local"].wsf-field:focus, .form--light .wsf-form input[type="file"].wsf-field:focus, .form--light .wsf-form input[type="month"].wsf-field:focus, .form--light .wsf-form input[type="password"].wsf-field:focus, .form--light .wsf-form input[type="search"].wsf-field:focus, .form--light .wsf-form input[type="time"].wsf-field:focus, .form--light .wsf-form input[type="week"].wsf-field:focus, .form--light .wsf-form input[type="email"].wsf-field:focus, .form--light .wsf-form input[type="number"].wsf-field:focus, .form--light .wsf-form input[type="tel"].wsf-field:focus, .form--light .wsf-form input[type="text"].wsf-field:focus, .form--light .wsf-form input[type="url"].wsf-field:focus, .form--light .wsf-form select.wsf-field:focus, .form--light .wsf-form textarea.wsf-field:focus, .form--light .wsf-form button.wsf-button:focus, .form--light .wsf-form button.wsf-button.wsf-button-primary:focus { border-color: var(--f-light-focus-color, var(--primary)); box-shadow: 0 0 0 4px hsl(var(--f-light-focus-hsl, 92 13% 46%) / var(--f-light-focus-color-opacity, 0.25)); outline: 0; } .form--light input[type="date"], .form--light input[type="datetime-local"], .form--light input[type="month"], .form--light input[type="password"], .form--light input[type="search"], .form--light input[type="time"], .form--light input[type="week"], .form--light input[type="email"], .form--light input[type="number"], .form--light input[type="tel"], .form--light input[type="text"], .form--light input[type="url"], .form--light select:not([multiple]):not([size]), .form--light .bricks-search-form input[type="date"], .form--light .bricks-search-form input[type="datetime-local"], .form--light .bricks-search-form input[type="month"], .form--light .bricks-search-form input[type="password"], .form--light .bricks-search-form input[type="search"], .form--light .bricks-search-form input[type="time"], .form--light .bricks-search-form input[type="week"], .form--light .bricks-search-form input[type="email"], .form--light .bricks-search-form input[type="number"], .form--light .bricks-search-form input[type="tel"], .form--light .bricks-search-form input[type="text"], .form--light .bricks-search-form input[type="url"], .form--light .bricks-search-form select:not([multiple]):not([size]), .form--light .brxe-post-comments input[type="date"], .form--light .brxe-post-comments input[type="datetime-local"], .form--light .brxe-post-comments input[type="month"], .form--light .brxe-post-comments input[type="password"], .form--light .brxe-post-comments input[type="search"], .form--light .brxe-post-comments input[type="time"], .form--light .brxe-post-comments input[type="week"], .form--light .brxe-post-comments input[type="email"], .form--light .brxe-post-comments input[type="number"], .form--light .brxe-post-comments input[type="tel"], .form--light .brxe-post-comments input[type="text"], .form--light .brxe-post-comments input[type="url"], .form--light .brxe-post-comments select:not([multiple]):not([size]) { height: var(--f-input-height, 5rem); } .form--light .input, .form--light input:not([type="submit"]), .form--light select, .form--light textarea, .form--light .bricks-search-form .input, .form--light .bricks-search-form input:not([type="submit"]), .form--light .bricks-search-form select, .form--light .bricks-search-form textarea, .form--light .brxe-post-comments .input, .form--light .brxe-post-comments input:not([type="submit"]), .form--light .brxe-post-comments select, .form--light .brxe-post-comments textarea { background-color: var(--f-light-input-background, var(--white)); border-top-width: var(--f-input-border-top-size, 0.1rem); border-right-width: var(--f-input-border-right-size, 0.1rem); border-bottom-width: var(--f-input-border-bottom-size, 0.1rem); border-left-width: var(--f-input-border-left-size, 0.1rem); border-style: var(--f-input-border-style, solid); border-color: var(--f-light-input-border-color, var(--shade-light)); border-radius: var(--f-input-border-radius, var(--btn-radius)); color: var(--f-light-input-text-color, var(--shade-dark)); font-size: var(--f-input-size, --text-m); font-weight: var(--f-input-font-weight, 400); line-height: var(--f-input-line-height, 1); padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em); -webkit-border-radius: var(--f-input-border-radius, var(--btn-radius)); -moz-border-radius: var(--f-input-border-radius, var(--btn-radius)); -ms-border-radius: var(--f-input-border-radius, var(--btn-radius)); -o-border-radius: var(--f-input-border-radius, var(--btn-radius)); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--light .input:hover:not([data-wsf-legal]), .form--light .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light select:hover:not([data-wsf-legal]), .form--light select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light textarea:hover:not([data-wsf-legal]), .form--light textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form .input:hover:not([data-wsf-legal]), .form--light .bricks-search-form .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light .bricks-search-form input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form select:hover:not([data-wsf-legal]), .form--light .bricks-search-form select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form textarea:hover:not([data-wsf-legal]), .form--light .bricks-search-form textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments .input:hover:not([data-wsf-legal]), .form--light .brxe-post-comments .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light .brxe-post-comments input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments select:hover:not([data-wsf-legal]), .form--light .brxe-post-comments select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments textarea:hover:not([data-wsf-legal]), .form--light .brxe-post-comments textarea:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--f-light-input-color-background-hover, var(--white)); border-color: var(--f-light-input-border-color-hover, var(--neutral-light)); color: var(--f-light-input-text-color-hover, var(--neutral-dark)); } .form--light .input::placeholder, .form--light input:not([type="submit"])::placeholder, .form--light select::placeholder, .form--light textarea::placeholder, .form--light .bricks-search-form .input::placeholder, .form--light .bricks-search-form input:not([type="submit"])::placeholder, .form--light .bricks-search-form select::placeholder, .form--light .bricks-search-form textarea::placeholder, .form--light .brxe-post-comments .input::placeholder, .form--light .brxe-post-comments input:not([type="submit"])::placeholder, .form--light .brxe-post-comments select::placeholder, .form--light .brxe-post-comments textarea::placeholder { color: var(--f-light-input-placeholder-color, var(--shade-dark)); opacity: var(--f-light-input-placeholder-opacity, 0.5); transition: var(--transition-duration) var(--transition-timing) var(--transition-delay); } .form--light .input:hover::placeholder, .form--light input:not([type="submit"]):hover::placeholder, .form--light select:hover::placeholder, .form--light textarea:hover::placeholder, .form--light .bricks-search-form .input:hover::placeholder, .form--light .bricks-search-form input:not([type="submit"]):hover::placeholder, .form--light .bricks-search-form select:hover::placeholder, .form--light .bricks-search-form textarea:hover::placeholder, .form--light .brxe-post-comments .input:hover::placeholder, .form--light .brxe-post-comments input:not([type="submit"]):hover::placeholder, .form--light .brxe-post-comments select:hover::placeholder, .form--light .brxe-post-comments textarea:hover::placeholder { color: var(--f-light-input-placeholder-color-hover, var(--neutral-dark)); } .form--light .bricks-button, .form--light .bricks-search-form .bricks-button, .form--light .brxe-post-comments .bricks-button { background-color: var(--f-light-btn-background, var(--action)); color: var(--f-light-btn-text-color, var(--action-ultra-light)); border-style: var(--f-btn-border-style, solid); border-width: var(--f-btn-border-width, var(--btn-border-width)); border-color: var(--f-light-btn-border-color, var(--action)); border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -webkit-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -moz-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -ms-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); -o-border-radius: var(--f-btn-border-radius, var(--f-light-input-radius)); font-size: var(--f-btn-text-size, --text-m); font-weight: var(--f-btn-font-weight, 400); line-height: var(--f-btn-line-height, 1); padding: var(--f-btn-padding-y, 0.75em) var(--f-btn-padding-x, 1.5em); margin-block-start: var(--f-btn-margin-top, 0); text-align: center; -webkit-text-decoration: var(--f-btn-text-decoration, none); text-decoration: var(--f-btn-text-decoration, none); text-transform: var(--f-btn-text-transform, none); transition: all var(--btn-transition-duration) ease; min-height: var(--f-input-height, 5rem); } .form--light .bricks-button:hover, .form--light .bricks-search-form .bricks-button:hover, .form--light .brxe-post-comments .bricks-button:hover { background-color: var(--f-light-btn-background-hover, var(--action-hover)); color: var(--f-light-btn-text-color-hover, var(--action-ultra-light)); border-color: var(--f-light-btn-border-color-hover, var(--action-hover)); } .form--light .bricks-button.bricks-background-secondary, .form--light .bricks-search-form .bricks-button.bricks-background-secondary, .form--light .brxe-post-comments .bricks-button.bricks-background-secondary { background-color: var(--f-light-secondary-btn-background-color, var(--neutral-light)); color: var(--f-light-secondary-btn-text-color, var(--neutral-ultra-dark)); border-color: var(--f-light-secondary-btn-background-color, var(--neutral-light)); } .form--light .bricks-button.bricks-background-secondary:hover, .form--light .bricks-search-form .bricks-button.bricks-background-secondary:hover, .form--light .brxe-post-comments .bricks-button.bricks-background-secondary:hover { background-color: var(--f-light-secondary-btn-background-color-hover, var(--neutral-ultra-light)); color: var(--f-light-secondary-btn-text-color-hover, var(--neutral-ultra-dark)); border-color: var(--f-light-secondary-btn-background-color-hover, var(--neutral-ultra-light)); } .form--light .form-group, .form--light .bricks-search-form .form-group, .form--light .brxe-post-comments .form-group { padding: 0; } .form--light .form-group:not(.submit-button-wrapper), .form--light .bricks-search-form .form-group:not(.submit-button-wrapper), .form--light .brxe-post-comments .form-group:not(.submit-button-wrapper) { margin-block-end: var(--f-field-margin-bottom, 1.5em); } .form--light .message, .form--light .bricks-search-form .message, .form--light .brxe-post-comments .message { margin-block-start: var(--f-field-margin-bottom, 1.5em); } .form--light label:not(.ff-el-form-check-label), .form--light div.label, .form--light .bricks-search-form label:not(.ff-el-form-check-label), .form--light .bricks-search-form div.label, .form--light .brxe-post-comments label:not(.ff-el-form-check-label), .form--light .brxe-post-comments div.label { background-color: var(--f-light-label-background-color, ); color: var(--f-light-label-text-color, var(--base-dark)); font-size: var(--f-label-size, --text-m); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); margin-block-end: var(--f-label-margin-bottom, 0.5em); text-transform: var(--f-label-text-transform, none); padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0); } .form--light .required:after, .form--light .bricks-search-form .required:after, .form--light .brxe-post-comments .required:after { color: var(--f-light-required-color, var(--action)); } .form--light input[type="file"], .form--light .bricks-search-form input[type="file"], .form--light .brxe-post-comments input[type="file"] { padding: 0; } .form--light .choose-files, .form--light .bricks-search-form .choose-files, .form--light .brxe-post-comments .choose-files { padding: var(--f-input-padding-y 1em, 0.5em 1em); color: var(--f-light-upload-btn-text-color, var(--neutral-ultra-dark)); font-size: var(--text-s-pure, 1.42rem); font-size: calc(var(--f-label-size-min, 1.4) * 1rem + (var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) * ((100vw - 32rem) / 104.6))); font-size: clamp(var(--f-label-size-min, 1.4) * 1rem, calc(var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) / 104.6 * 100vw + var(--f-label-size-min, 1.4) - var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) / 104.6 * 32 * 1rem), var(--f-label-size-max, 1.6) * 1rem); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); background: var(--f-light-upload-btn-background-color, var(--neutral-light)); transition: all var(--btn-transition-duration) ease; } .form--light .choose-files:hover, .form--light .bricks-search-form .choose-files:hover, .form--light .brxe-post-comments .choose-files:hover { color: var(--f-light-upload-btn-text-color-hover, var(--neutral-ultra-dark)); background: var(--f-light-upload-btn-background-color-hover, var(--neutral-ultra-light)); } .form--light .file-result.show, .form--light .bricks-search-form .file-result.show, .form--light .brxe-post-comments .file-result.show { font-size: var(--text-s-pure, 1.42rem); font-size: calc(var(--f-label-size-min, 1.4) * 1rem + (var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) * ((100vw - 32rem) / 104.6))); font-size: clamp(var(--f-label-size-min, 1.4) * 1rem, calc(var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) / 104.6 * 100vw + var(--f-label-size-min, 1.4) - var(--f-label-size-max, 1.6) - var(--f-label-size-min, 1.4) / 104.6 * 32 * 1rem), var(--f-label-size-max, 1.6) * 1rem); font-weight: var(--f-label-font-weight, 400); line-height: var(--f-label-line-height, 1); transition: all var(--btn-transition-duration) ease; } .form--light .file-result.show .remove:hover, .form--light .bricks-search-form .file-result.show .remove:hover, .form--light .brxe-post-comments .file-result.show .remove:hover { background-color: var(--f-light-btn-background-hover, var(--action-hover)); color: var(--f-light-btn-text-color-hover, var(--action-ultra-light)); border-color: var(--f-light-btn-border-color-hover, var(--action-hover)); } .form--light input[type="radio"], .form--light .bricks-search-form input[type="radio"], .form--light .brxe-post-comments input[type="radio"] { accent-color: var(--f-light-option-action-color, var(--action)); } .form--light input[type="radio"] + label, .form--light .bricks-search-form input[type="radio"] + label, .form--light .brxe-post-comments input[type="radio"] + label { background-color: var(--f-light-option-background-color, transparent); display: inline-block; color: var(--f-light-label-text-color, var(--base-dark)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; -webkit-padding-start: inherit; padding-inline-start: inherit; margin: 0; } .form--light .options-wrapper li, .form--light .bricks-search-form .options-wrapper li, .form--light .brxe-post-comments .options-wrapper li { position: relative; } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) { width: 0px; height: 0px; padding: 0; margin: 0; opacity: 0; position: absolute; } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus { outline: none; } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before { border-color: var(--f-light-focus-color, var(--primary)); box-shadow: 0 0 0 4px hsl(var(--f-light-focus-hsl, 92 13% 46%) / var(--f-light-focus-color-opacity, 0.25)); outline: 0; } .form--light input[type="checkbox"] + label, .form--light .bricks-search-form input[type="checkbox"] + label, .form--light .brxe-post-comments input[type="checkbox"] + label { background-color: var(--f-light-option-background-color, transparent); display: inline-block; color: var(--f-light-label-text-color, var(--base-dark)); font-family: inherit; font-size: var(--f-option-label-size, --text-m); font-weight: var(--f-option-label-font-weight, 400); line-height: var(--f-option-label-line-height, 1.4); margin: 0 0 10px; -webkit-padding-start: 1.75em; padding-inline-start: 1.75em; background-color: unset; display: block; position: relative; margin: 0; cursor: pointer; } .form--light input[type="checkbox"]:hover + label:before, .form--light .bricks-search-form input[type="checkbox"]:hover + label:before, .form--light .brxe-post-comments input[type="checkbox"]:hover + label:before { background: var(--f-light-option-action-color, var(--action)); box-shadow: inset 0px 0px 0px 2px transparent; } .form--light input[type="checkbox"] + label:before, .form--light .bricks-search-form input[type="checkbox"] + label:before, .form--light .brxe-post-comments input[type="checkbox"] + label:before { content: ""; display: block; width: 1.4em; height: 1.4em; border: 1px solid var(--f-light-option-border-color, var(--shade-ultra-light)); border-radius: 0.2em; position: absolute; inset-block-start: 0; inset-inline-start: 0; -webkit-transition: all 0.2s, background 0.2s ease-in-out; transition: all 0.2s, background 0.2s ease-in-out; background-color: var(--f-light-option-background-color, transparent); } .form--light input[type="checkbox"]:checked + label:before, .form--light .bricks-search-form input[type="checkbox"]:checked + label:before, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--action); box-shadow: 0 0 0 1px var(--f-light-option-border-color, var(--shade-ultra-light)); } .form--light input[type="checkbox"]:checked + label:before, .form--light .bricks-search-form input[type="checkbox"]:checked + label:before, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--f-light-option-action-color, var(--action)); box-shadow: 0 0 0 1px var(--f-light-option-border-color, var(--shade-ultra-light)); } .form--light input[type="checkbox"]:checked + label:after, .form--light .bricks-search-form input[type="checkbox"]:checked + label:after, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:after { content: ""; cursor: pointer; display: inline-block; height: 1.5em; width: 1.5em; position: absolute; inset-block-start: 0; inset-inline-start: 0; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") 50% no-repeat; background-size: 50%; } .form--light select, .form--light .bricks-search-form select, .form--light .brxe-post-comments select { background-image: none; } .form--light select:not(:has(+ span)), .form--light .bricks-search-form select:not(:has(+ span)), .form--light .brxe-post-comments select:not(:has(+ span)) { background-image: linear-gradient(45deg, transparent 50%, var(--f-light-select-arrow-color, var(--neutral)) 0), linear-gradient(135deg, var(--f-light-select-arrow-color, var(--neutral)) 50%, transparent 0); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; } .form--light .options-wrapper li + li, .form--light .bricks-search-form .options-wrapper li + li, .form--light .brxe-post-comments .options-wrapper li + li { margin-block-start: var(--f-option-label-spacing, 0.5em); } main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_calendar td:hover, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background: var(--primary) !important; } #shadow-host-companion { padding: 0; } .border:where(:not(:is(figure, picture))), .border:where(figure, picture) > img { border: var(--border); border-radius: var(--radius); } .border-light:where(:not(:is(figure, picture))), .border-light:where(figure, picture) > img { border: var(--border-light); border-radius: var(--radius); } .border-dark:where(:not(:is(figure, picture))), .border-dark:where(figure, picture) > img { border: var(--border-dark); border-radius: var(--radius); } .border-top:where(:not(:is(figure, picture))), .border-top:where(figure, picture) > img { border-block-start: var(--border); } .border-top--light:where(:not(:is(figure, picture))), .border-top--light:where(figure, picture) > img { border-block-start: var(--border-light); } .border-top--dark:where(:not(:is(figure, picture))), .border-top--dark:where(figure, picture) > img { border-block-start: var(--border-dark); } .border-bottom:where(:not(:is(figure, picture))), .border-bottom:where(figure, picture) > img { border-block-end: var(--border); } .border-bottom--light:where(:not(:is(figure, picture))), .border-bottom--light:where(figure, picture) > img { border-block-end: var(--border-light); } .border-bottom--dark:where(:not(:is(figure, picture))), .border-bottom--dark:where(figure, picture) > img { border-block-end: var(--border-dark); } .border-left:where(:not(:is(figure, picture))), .border-left:where(figure, picture) > img { border-inline-start: var(--border); } .border-left--light:where(:not(:is(figure, picture))), .border-left--light:where(figure, picture) > img { border-inline-start: var(--border-light); } .border-left--dark:where(:not(:is(figure, picture))), .border-left--dark:where(figure, picture) > img { border-inline-start: var(--border-dark); } .border-right:where(:not(:is(figure, picture))), .border-right:where(figure, picture) > img { border-inline-end: var(--border); } .border-right--light:where(:not(:is(figure, picture))), .border-right--light:where(figure, picture) > img { border-inline-end: var(--border-light); } .border-right--dark:where(:not(:is(figure, picture))), .border-right--dark:where(figure, picture) > img { border-inline-end: var(--border-dark); } .border-block:where(:not(:is(figure, picture))), .border-block:where(figure, picture) > img { border-block: var(--border); } .border-block--light:where(:not(:is(figure, picture))), .border-block--light:where(figure, picture) > img { border-block: var(--border-light); } .border-block--dark:where(:not(:is(figure, picture))), .border-block--dark:where(figure, picture) > img { border-block: var(--border-dark); } .border-inline:where(:not(:is(figure, picture))), .border-inline:where(figure, picture) > img { border-inline: var(--border); } .border-inline--light:where(:not(:is(figure, picture))), .border-inline--light:where(figure, picture) > img { border-inline: var(--border-light); } .border-inline--dark:where(:not(:is(figure, picture))), .border-inline--dark:where(figure, picture) > img { border-inline: var(--border-dark); } .radius { border-radius: var(--radius); } .radius--50.radius--50, .rounded--50.rounded--50 { border-radius: var(--radius-50); } .radius--circle.radius--circle, .rounded--circle.rounded--circle { border-radius: var(--radius-circle); } .radius--none.radius--none, .rounded--none.rounded--none { border-radius: var(--radius-none); } .radius--xs.radius--xs, .rounded--xs.rounded--xs { border-radius: var(--radius-xs); } .radius--s.radius--s, .rounded--s.rounded--s { border-radius: var(--radius-s); } .radius--m.radius--m, .rounded--m.rounded--m { border-radius: var(--radius-m); } .radius--l.radius--l, .rounded--l.rounded--l { border-radius: var(--radius-l); } .radius--xl.radius--xl, .rounded--xl.rounded--xl { border-radius: var(--radius-xl); } .radius--xxl.radius--xxl, .rounded--xxl.rounded--xxl { border-radius: var(--radius-xxl); } .acss-auto-radius :where(img):not(header img), .acss-auto-radius :where(figure:not(figure:has(img))) { border-radius: var(--radius); } .divider-bottom.divider-bottom { position: relative; overflow: visible; margin-block-end: calc(var(--divider-gap) * 2); } .divider-bottom.divider-bottom::after { inset-block-end: calc(var(--divider-gap) * -1 - var(--divider-size)); } .divider-bottom.divider-bottom::after { content: ""; display: block; position: absolute; inset-inline-start: 0; inline-size: var(--divider-inline-size); border-block-end: var(--divider); } .divider-top.divider-top { position: relative; overflow: visible; margin-block-start: calc(var(--divider-gap) * 2); } .divider-top.divider-top::after { inset-block-start: calc(var(--divider-gap) * -1 - var(--divider-size)); } .divider-top.divider-top::after { content: ""; display: block; position: absolute; inset-inline-start: 0; inline-size: var(--divider-inline-size); border-block-end: var(--divider); } .divider--all.divider--all { row-gap: 0; } .divider--all.divider--all > *:not(:last-child) { position: relative; overflow: visible; margin-block-end: calc(var(--divider-gap) * 2); } .divider--all.divider--all > *:not(:last-child)::after { inset-block-end: calc(var(--divider-gap) * -1 - var(--divider-size)); } .divider--all.divider--all > *:not(:last-child)::after { content: ""; display: block; position: absolute; inset-inline-start: 0; inline-size: var(--divider-inline-size); border-block-end: var(--divider); } .transition { transition: var(--transition); } .fade--block { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%); } .fade--inline { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%); } .fade--top { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--fade-amount)); mask-image: linear-gradient(to bottom, transparent 0%, black var(--fade-amount)); } .fade--right { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to left, transparent 0%, black var(--fade-amount)); mask-image: linear-gradient(to left, transparent 0%, black var(--fade-amount)); } .fade--bottom { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to top, transparent 0%, black var(--fade-amount)); mask-image: linear-gradient(to top, transparent 0%, black var(--fade-amount)); } .fade--left { --fade-amount: 25%; -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount)); mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount)); }