/* ██╗██╗ ██████╗ █████╗ ██╗ ██╗████████╗██╗ ██████╗ ███╗ ██╗ ██╗██╗ ██║██║ ██╔════╝██╔══██╗██║ ██║╚══██╔══╝██║██╔═══██╗████╗ ██║ ██║██║ ██║██║ ██║ ███████║██║ ██║ ██║ ██║██║ ██║██╔██╗ ██║ ██║██║ ╚═╝╚═╝ ██║ ██╔══██║██║ ██║ ██║ ██║██║ ██║██║╚██╗██║ ╚═╝╚═╝ ██╗██╗ ╚██████╗██║ ██║╚██████╔╝ ██║ ██║╚██████╔╝██║ ╚████║ ██╗██╗ ╚═╝╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚═╝╚═╝ This component is for Design Systems Engineering team use only. Its content is unsupported for project implementation and may be withdrawn anytime. Refer to official documentation for current guidance at https://sfdc.co/slds-plus-playbook */ @layer deprecated, defaults, shared, theme, component; @layer defaults { :where(html) { --sds-g-spacing-1: var(--slds-g-spacing-1); --slds-g-spacing-1: 0.25rem; --sds-g-spacing-2: var(--slds-g-spacing-2); --slds-g-spacing-2: 0.5rem; --sds-g-spacing-3: var(--slds-g-spacing-3); --slds-g-spacing-3: 0.75rem; --sds-g-spacing-4: var(--slds-g-spacing-4); --slds-g-spacing-4: 1rem; --sds-g-spacing-5: var(--slds-g-spacing-5); --slds-g-spacing-5: 1.5rem; --sds-g-spacing-6: var(--slds-g-spacing-6); --slds-g-spacing-6: 2rem; --sds-g-spacing-7: var(--slds-g-spacing-7); --slds-g-spacing-7: 2.5rem; --sds-g-spacing-8: var(--slds-g-spacing-8); --slds-g-spacing-8: 3rem; --sds-g-spacing-9: var(--slds-g-spacing-9); --slds-g-spacing-9: 3.5rem; --sds-g-spacing-10: var(--slds-g-spacing-10); --slds-g-spacing-10: 4rem; --sds-g-spacing-11: var(--slds-g-spacing-11); --slds-g-spacing-11: 4.5rem; --sds-g-spacing-12: var(--slds-g-spacing-12); --slds-g-spacing-12: 5rem; --sds-g-spacing-var-1: var(--slds-g-spacing-var-1); --slds-g-spacing-var-1: var(--slds-g-spacing-1); --sds-g-spacing-var-2: var(--slds-g-spacing-var-2); --slds-g-spacing-var-2: var(--slds-g-spacing-2); --sds-g-spacing-var-3: var(--slds-g-spacing-var-3); --slds-g-spacing-var-3: var(--slds-g-spacing-3); --sds-g-spacing-var-4: var(--slds-g-spacing-var-4); --slds-g-spacing-var-4: var(--slds-g-spacing-4); --sds-g-spacing-var-5: var(--slds-g-spacing-var-5); --slds-g-spacing-var-5: var(--slds-g-spacing-5); --sds-g-spacing-var-6: var(--slds-g-spacing-var-6); --slds-g-spacing-var-6: var(--slds-g-spacing-6); --sds-g-spacing-var-7: var(--slds-g-spacing-var-7); --slds-g-spacing-var-7: var(--slds-g-spacing-7); --sds-g-spacing-var-8: var(--slds-g-spacing-var-8); --slds-g-spacing-var-8: var(--slds-g-spacing-8); --sds-g-spacing-var-9: var(--slds-g-spacing-var-9); --slds-g-spacing-var-9: var(--slds-g-spacing-9); --sds-g-spacing-var-10: var(--slds-g-spacing-var-10); --slds-g-spacing-var-10: var(--slds-g-spacing-10); --sds-g-spacing-var-11: var(--slds-g-spacing-var-11); --slds-g-spacing-var-11: var(--slds-g-spacing-11); --sds-g-spacing-var-12: var(--slds-g-spacing-var-12); --slds-g-spacing-var-12: var(--slds-g-spacing-12); --sds-g-spacing-var-block-1: var(--slds-g-spacing-var-block-1); --slds-g-spacing-var-block-1: var(--slds-g-spacing-1); --sds-g-spacing-var-block-2: var(--slds-g-spacing-var-block-2); --slds-g-spacing-var-block-2: var(--slds-g-spacing-2); --sds-g-spacing-var-block-3: var(--slds-g-spacing-var-block-3); --slds-g-spacing-var-block-3: var(--slds-g-spacing-3); --sds-g-spacing-var-block-4: var(--slds-g-spacing-var-block-4); --slds-g-spacing-var-block-4: var(--slds-g-spacing-4); --sds-g-spacing-var-block-5: var(--slds-g-spacing-var-block-5); --slds-g-spacing-var-block-5: var(--slds-g-spacing-5); --sds-g-spacing-var-block-6: var(--slds-g-spacing-var-block-6); --slds-g-spacing-var-block-6: var(--slds-g-spacing-6); --sds-g-spacing-var-block-7: var(--slds-g-spacing-var-block-7); --slds-g-spacing-var-block-7: var(--slds-g-spacing-7); --sds-g-spacing-var-block-8: var(--slds-g-spacing-var-block-8); --slds-g-spacing-var-block-8: var(--slds-g-spacing-8); --sds-g-spacing-var-block-9: var(--slds-g-spacing-var-block-9); --slds-g-spacing-var-block-9: var(--slds-g-spacing-9); --sds-g-spacing-var-block-10: var(--slds-g-spacing-var-block-10); --slds-g-spacing-var-block-10: var(--slds-g-spacing-10); --sds-g-spacing-var-block-11: var(--slds-g-spacing-var-block-11); --slds-g-spacing-var-block-11: var(--slds-g-spacing-11); --sds-g-spacing-var-block-12: var(--slds-g-spacing-var-block-12); --slds-g-spacing-var-block-12: var(--slds-g-spacing-12); --sds-g-spacing-var-inline-1: var(--slds-g-spacing-var-inline-1); --slds-g-spacing-var-inline-1: var(--slds-g-spacing-1); --sds-g-spacing-var-inline-2: var(--slds-g-spacing-var-inline-2); --slds-g-spacing-var-inline-2: var(--slds-g-spacing-2); --sds-g-spacing-var-inline-3: var(--slds-g-spacing-var-inline-3); --slds-g-spacing-var-inline-3: var(--slds-g-spacing-3); --sds-g-spacing-var-inline-4: var(--slds-g-spacing-var-inline-4); --slds-g-spacing-var-inline-4: var(--slds-g-spacing-4); --sds-g-spacing-var-inline-5: var(--slds-g-spacing-var-inline-5); --slds-g-spacing-var-inline-5: var(--slds-g-spacing-5); --sds-g-spacing-var-inline-6: var(--slds-g-spacing-var-inline-6); --slds-g-spacing-var-inline-6: var(--slds-g-spacing-6); --sds-g-spacing-var-inline-7: var(--slds-g-spacing-var-inline-7); --slds-g-spacing-var-inline-7: var(--slds-g-spacing-7); --sds-g-spacing-var-inline-8: var(--slds-g-spacing-var-inline-8); --slds-g-spacing-var-inline-8: var(--slds-g-spacing-8); --sds-g-spacing-var-inline-9: var(--slds-g-spacing-var-inline-9); --slds-g-spacing-var-inline-9: var(--slds-g-spacing-9); --sds-g-spacing-var-inline-10: var(--slds-g-spacing-var-inline-10); --slds-g-spacing-var-inline-10: var(--slds-g-spacing-10); --sds-g-spacing-var-inline-11: var(--slds-g-spacing-var-inline-11); --slds-g-spacing-var-inline-11: var(--slds-g-spacing-11); --sds-g-spacing-var-inline-12: var(--slds-g-spacing-var-inline-12); --slds-g-spacing-var-inline-12: var(--slds-g-spacing-12); --sds-g-sizing-border-1: var(--slds-g-sizing-border-1); --slds-g-sizing-border-1: 1px; --sds-g-sizing-border-2: var(--slds-g-sizing-border-2); --slds-g-sizing-border-2: 2px; --sds-g-sizing-border-3: var(--slds-g-sizing-border-3); --slds-g-sizing-border-3: 3px; --sds-g-sizing-border-4: var(--slds-g-sizing-border-4); --slds-g-sizing-border-4: 4px; --sds-g-sizing-1: var(--slds-g-sizing-1); --slds-g-sizing-1: 0.125rem; --sds-g-sizing-2: var(--slds-g-sizing-2); --slds-g-sizing-2: 0.25rem; --sds-g-sizing-3: var(--slds-g-sizing-3); --slds-g-sizing-3: 0.5rem; --sds-g-sizing-4: var(--slds-g-sizing-4); --slds-g-sizing-4: 0.75rem; --sds-g-sizing-5: var(--slds-g-sizing-5); --slds-g-sizing-5: 1rem; --sds-g-sizing-6: var(--slds-g-sizing-6); --slds-g-sizing-6: 1.25rem; --sds-g-sizing-7: var(--slds-g-sizing-7); --slds-g-sizing-7: 1.5rem; --sds-g-sizing-8: var(--slds-g-sizing-8); --slds-g-sizing-8: 1.75rem; --sds-g-sizing-9: var(--slds-g-sizing-9); --slds-g-sizing-9: 2rem; --sds-g-sizing-10: var(--slds-g-sizing-10); --slds-g-sizing-10: 3rem; --sds-g-sizing-11: var(--slds-g-sizing-11); --slds-g-sizing-11: 4rem; --sds-g-sizing-12: var(--slds-g-sizing-12); --slds-g-sizing-12: 5rem; --sds-g-sizing-13: var(--slds-g-sizing-13); --slds-g-sizing-13: 10rem; --sds-g-sizing-14: var(--slds-g-sizing-14); --slds-g-sizing-14: 15rem; --sds-g-sizing-15: var(--slds-g-sizing-15); --slds-g-sizing-15: 20rem; --sds-g-sizing-16: var(--slds-g-sizing-16); --slds-g-sizing-16: 30rem; --sds-g-sizing-content-1: var(--slds-g-sizing-content-1); --slds-g-sizing-content-1: 20ch; --sds-g-sizing-content-2: var(--slds-g-sizing-content-2); --slds-g-sizing-content-2: 45ch; --sds-g-sizing-content-3: var(--slds-g-sizing-content-3); --slds-g-sizing-content-3: 60ch; --sds-g-sizing-heading-1: var(--slds-g-sizing-heading-1); --slds-g-sizing-heading-1: 20ch; --sds-g-sizing-heading-2: var(--slds-g-sizing-heading-2); --slds-g-sizing-heading-2: 25ch; --sds-g-sizing-heading-3: var(--slds-g-sizing-heading-3); --slds-g-sizing-heading-3: 35ch; --sds-g-shadow-1: var(--slds-g-shadow-1); --slds-g-shadow-1: 0px 0px 1.5px 0px #00000017, 0px 1.4px 1.5px 0px #00000017, 0px -1px 1px 0px #00000009; --sds-g-shadow-2: var(--slds-g-shadow-2); --slds-g-shadow-2: 0px 0px 3px 0px #00000016, 0px 2.8px 3px 0px #00000016, 0px -1px 1.2px 0px #00000009; --sds-g-shadow-3: var(--slds-g-shadow-3); --slds-g-shadow-3: 0px 0px 4.5px 0px #00000014, 0px 4.2px 4.5px 0px #00000017, 0px -1px 1.44px 0px #00000008; --sds-g-shadow-4: var(--slds-g-shadow-4); --slds-g-shadow-4: 0px 0px 6.75px 0px #00000012, 0px 6.3px 6.75px 0px #00000012, 0px -1px 1.7px 0px #00000007; --sds-g-shadow-5: var(--slds-g-shadow-5); --slds-g-shadow-5: var(--slds-g-shadow-4); --sds-g-shadow-6: var(--slds-g-shadow-6); --slds-g-shadow-6: var(--slds-g-shadow-4); --sds-g-shadow-inverse-1: var(--slds-g-shadow-inverse-1); --slds-g-shadow-inverse-1: 0 0 3px #f3f3f3; --sds-g-ratio-square: var(--slds-g-ratio-square); --slds-g-ratio-square: 1; --sds-g-ratio-landscape: var(--slds-g-ratio-landscape); --slds-g-ratio-landscape: 4/3; --sds-g-ratio-portrait: var(--slds-g-ratio-portrait); --slds-g-ratio-portrait: 3/4; --sds-g-ratio-wide: var(--slds-g-ratio-wide); --slds-g-ratio-wide: 16/9; --sds-g-ratio-ultrawide: var(--slds-g-ratio-ultrawide); --slds-g-ratio-ultrawide: 18/5; --sds-g-radius-border-1: var(--slds-g-radius-border-1); --slds-g-radius-border-1: 0.25rem; --sds-g-radius-border-2: var(--slds-g-radius-border-2); --slds-g-radius-border-2: 0.5rem; --sds-g-radius-border-3: var(--slds-g-radius-border-3); --slds-g-radius-border-3: 0.75rem; --sds-g-radius-border-4: var(--slds-g-radius-border-4); --slds-g-radius-border-4: 1.25rem; --sds-g-radius-border-pill: var(--slds-g-radius-border-pill); --slds-g-radius-border-pill: 15rem; --sds-g-radius-border-circle: var(--slds-g-radius-border-circle); --slds-g-radius-border-circle: 100%; --sds-g-color-palette-blue-10: var(--slds-g-color-palette-blue-10); --slds-g-color-palette-blue-10: #001639; --sds-g-color-palette-blue-15: var(--slds-g-color-palette-blue-15); --slds-g-color-palette-blue-15: #03234d; --sds-g-color-palette-blue-20: var(--slds-g-color-palette-blue-20); --slds-g-color-palette-blue-20: #032d60; --sds-g-color-palette-blue-30: var(--slds-g-color-palette-blue-30); --slds-g-color-palette-blue-30: #014486; --sds-g-color-palette-blue-40: var(--slds-g-color-palette-blue-40); --slds-g-color-palette-blue-40: #0b5cab; --sds-g-color-palette-blue-50: var(--slds-g-color-palette-blue-50); --slds-g-color-palette-blue-50: #0176d3; --sds-g-color-palette-blue-60: var(--slds-g-color-palette-blue-60); --slds-g-color-palette-blue-60: #1b96ff; --sds-g-color-palette-blue-65: var(--slds-g-color-palette-blue-65); --slds-g-color-palette-blue-65: #57a3fd; --sds-g-color-palette-blue-70: var(--slds-g-color-palette-blue-70); --slds-g-color-palette-blue-70: #78b0fd; --sds-g-color-palette-blue-80: var(--slds-g-color-palette-blue-80); --slds-g-color-palette-blue-80: #aacbff; --sds-g-color-palette-blue-90: var(--slds-g-color-palette-blue-90); --slds-g-color-palette-blue-90: #d8e6fe; --sds-g-color-palette-blue-95: var(--slds-g-color-palette-blue-95); --slds-g-color-palette-blue-95: #eef4ff; --sds-g-color-palette-cloud-blue-10: var(--slds-g-color-palette-cloud-blue-10); --slds-g-color-palette-cloud-blue-10: #001a28; --sds-g-color-palette-cloud-blue-15: var(--slds-g-color-palette-cloud-blue-15); --slds-g-color-palette-cloud-blue-15: #0a2636; --sds-g-color-palette-cloud-blue-20: var(--slds-g-color-palette-cloud-blue-20); --slds-g-color-palette-cloud-blue-20: #023248; --sds-g-color-palette-cloud-blue-30: var(--slds-g-color-palette-cloud-blue-30); --slds-g-color-palette-cloud-blue-30: #084968; --sds-g-color-palette-cloud-blue-40: var(--slds-g-color-palette-cloud-blue-40); --slds-g-color-palette-cloud-blue-40: #05628a; --sds-g-color-palette-cloud-blue-50: var(--slds-g-color-palette-cloud-blue-50); --slds-g-color-palette-cloud-blue-50: #107cad; --sds-g-color-palette-cloud-blue-60: var(--slds-g-color-palette-cloud-blue-60); --slds-g-color-palette-cloud-blue-60: #0d9dda; --sds-g-color-palette-cloud-blue-65: var(--slds-g-color-palette-cloud-blue-65); --slds-g-color-palette-cloud-blue-65: #08abed; --sds-g-color-palette-cloud-blue-70: var(--slds-g-color-palette-cloud-blue-70); --slds-g-color-palette-cloud-blue-70: #1ab9ff; --sds-g-color-palette-cloud-blue-80: var(--slds-g-color-palette-cloud-blue-80); --slds-g-color-palette-cloud-blue-80: #90d0fe; --sds-g-color-palette-cloud-blue-90: var(--slds-g-color-palette-cloud-blue-90); --slds-g-color-palette-cloud-blue-90: #cfe9fe; --sds-g-color-palette-cloud-blue-95: var(--slds-g-color-palette-cloud-blue-95); --slds-g-color-palette-cloud-blue-95: #eaf5fe; --sds-g-color-palette-green-10: var(--slds-g-color-palette-green-10); --slds-g-color-palette-green-10: #071b12; --sds-g-color-palette-green-15: var(--slds-g-color-palette-green-15); --slds-g-color-palette-green-15: #0c2912; --sds-g-color-palette-green-20: var(--slds-g-color-palette-green-20); --slds-g-color-palette-green-20: #1c3326; --sds-g-color-palette-green-30: var(--slds-g-color-palette-green-30); --slds-g-color-palette-green-30: #194e31; --sds-g-color-palette-green-40: var(--slds-g-color-palette-green-40); --slds-g-color-palette-green-40: #396547; --sds-g-color-palette-green-50: var(--slds-g-color-palette-green-50); --slds-g-color-palette-green-50: #2e844a; --sds-g-color-palette-green-60: var(--slds-g-color-palette-green-60); --slds-g-color-palette-green-60: #3ba755; --sds-g-color-palette-green-65: var(--slds-g-color-palette-green-65); --slds-g-color-palette-green-65: #41b658; --sds-g-color-palette-green-70: var(--slds-g-color-palette-green-70); --slds-g-color-palette-green-70: #45c65a; --sds-g-color-palette-green-80: var(--slds-g-color-palette-green-80); --slds-g-color-palette-green-80: #91db8b; --sds-g-color-palette-green-90: var(--slds-g-color-palette-green-90); --slds-g-color-palette-green-90: #cdefc4; --sds-g-color-palette-green-95: var(--slds-g-color-palette-green-95); --slds-g-color-palette-green-95: #ebf7e6; --sds-g-color-palette-hot-orange-10: var(--slds-g-color-palette-hot-orange-10); --slds-g-color-palette-hot-orange-10: #281202; --sds-g-color-palette-hot-orange-15: var(--slds-g-color-palette-hot-orange-15); --slds-g-color-palette-hot-orange-15: #421604; --sds-g-color-palette-hot-orange-20: var(--slds-g-color-palette-hot-orange-20); --slds-g-color-palette-hot-orange-20: #4a2413; --sds-g-color-palette-hot-orange-30: var(--slds-g-color-palette-hot-orange-30); --slds-g-color-palette-hot-orange-30: #7e2600; --sds-g-color-palette-hot-orange-40: var(--slds-g-color-palette-hot-orange-40); --slds-g-color-palette-hot-orange-40: #aa3001; --sds-g-color-palette-hot-orange-50: var(--slds-g-color-palette-hot-orange-50); --slds-g-color-palette-hot-orange-50: #d83a00; --sds-g-color-palette-hot-orange-60: var(--slds-g-color-palette-hot-orange-60); --slds-g-color-palette-hot-orange-60: #ff5d2d; --sds-g-color-palette-hot-orange-65: var(--slds-g-color-palette-hot-orange-65); --slds-g-color-palette-hot-orange-65: #ff784f; --sds-g-color-palette-hot-orange-70: var(--slds-g-color-palette-hot-orange-70); --slds-g-color-palette-hot-orange-70: #ff906e; --sds-g-color-palette-hot-orange-80: var(--slds-g-color-palette-hot-orange-80); --slds-g-color-palette-hot-orange-80: #feb9a5; --sds-g-color-palette-hot-orange-90: var(--slds-g-color-palette-hot-orange-90); --slds-g-color-palette-hot-orange-90: #ffded5; --sds-g-color-palette-hot-orange-95: var(--slds-g-color-palette-hot-orange-95); --slds-g-color-palette-hot-orange-95: #fef1ed; --sds-g-color-palette-indigo-10: var(--slds-g-color-palette-indigo-10); --slds-g-color-palette-indigo-10: #200647; --sds-g-color-palette-indigo-15: var(--slds-g-color-palette-indigo-15); --slds-g-color-palette-indigo-15: #1f0974; --sds-g-color-palette-indigo-20: var(--slds-g-color-palette-indigo-20); --slds-g-color-palette-indigo-20: #321d71; --sds-g-color-palette-indigo-30: var(--slds-g-color-palette-indigo-30); --slds-g-color-palette-indigo-30: #2f2cb7; --sds-g-color-palette-indigo-40: var(--slds-g-color-palette-indigo-40); --slds-g-color-palette-indigo-40: #3a49da; --sds-g-color-palette-indigo-50: var(--slds-g-color-palette-indigo-50); --slds-g-color-palette-indigo-50: #5867e8; --sds-g-color-palette-indigo-60: var(--slds-g-color-palette-indigo-60); --slds-g-color-palette-indigo-60: #7f8ced; --sds-g-color-palette-indigo-65: var(--slds-g-color-palette-indigo-65); --slds-g-color-palette-indigo-65: #8e9bef; --sds-g-color-palette-indigo-70: var(--slds-g-color-palette-indigo-70); --slds-g-color-palette-indigo-70: #9ea9f1; --sds-g-color-palette-indigo-80: var(--slds-g-color-palette-indigo-80); --slds-g-color-palette-indigo-80: #bec7f6; --sds-g-color-palette-indigo-90: var(--slds-g-color-palette-indigo-90); --slds-g-color-palette-indigo-90: #e0e5f8; --sds-g-color-palette-indigo-95: var(--slds-g-color-palette-indigo-95); --slds-g-color-palette-indigo-95: #f1f3fb; --sds-g-color-palette-orange-10: var(--slds-g-color-palette-orange-10); --slds-g-color-palette-orange-10: #201600; --sds-g-color-palette-orange-15: var(--slds-g-color-palette-orange-15); --slds-g-color-palette-orange-15: #371e03; --sds-g-color-palette-orange-20: var(--slds-g-color-palette-orange-20); --slds-g-color-palette-orange-20: #3e2b02; --sds-g-color-palette-orange-30: var(--slds-g-color-palette-orange-30); --slds-g-color-palette-orange-30: #5f3e02; --sds-g-color-palette-orange-40: var(--slds-g-color-palette-orange-40); --slds-g-color-palette-orange-40: #825101; --sds-g-color-palette-orange-50: var(--slds-g-color-palette-orange-50); --slds-g-color-palette-orange-50: #a96404; --sds-g-color-palette-orange-60: var(--slds-g-color-palette-orange-60); --slds-g-color-palette-orange-60: #dd7a01; --sds-g-color-palette-orange-65: var(--slds-g-color-palette-orange-65); --slds-g-color-palette-orange-65: #f38303; --sds-g-color-palette-orange-70: var(--slds-g-color-palette-orange-70); --slds-g-color-palette-orange-70: #fe9339; --sds-g-color-palette-orange-80: var(--slds-g-color-palette-orange-80); --slds-g-color-palette-orange-80: #ffba90; --sds-g-color-palette-orange-90: var(--slds-g-color-palette-orange-90); --slds-g-color-palette-orange-90: #fedfd0; --sds-g-color-palette-orange-95: var(--slds-g-color-palette-orange-95); --slds-g-color-palette-orange-95: #fff1ea; --sds-g-color-palette-pink-10: var(--slds-g-color-palette-pink-10); --slds-g-color-palette-pink-10: #370114; --sds-g-color-palette-pink-15: var(--slds-g-color-palette-pink-15); --slds-g-color-palette-pink-15: #4b0620; --sds-g-color-palette-pink-20: var(--slds-g-color-palette-pink-20); --slds-g-color-palette-pink-20: #61022a; --sds-g-color-palette-pink-30: var(--slds-g-color-palette-pink-30); --slds-g-color-palette-pink-30: #8a033e; --sds-g-color-palette-pink-40: var(--slds-g-color-palette-pink-40); --slds-g-color-palette-pink-40: #b60554; --sds-g-color-palette-pink-50: var(--slds-g-color-palette-pink-50); --slds-g-color-palette-pink-50: #e3066a; --sds-g-color-palette-pink-60: var(--slds-g-color-palette-pink-60); --slds-g-color-palette-pink-60: #ff538a; --sds-g-color-palette-pink-65: var(--slds-g-color-palette-pink-65); --slds-g-color-palette-pink-65: #fe7298; --sds-g-color-palette-pink-70: var(--slds-g-color-palette-pink-70); --slds-g-color-palette-pink-70: #fe8aa7; --sds-g-color-palette-pink-80: var(--slds-g-color-palette-pink-80); --slds-g-color-palette-pink-80: #fdb6c5; --sds-g-color-palette-pink-90: var(--slds-g-color-palette-pink-90); --slds-g-color-palette-pink-90: #fddde3; --sds-g-color-palette-pink-95: var(--slds-g-color-palette-pink-95); --slds-g-color-palette-pink-95: #fef0f3; --sds-g-color-palette-purple-10: var(--slds-g-color-palette-purple-10); --slds-g-color-palette-purple-10: #240643; --sds-g-color-palette-purple-15: var(--slds-g-color-palette-purple-15); --slds-g-color-palette-purple-15: #300b60; --sds-g-color-palette-purple-20: var(--slds-g-color-palette-purple-20); --slds-g-color-palette-purple-20: #401075; --sds-g-color-palette-purple-30: var(--slds-g-color-palette-purple-30); --slds-g-color-palette-purple-30: #5a1ba9; --sds-g-color-palette-purple-40: var(--slds-g-color-palette-purple-40); --slds-g-color-palette-purple-40: #7526e3; --sds-g-color-palette-purple-50: var(--slds-g-color-palette-purple-50); --slds-g-color-palette-purple-50: #9050e9; --sds-g-color-palette-purple-60: var(--slds-g-color-palette-purple-60); --slds-g-color-palette-purple-60: #ad7bee; --sds-g-color-palette-purple-65: var(--slds-g-color-palette-purple-65); --slds-g-color-palette-purple-65: #b78def; --sds-g-color-palette-purple-70: var(--slds-g-color-palette-purple-70); --slds-g-color-palette-purple-70: #c29ef1; --sds-g-color-palette-purple-80: var(--slds-g-color-palette-purple-80); --slds-g-color-palette-purple-80: #d7bff2; --sds-g-color-palette-purple-90: var(--slds-g-color-palette-purple-90); --slds-g-color-palette-purple-90: #ece1f9; --sds-g-color-palette-purple-95: var(--slds-g-color-palette-purple-95); --slds-g-color-palette-purple-95: #f6f2fb; --sds-g-color-palette-red-10: var(--slds-g-color-palette-red-10); --slds-g-color-palette-red-10: #300c01; --sds-g-color-palette-red-15: var(--slds-g-color-palette-red-15); --slds-g-color-palette-red-15: #4a0c04; --sds-g-color-palette-red-20: var(--slds-g-color-palette-red-20); --slds-g-color-palette-red-20: #640103; --sds-g-color-palette-red-30: var(--slds-g-color-palette-red-30); --slds-g-color-palette-red-30: #8e030f; --sds-g-color-palette-red-40: var(--slds-g-color-palette-red-40); --slds-g-color-palette-red-40: #ba0517; --sds-g-color-palette-red-50: var(--slds-g-color-palette-red-50); --slds-g-color-palette-red-50: #ea001e; --sds-g-color-palette-red-60: var(--slds-g-color-palette-red-60); --slds-g-color-palette-red-60: #fe5c4c; --sds-g-color-palette-red-65: var(--slds-g-color-palette-red-65); --slds-g-color-palette-red-65: #fe7765; --sds-g-color-palette-red-70: var(--slds-g-color-palette-red-70); --slds-g-color-palette-red-70: #fe8f7d; --sds-g-color-palette-red-80: var(--slds-g-color-palette-red-80); --slds-g-color-palette-red-80: #feb8ab; --sds-g-color-palette-red-90: var(--slds-g-color-palette-red-90); --slds-g-color-palette-red-90: #feded8; --sds-g-color-palette-red-95: var(--slds-g-color-palette-red-95); --slds-g-color-palette-red-95: #fef1ee; --sds-g-color-palette-teal-10: var(--slds-g-color-palette-teal-10); --slds-g-color-palette-teal-10: #071b12; --sds-g-color-palette-teal-15: var(--slds-g-color-palette-teal-15); --slds-g-color-palette-teal-15: #072825; --sds-g-color-palette-teal-20: var(--slds-g-color-palette-teal-20); --slds-g-color-palette-teal-20: #023434; --sds-g-color-palette-teal-30: var(--slds-g-color-palette-teal-30); --slds-g-color-palette-teal-30: #024d4c; --sds-g-color-palette-teal-40: var(--slds-g-color-palette-teal-40); --slds-g-color-palette-teal-40: #056764; --sds-g-color-palette-teal-50: var(--slds-g-color-palette-teal-50); --slds-g-color-palette-teal-50: #0b827c; --sds-g-color-palette-teal-60: var(--slds-g-color-palette-teal-60); --slds-g-color-palette-teal-60: #06a59a; --sds-g-color-palette-teal-65: var(--slds-g-color-palette-teal-65); --slds-g-color-palette-teal-65: #03b4a7; --sds-g-color-palette-teal-70: var(--slds-g-color-palette-teal-70); --slds-g-color-palette-teal-70: #01c3b3; --sds-g-color-palette-teal-80: var(--slds-g-color-palette-teal-80); --slds-g-color-palette-teal-80: #04e1cb; --sds-g-color-palette-teal-90: var(--slds-g-color-palette-teal-90); --slds-g-color-palette-teal-90: #acf3e4; --sds-g-color-palette-teal-95: var(--slds-g-color-palette-teal-95); --slds-g-color-palette-teal-95: #def9f3; --sds-g-color-palette-violet-10: var(--slds-g-color-palette-violet-10); --slds-g-color-palette-violet-10: #2e0039; --sds-g-color-palette-violet-15: var(--slds-g-color-palette-violet-15); --slds-g-color-palette-violet-15: #3d0157; --sds-g-color-palette-violet-20: var(--slds-g-color-palette-violet-20); --slds-g-color-palette-violet-20: #481a54; --sds-g-color-palette-violet-30: var(--slds-g-color-palette-violet-30); --slds-g-color-palette-violet-30: #730394; --sds-g-color-palette-violet-40: var(--slds-g-color-palette-violet-40); --slds-g-color-palette-violet-40: #9602c7; --sds-g-color-palette-violet-50: var(--slds-g-color-palette-violet-50); --slds-g-color-palette-violet-50: #ba01ff; --sds-g-color-palette-violet-60: var(--slds-g-color-palette-violet-60); --slds-g-color-palette-violet-60: #cb65ff; --sds-g-color-palette-violet-65: var(--slds-g-color-palette-violet-65); --slds-g-color-palette-violet-65: #d17dfe; --sds-g-color-palette-violet-70: var(--slds-g-color-palette-violet-70); --slds-g-color-palette-violet-70: #d892fe; --sds-g-color-palette-violet-80: var(--slds-g-color-palette-violet-80); --slds-g-color-palette-violet-80: #e5b9fe; --sds-g-color-palette-violet-90: var(--slds-g-color-palette-violet-90); --slds-g-color-palette-violet-90: #f2defe; --sds-g-color-palette-violet-95: var(--slds-g-color-palette-violet-95); --slds-g-color-palette-violet-95: #f9f0ff; --sds-g-color-palette-yellow-10: var(--slds-g-color-palette-yellow-10); --slds-g-color-palette-yellow-10: #281202; --sds-g-color-palette-yellow-15: var(--slds-g-color-palette-yellow-15); --slds-g-color-palette-yellow-15: #2e2204; --sds-g-color-palette-yellow-20: var(--slds-g-color-palette-yellow-20); --slds-g-color-palette-yellow-20: #4f2100; --sds-g-color-palette-yellow-30: var(--slds-g-color-palette-yellow-30); --slds-g-color-palette-yellow-30: #6f3400; --sds-g-color-palette-yellow-40: var(--slds-g-color-palette-yellow-40); --slds-g-color-palette-yellow-40: #8c4b02; --sds-g-color-palette-yellow-50: var(--slds-g-color-palette-yellow-50); --slds-g-color-palette-yellow-50: #a86403; --sds-g-color-palette-yellow-60: var(--slds-g-color-palette-yellow-60); --slds-g-color-palette-yellow-60: #ca8501; --sds-g-color-palette-yellow-65: var(--slds-g-color-palette-yellow-65); --slds-g-color-palette-yellow-65: #d79304; --sds-g-color-palette-yellow-70: var(--slds-g-color-palette-yellow-70); --slds-g-color-palette-yellow-70: #e4a201; --sds-g-color-palette-yellow-80: var(--slds-g-color-palette-yellow-80); --slds-g-color-palette-yellow-80: #fcc003; --sds-g-color-palette-yellow-90: var(--slds-g-color-palette-yellow-90); --slds-g-color-palette-yellow-90: #f9e3b6; --sds-g-color-palette-yellow-95: var(--slds-g-color-palette-yellow-95); --slds-g-color-palette-yellow-95: #fbf3e0; --sds-g-color-palette-neutral-10: var(--slds-g-color-palette-neutral-10); --slds-g-color-palette-neutral-10: #181818; --sds-g-color-palette-neutral-15: var(--slds-g-color-palette-neutral-15); --slds-g-color-palette-neutral-15: #242424; --sds-g-color-palette-neutral-20: var(--slds-g-color-palette-neutral-20); --slds-g-color-palette-neutral-20: #2e2e2e; --sds-g-color-palette-neutral-30: var(--slds-g-color-palette-neutral-30); --slds-g-color-palette-neutral-30: #444444; --sds-g-color-palette-neutral-40: var(--slds-g-color-palette-neutral-40); --slds-g-color-palette-neutral-40: #5c5c5c; --sds-g-color-palette-neutral-50: var(--slds-g-color-palette-neutral-50); --slds-g-color-palette-neutral-50: #747474; --sds-g-color-palette-neutral-60: var(--slds-g-color-palette-neutral-60); --slds-g-color-palette-neutral-60: #939393; --sds-g-color-palette-neutral-65: var(--slds-g-color-palette-neutral-65); --slds-g-color-palette-neutral-65: #a0a0a0; --sds-g-color-palette-neutral-70: var(--slds-g-color-palette-neutral-70); --slds-g-color-palette-neutral-70: #aeaeae; --sds-g-color-palette-neutral-80: var(--slds-g-color-palette-neutral-80); --slds-g-color-palette-neutral-80: #c9c9c9; --sds-g-color-palette-neutral-90: var(--slds-g-color-palette-neutral-90); --slds-g-color-palette-neutral-90: #e5e5e5; --sds-g-color-palette-neutral-95: var(--slds-g-color-palette-neutral-95); --slds-g-color-palette-neutral-95: #f3f3f3; --sds-g-color-palette-neutral-100: var(--slds-g-color-palette-neutral-100); --slds-g-color-palette-neutral-100: #ffffff; --sds-g-font-family-base: var(--slds-g-font-family-base); --slds-g-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --sds-g-font-family-monospace: var(--slds-g-font-family-monospace); --slds-g-font-family-monospace: Consolas, Menlo, Monaco, Courier, monospace; --sds-g-font-weight-bold: var(--slds-g-font-weight-bold); --slds-g-font-weight-bold: bold; --sds-g-font-weight-1: var(--slds-g-font-weight-1); --slds-g-font-weight-1: 100; --sds-g-font-weight-2: var(--slds-g-font-weight-2); --slds-g-font-weight-2: 200; --sds-g-font-weight-3: var(--slds-g-font-weight-3); --slds-g-font-weight-3: 300; --sds-g-font-weight-4: var(--slds-g-font-weight-4); --slds-g-font-weight-4: 400; --sds-g-font-weight-5: var(--slds-g-font-weight-5); --slds-g-font-weight-5: 500; --sds-g-font-weight-6: var(--slds-g-font-weight-6); --slds-g-font-weight-6: 600; --sds-g-font-weight-7: var(--slds-g-font-weight-7); --slds-g-font-weight-7: 700; --sds-g-font-lineheight-base: var(--slds-g-font-lineheight-base); --slds-g-font-lineheight-base: 1.5; --sds-g-font-lineheight-1: var(--slds-g-font-lineheight-1); --slds-g-font-lineheight-1: 1; --sds-g-font-lineheight-2: var(--slds-g-font-lineheight-2); --slds-g-font-lineheight-2: 1.25; --sds-g-font-lineheight-3: var(--slds-g-font-lineheight-3); --slds-g-font-lineheight-3: 1.375; --sds-g-font-lineheight-4: var(--slds-g-font-lineheight-4); --slds-g-font-lineheight-4: 1.5; --sds-g-font-lineheight-5: var(--slds-g-font-lineheight-5); --slds-g-font-lineheight-5: 1.75; --sds-g-font-lineheight-6: var(--slds-g-font-lineheight-6); --slds-g-font-lineheight-6: 2; --sds-g-font-scale-ratio: var(--slds-g-font-scale-ratio); --slds-g-font-scale-ratio: 1.15; --sds-g-font-size-base: var(--slds-g-font-size-base); --slds-g-font-size-base: 0.8125rem; --sds-g-font-scale-neg-4: var(--slds-g-font-scale-neg-4); --slds-g-font-scale-neg-4: var(--slds-g-font-scale-neg-3); --sds-g-font-scale-neg-3: var(--slds-g-font-scale-neg-3); --slds-g-font-scale-neg-3: var(--slds-g-font-scale-neg-2); --sds-g-font-scale-neg-2: var(--slds-g-font-scale-neg-2); --slds-g-font-scale-neg-2: 0.625rem; --sds-g-font-scale-neg-1: var(--slds-g-font-scale-neg-1); --slds-g-font-scale-neg-1: 0.75rem; --sds-g-font-scale-1: var(--slds-g-font-scale-1); --slds-g-font-scale-1: 0.875rem; --sds-g-font-scale-2: var(--slds-g-font-scale-2); --slds-g-font-scale-2: 1rem; --sds-g-font-scale-3: var(--slds-g-font-scale-3); --slds-g-font-scale-3: 1.25rem; --sds-g-font-scale-4: var(--slds-g-font-scale-4); --slds-g-font-scale-4: 1.5rem; --sds-g-font-scale-5: var(--slds-g-font-scale-5); --slds-g-font-scale-5: 1.75rem; --sds-g-font-scale-6: var(--slds-g-font-scale-6); --slds-g-font-scale-6: 2rem; --sds-g-font-scale-7: var(--slds-g-font-scale-7); --slds-g-font-scale-7: 2.5rem; --sds-g-font-scale-8: var(--slds-g-font-scale-8); --slds-g-font-scale-8: 3rem; --sds-g-font-scale-9: var(--slds-g-font-scale-9); --slds-g-font-scale-9: var(--slds-g-font-scale-8); --sds-g-font-scale-10: var(--slds-g-font-scale-10); --slds-g-font-scale-10: var(--slds-g-font-scale-8); --sds-g-color-neutral-base-100: var(--slds-g-color-neutral-base-100); --slds-g-color-neutral-base-100: light-dark(#ffffff, #181818); --sds-g-color-neutral-base-95: var(--slds-g-color-neutral-base-95); --slds-g-color-neutral-base-95: light-dark(#f3f3f3, #242424); --sds-g-color-neutral-base-90: var(--slds-g-color-neutral-base-90); --slds-g-color-neutral-base-90: light-dark(#e5e5e5, #2e2e2e); --sds-g-color-neutral-base-80: var(--slds-g-color-neutral-base-80); --slds-g-color-neutral-base-80: light-dark(#c9c9c9, #444444); --sds-g-color-neutral-base-70: var(--slds-g-color-neutral-base-70); --slds-g-color-neutral-base-70: light-dark(#aeaeae, #5c5c5c); --sds-g-color-neutral-base-65: var(--slds-g-color-neutral-base-65); --slds-g-color-neutral-base-65: light-dark(#a0a0a0, #747474); --sds-g-color-neutral-base-60: var(--slds-g-color-neutral-base-60); --slds-g-color-neutral-base-60: light-dark(#939393, #939393); --sds-g-color-neutral-base-50: var(--slds-g-color-neutral-base-50); --slds-g-color-neutral-base-50: light-dark(#747474, #a0a0a0); --sds-g-color-neutral-base-40: var(--slds-g-color-neutral-base-40); --slds-g-color-neutral-base-40: light-dark(#5c5c5c, #aeaeae); --sds-g-color-neutral-base-30: var(--slds-g-color-neutral-base-30); --slds-g-color-neutral-base-30: light-dark(#444444, #c9c9c9); --sds-g-color-neutral-base-20: var(--slds-g-color-neutral-base-20); --slds-g-color-neutral-base-20: light-dark(#2e2e2e, #e5e5e5); --sds-g-color-neutral-base-15: var(--slds-g-color-neutral-base-15); --slds-g-color-neutral-base-15: light-dark(#242424, #f3f3f3); --sds-g-color-neutral-base-10: var(--slds-g-color-neutral-base-10); --slds-g-color-neutral-base-10: light-dark(#181818, #ffffff); --sds-g-color-brand-base-100: var(--slds-g-color-brand-base-100); --slds-g-color-brand-base-100: #ffffff; --sds-g-color-brand-base-95: var(--slds-g-color-brand-base-95); --slds-g-color-brand-base-95: light-dark(#edf4ff, #001642); --sds-g-color-brand-base-90: var(--slds-g-color-brand-base-90); --slds-g-color-brand-base-90: light-dark(#d6e6ff, #001e5b); --sds-g-color-brand-base-80: var(--slds-g-color-brand-base-80); --slds-g-color-brand-base-80: light-dark(#a8cbff, #002775); --sds-g-color-brand-base-70: var(--slds-g-color-brand-base-70); --slds-g-color-brand-base-70: light-dark(#7cb1fe, #022ac0); --sds-g-color-brand-base-65: var(--slds-g-color-brand-base-65); --slds-g-color-brand-base-65: light-dark(#5f9ffe, #0250d9); --sds-g-color-brand-base-60: var(--slds-g-color-brand-base-60); --slds-g-color-brand-base-60: light-dark(#4992fe, #0250d9); --sds-g-color-brand-base-50: var(--slds-g-color-brand-base-50); --slds-g-color-brand-base-50: light-dark(#066afe, #066afe); --sds-g-color-brand-base-40: var(--slds-g-color-brand-base-40); --slds-g-color-brand-base-40: light-dark(#0250d9, #4992fe); --sds-g-color-brand-base-30: var(--slds-g-color-brand-base-30); --slds-g-color-brand-base-30: light-dark(#022ac0, #7cb1fe); --sds-g-color-brand-base-20: var(--slds-g-color-brand-base-20); --slds-g-color-brand-base-20: light-dark(#002775, #a8cbff); --sds-g-color-brand-base-15: var(--slds-g-color-brand-base-15); --slds-g-color-brand-base-15: light-dark(#001e5b, #d6e6ff); --sds-g-color-brand-base-10: var(--slds-g-color-brand-base-10); --slds-g-color-brand-base-10: light-dark(#001642, #edf4ff); --sds-g-color-error-base-100: var(--slds-g-color-error-base-100); --slds-g-color-error-base-100: #ffffff; --sds-g-color-error-base-90: var(--slds-g-color-error-base-90); --slds-g-color-error-base-90: light-dark(#fddde3, #4b0620); --sds-g-color-error-base-80: var(--slds-g-color-error-base-80); --slds-g-color-error-base-80: light-dark(#fdb6c5, #61022a); --sds-g-color-error-base-70: var(--slds-g-color-error-base-70); --slds-g-color-error-base-70: light-dark(#fe8aa7, #8a033e); --sds-g-color-error-base-60: var(--slds-g-color-error-base-60); --slds-g-color-error-base-60: light-dark(#ff538a, #b60554); --sds-g-color-error-base-50: var(--slds-g-color-error-base-50); --slds-g-color-error-base-50: #e3066a; --sds-g-color-error-base-40: var(--slds-g-color-error-base-40); --slds-g-color-error-base-40: light-dark(#b60554, #ff538a); --sds-g-color-error-base-30: var(--slds-g-color-error-base-30); --slds-g-color-error-base-30: light-dark(#8a033e, #fe8aa7); --sds-g-color-error-base-20: var(--slds-g-color-error-base-20); --slds-g-color-error-base-20: light-dark(#61022a, #fdb6c5); --sds-g-color-error-base-10: var(--slds-g-color-error-base-10); --slds-g-color-error-base-10: light-dark(#370114, #fddde3); --sds-g-color-warning-base-100: var(--slds-g-color-warning-base-100); --slds-g-color-warning-base-100: #ffffff; --sds-g-color-warning-base-90: var(--slds-g-color-warning-base-90); --slds-g-color-warning-base-90: light-dark(#f9e3b6, #2e2204); --sds-g-color-warning-base-80: var(--slds-g-color-warning-base-80); --slds-g-color-warning-base-80: light-dark(#fcc003, #4f2100); --sds-g-color-warning-base-70: var(--slds-g-color-warning-base-70); --slds-g-color-warning-base-70: light-dark(#e4a201, #6f3400); --sds-g-color-warning-base-60: var(--slds-g-color-warning-base-60); --slds-g-color-warning-base-60: light-dark(#ca8501, #8c4b02); --sds-g-color-warning-base-50: var(--slds-g-color-warning-base-50); --slds-g-color-warning-base-50: light-dark(#a86403, #a86403); --sds-g-color-warning-base-40: var(--slds-g-color-warning-base-40); --slds-g-color-warning-base-40: light-dark(#8c4b02, #ca8501); --sds-g-color-warning-base-30: var(--slds-g-color-warning-base-30); --slds-g-color-warning-base-30: light-dark(#6f3400, #e4a201); --sds-g-color-warning-base-20: var(--slds-g-color-warning-base-20); --slds-g-color-warning-base-20: light-dark(#4f2100, #fcc003); --sds-g-color-warning-base-10: var(--slds-g-color-warning-base-10); --slds-g-color-warning-base-10: light-dark(#281202, #f9e3b6); --sds-g-color-success-base-100: var(--slds-g-color-success-base-100); --slds-g-color-success-base-100: #ffffff; --sds-g-color-success-base-90: var(--slds-g-color-success-base-90); --slds-g-color-success-base-90: light-dark(#acf3e4, #072825); --sds-g-color-success-base-80: var(--slds-g-color-success-base-80); --slds-g-color-success-base-80: light-dark(#04e1cb, #023434); --sds-g-color-success-base-70: var(--slds-g-color-success-base-70); --slds-g-color-success-base-70: light-dark(#01c3b3, #024d4c); --sds-g-color-success-base-60: var(--slds-g-color-success-base-60); --slds-g-color-success-base-60: light-dark(#06a59a, #056764); --sds-g-color-success-base-50: var(--slds-g-color-success-base-50); --slds-g-color-success-base-50: light-dark(#0b827c, #0b827c); --sds-g-color-success-base-40: var(--slds-g-color-success-base-40); --slds-g-color-success-base-40: light-dark(#056764, #06a59a); --sds-g-color-success-base-30: var(--slds-g-color-success-base-30); --slds-g-color-success-base-30: light-dark(#024d4c, #01c3b3); --sds-g-color-success-base-20: var(--slds-g-color-success-base-20); --slds-g-color-success-base-20: light-dark(#023434, #04e1cb); --sds-g-color-success-base-10: var(--slds-g-color-success-base-10); --slds-g-color-success-base-10: light-dark(#071b12, #acf3e4); --sds-g-color-border-1: var(--slds-g-color-border-1); --slds-g-color-border-1: light-dark(#c9c9c9, #444444); --sds-g-color-border-2: var(--slds-g-color-border-2); --slds-g-color-border-2: light-dark(#5c5c5c, #747474); --sds-g-color-border-accent-1: var(--slds-g-color-border-accent-1); --slds-g-color-border-accent-1: light-dark(#066afe, #066afe); --sds-g-color-border-accent-2: var(--slds-g-color-border-accent-2); --slds-g-color-border-accent-2: light-dark(#0250d9, #7cb1fe); --sds-g-color-border-accent-3: var(--slds-g-color-border-accent-3); --slds-g-color-border-accent-3: light-dark(#022ac0, #a8cbff); --sds-g-color-surface-1: var(--slds-g-color-surface-1); --slds-g-color-surface-1: light-dark(#ffffff, #242424); --sds-g-color-surface-2: var(--slds-g-color-surface-2); --slds-g-color-surface-2: light-dark(#f3f3f3, #181818); --sds-g-color-surface-3: var(--slds-g-color-surface-3); --slds-g-color-surface-3: light-dark(#f3f3f3, #2e2e2e); --sds-g-color-surface-container-1: var(--slds-g-color-surface-container-1); --slds-g-color-surface-container-1: light-dark(#ffffff, #242424); --sds-g-color-surface-container-2: var(--slds-g-color-surface-container-2); --slds-g-color-surface-container-2: light-dark(#f3f3f3, #181818); --sds-g-color-surface-container-3: var(--slds-g-color-surface-container-3); --slds-g-color-surface-container-3: light-dark(#e5e5e5, #2e2e2e); --sds-g-color-on-surface-1: var(--slds-g-color-on-surface-1); --slds-g-color-on-surface-1: light-dark(#5c5c5c, #aeaeae); --sds-g-color-on-surface-2: var(--slds-g-color-on-surface-2); --slds-g-color-on-surface-2: light-dark(#2e2e2e, #e5e5e5); --sds-g-color-on-surface-3: var(--slds-g-color-on-surface-3); --slds-g-color-on-surface-3: light-dark(#03234d, #d8e6fe); --sds-g-color-accent-1: var(--slds-g-color-accent-1); --slds-g-color-accent-1: light-dark(#066afe, #066afe); --sds-g-color-accent-2: var(--slds-g-color-accent-2); --slds-g-color-accent-2: light-dark(#0250d9, #7cb1fe); --sds-g-color-accent-3: var(--slds-g-color-accent-3); --slds-g-color-accent-3: light-dark(#022ac0, #a8cbff); --sds-g-color-accent-container-1: var(--slds-g-color-accent-container-1); --slds-g-color-accent-container-1: #066afe; --sds-g-color-accent-container-2: var(--slds-g-color-accent-container-2); --slds-g-color-accent-container-2: light-dark(#0250d9, #d6e6ff); --sds-g-color-accent-container-3: var(--slds-g-color-accent-container-3); --slds-g-color-accent-container-3: light-dark(#022ac0, #a8cbff); --sds-g-color-on-accent-1: var(--slds-g-color-on-accent-1); --slds-g-color-on-accent-1: light-dark(#ffffff, #ffffff); --sds-g-color-on-accent-2: var(--slds-g-color-on-accent-2); --slds-g-color-on-accent-2: light-dark(#ffffff, #0250d9); --sds-g-color-on-accent-3: var(--slds-g-color-on-accent-3); --slds-g-color-on-accent-3: light-dark(#ffffff, #022ac0); --sds-g-color-error-1: var(--slds-g-color-error-1); --slds-g-color-error-1: light-dark(#b60554, #fe8aa7); --sds-g-color-error-container-1: var(--slds-g-color-error-container-1); --slds-g-color-error-container-1: light-dark(#fddde3, #8a033e); --sds-g-color-on-error-1: var(--slds-g-color-on-error-1); --slds-g-color-on-error-1: light-dark(#b60554, #fddde3); --sds-g-color-border-error-1: var(--slds-g-color-border-error-1); --slds-g-color-border-error-1: light-dark(#b60554, #fe8aa7); --sds-g-color-warning-1: var(--slds-g-color-warning-1); --slds-g-color-warning-1: light-dark(#8c4b02, #e4a201); --sds-g-color-warning-container-1: var(--slds-g-color-warning-container-1); --slds-g-color-warning-container-1: light-dark(#f9e3b6, #6f3400); --sds-g-color-on-warning-1: var(--slds-g-color-on-warning-1); --slds-g-color-on-warning-1: light-dark(#8c4b02, #f9e3b6); --sds-g-color-border-warning-1: var(--slds-g-color-border-warning-1); --slds-g-color-border-warning-1: light-dark(#dd7a01, #e4a201); --sds-g-color-success-1: var(--slds-g-color-success-1); --slds-g-color-success-1: light-dark(#056764, #01c3b3); --sds-g-color-success-container-1: var(--slds-g-color-success-container-1); --slds-g-color-success-container-1: light-dark(#acf3e4, #024d4c); --sds-g-color-on-success-1: var(--slds-g-color-on-success-1); --slds-g-color-on-success-1: var(--slds-g-color-success-base-40); --sds-g-color-border-success-1: var(--slds-g-color-border-success-1); --slds-g-color-border-success-1: var(--slds-g-color-success-base-40); --sds-g-color-info-1: var(--slds-g-color-info-1); --slds-g-color-info-1: light-dark(#0b5cab, #78b0fd); --sds-g-color-info-container-1: var(--slds-g-color-info-container-1); --slds-g-color-info-container-1: light-dark(#d8e6fe, #014486); --sds-g-color-on-info-1: var(--slds-g-color-on-info-1); --slds-g-color-on-info-1: light-dark(#0b5cab, #d8e6fe); --sds-g-color-disabled-1: var(--slds-g-color-disabled-1); --slds-g-color-disabled-1: light-dark(#c9c9c9, #5c5c5c); --sds-g-color-disabled-container-1: var(--slds-g-color-disabled-container-1); --slds-g-color-disabled-container-1: light-dark(#ffffff, #242424); --sds-g-color-on-disabled-1: var(--slds-g-color-on-disabled-1); --slds-g-color-on-disabled-1: light-dark(#c9c9c9, #5c5c5c); --sds-g-color-border-disabled-1: var(--slds-g-color-border-disabled-1); --slds-g-color-border-disabled-1: var(--slds-g-color-neutral-base-80); --sds-g-shadow-blockstart-1: var(--slds-g-shadow-blockstart-1); --slds-g-shadow-blockstart-1: 0px 0px 1.5px 0px #00000017, 0px -1.4px 1.5px 0px #00000017, 0px 1px 1px 0px #00000009; --sds-g-shadow-inlineend-1: var(--slds-g-shadow-inlineend-1); --slds-g-shadow-inlineend-1: 0px 0px 1.5px 0px #00000017, 1.4px 0px 1.5px 0px #00000017, -1px 0 1px 0 #00000009; --sds-g-shadow-blockend-1: var(--slds-g-shadow-blockend-1); --slds-g-shadow-blockend-1: var(--slds-g-shadow-1); --sds-g-shadow-inlinestart-1: var(--slds-g-shadow-inlinestart-1); --slds-g-shadow-inlinestart-1: 0px 0px 1.5px 0px #00000017, -1.4px 0px 1.5px 0px #00000017, 1px 0px 1px 0px #00000009; --sds-g-shadow-blockstart-2: var(--slds-g-shadow-blockstart-2); --slds-g-shadow-blockstart-2: 0px 0px 3px 0px #00000016, 0px -2.8px 3px 0px #00000016, 0px 1px 1.2px 0px #00000009; --sds-g-shadow-inlineend-2: var(--slds-g-shadow-inlineend-2); --slds-g-shadow-inlineend-2: 0px 0px 3px 0px #00000016, 2.8px 0px 3px 0px #00000016, -1px 0px 1.2px 0px #00000009; --sds-g-shadow-blockend-2: var(--slds-g-shadow-blockend-2); --slds-g-shadow-blockend-2: var(--slds-g-shadow-2); --sds-g-shadow-inlinestart-2: var(--slds-g-shadow-inlinestart-2); --slds-g-shadow-inlinestart-2: 0px 0px 3px 0px #00000016, -2.8px 0px 3px 0px #00000016, 1px 0px 1.2px 0px #00000009; --sds-g-shadow-blockstart-3: var(--slds-g-shadow-blockstart-3); --slds-g-shadow-blockstart-3: 0px 0px 4.5px 0px #00000014, 0px -4.2px 4.5px 0px #00000017, 0px 1px 1.44px 0px #00000008; --sds-g-shadow-inlineend-3: var(--slds-g-shadow-inlineend-3); --slds-g-shadow-inlineend-3: 0px 0px 4.5px 0px #00000014, 4.2px 0px 4.5px 0px #00000017, -1px 0px 1.44px 0px #00000008; --sds-g-shadow-blockend-3: var(--slds-g-shadow-blockend-3); --slds-g-shadow-blockend-3: var(--slds-g-shadow-3); --sds-g-shadow-inlinestart-3: var(--slds-g-shadow-inlinestart-3); --slds-g-shadow-inlinestart-3: 0px 0px 4.5px 0px #00000014, -4.2px 0px 4.5px 0px #00000017, 1px 0px 1.44px 0px #00000008; --sds-g-shadow-blockstart-4: var(--slds-g-shadow-blockstart-4); --slds-g-shadow-blockstart-4: 0px 0px 6.75px 0px #00000012, 0px -6.3px 6.75px 0px #00000012, 0px 1px 1.7px 0px #00000007; --sds-g-shadow-inlineend-4: var(--slds-g-shadow-inlineend-4); --slds-g-shadow-inlineend-4: 0px 0px 6.75px 0px #00000012, 6.3px 0px 6.75px 0px #00000012, -1px 0px 1.7px 0px #00000007; --sds-g-shadow-blockend-4: var(--slds-g-shadow-blockend-4); --slds-g-shadow-blockend-4: var(--slds-g-shadow-4); --sds-g-shadow-inlinestart-4: var(--slds-g-shadow-inlinestart-4); --slds-g-shadow-inlinestart-4: 0px 0px 6.75px 0px #00000012, -6.3px 0px 6.75px 0px #00000012, 1px 0px 1.7px 0px #00000007; --sds-g-shadow-outline-focus-1: var(--slds-g-shadow-outline-focus-1); --slds-g-shadow-outline-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-15); --sds-g-shadow-outset-focus-1: var(--slds-g-shadow-outset-focus-1); --slds-g-shadow-outset-focus-1: 0px 0px 0px 2px var(--slds-g-color-neutral-base-100), 0px 0px 0px 4px var(--slds-g-color-brand-base-15); --sds-g-shadow-inset-focus-1: var(--slds-g-shadow-inset-focus-1); --slds-g-shadow-inset-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset; --sds-g-shadow-insetinverse-focus-1: var(--slds-g-shadow-insetinverse-focus-1); --slds-g-shadow-insetinverse-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset, 0px 0px 0px 4px var(--slds-g-color-neutral-base-100) inset; --sds-g-color-palette-electric-blue-10: var(--slds-g-color-palette-electric-blue-10); --slds-g-color-palette-electric-blue-10: #001642; --sds-g-color-palette-electric-blue-15: var(--slds-g-color-palette-electric-blue-15); --slds-g-color-palette-electric-blue-15: #001e5b; --sds-g-color-palette-electric-blue-20: var(--slds-g-color-palette-electric-blue-20); --slds-g-color-palette-electric-blue-20: #002775; --sds-g-color-palette-electric-blue-30: var(--slds-g-color-palette-electric-blue-30); --slds-g-color-palette-electric-blue-30: #022ac0; --sds-g-color-palette-electric-blue-40: var(--slds-g-color-palette-electric-blue-40); --slds-g-color-palette-electric-blue-40: #0250d9; --sds-g-color-palette-electric-blue-50: var(--slds-g-color-palette-electric-blue-50); --slds-g-color-palette-electric-blue-50: #066afe; --sds-g-color-palette-electric-blue-60: var(--slds-g-color-palette-electric-blue-60); --slds-g-color-palette-electric-blue-60: #4992fe; --sds-g-color-palette-electric-blue-65: var(--slds-g-color-palette-electric-blue-65); --slds-g-color-palette-electric-blue-65: #5f9ffe; --sds-g-color-palette-electric-blue-70: var(--slds-g-color-palette-electric-blue-70); --slds-g-color-palette-electric-blue-70: #7cb1fe; --sds-g-color-palette-electric-blue-80: var(--slds-g-color-palette-electric-blue-80); --slds-g-color-palette-electric-blue-80: #a8cbff; --sds-g-color-palette-electric-blue-90: var(--slds-g-color-palette-electric-blue-90); --slds-g-color-palette-electric-blue-90: #d6e6ff; --sds-g-color-palette-electric-blue-95: var(--slds-g-color-palette-electric-blue-95); --slds-g-color-palette-electric-blue-95: #edf4ff; --sds-g-font-scale-var-neg-4: var(--slds-g-font-scale-var-neg-4); --slds-g-font-scale-var-neg-4: var(--slds-g-font-scale-var-neg-3); --sds-g-font-scale-var-neg-3: var(--slds-g-font-scale-var-neg-3); --slds-g-font-scale-var-neg-3: var(--slds-g-font-scale-var-neg-2); --sds-g-font-scale-var-neg-2: var(--slds-g-font-scale-var-neg-2); --slds-g-font-scale-var-neg-2: var(--slds-g-font-scale-neg-2); --sds-g-font-scale-var-neg-1: var(--slds-g-font-scale-var-neg-1); --slds-g-font-scale-var-neg-1: var(--slds-g-font-scale-neg-1); --sds-g-font-scale-var-1: var(--slds-g-font-scale-var-1); --slds-g-font-scale-var-1: var(--slds-g-font-scale-1); --sds-g-font-scale-var-2: var(--slds-g-font-scale-var-2); --slds-g-font-scale-var-2: var(--slds-g-font-scale-2); --sds-g-font-scale-var-3: var(--slds-g-font-scale-var-3); --slds-g-font-scale-var-3: var(--slds-g-font-scale-3); --sds-g-font-scale-var-4: var(--slds-g-font-scale-var-4); --slds-g-font-scale-var-4: var(--slds-g-font-scale-4); --sds-g-font-scale-var-5: var(--slds-g-font-scale-var-5); --slds-g-font-scale-var-5: var(--slds-g-font-scale-5); --sds-g-font-scale-var-6: var(--slds-g-font-scale-var-6); --slds-g-font-scale-var-6: var(--slds-g-font-scale-6); --sds-g-font-scale-var-7: var(--slds-g-font-scale-var-7); --slds-g-font-scale-var-7: var(--slds-g-font-scale-7); --sds-g-font-scale-var-8: var(--slds-g-font-scale-var-8); --slds-g-font-scale-var-8: var(--slds-g-font-scale-8); --sds-g-font-scale-var-9: var(--slds-g-font-scale-var-9); --slds-g-font-scale-var-9: var(--slds-g-font-scale-var-8); --sds-g-font-scale-var-10: var(--slds-g-font-scale-var-10); --slds-g-font-scale-var-10: var(--slds-g-font-scale-var-8); --sds-g-color-error-base-95: var(--slds-g-color-error-base-95); --slds-g-color-error-base-95: light-dark(#fef0f3, #370114); --sds-g-color-warning-base-95: var(--slds-g-color-warning-base-95); --slds-g-color-warning-base-95: light-dark(#fbf3e0, #281202); --sds-g-color-success-base-95: var(--slds-g-color-success-base-95); --slds-g-color-success-base-95: light-dark(#def9f3, #071b12); --sds-g-color-accent-light-1: var(--slds-g-color-accent-light-1); --slds-g-color-accent-light-1: #edf4ff; --sds-g-color-accent-light-2: var(--slds-g-color-accent-light-2); --slds-g-color-accent-light-2: #d6e6ff; --sds-g-color-accent-dark-1: var(--slds-g-color-accent-dark-1); --slds-g-color-accent-dark-1: #002775; --sds-g-color-accent-dark-2: var(--slds-g-color-accent-dark-2); --slds-g-color-accent-dark-2: #001642; --sds-g-color-disabled-container-2: var(--slds-g-color-disabled-container-2); --slds-g-color-disabled-container-2: light-dark(#c9c9c9, #5c5c5c); --sds-g-color-on-disabled-2: var(--slds-g-color-on-disabled-2); --slds-g-color-on-disabled-2: #939393; --sds-g-color-error-container-2: var(--slds-g-color-error-container-2); --slds-g-color-error-container-2: light-dark(#fdb6c5, #b60554); --sds-g-color-on-error-2: var(--slds-g-color-on-error-2); --slds-g-color-on-error-2: light-dark(#8a033e, #fef0f3); --sds-g-color-border-error-2: var(--slds-g-color-border-error-2); --slds-g-color-border-error-2: light-dark(#8a033e, #fdb6c5); --sds-g-color-success-container-2: var(--slds-g-color-success-container-2); --slds-g-color-success-container-2: light-dark(#04e1cb, #056764); --sds-g-color-on-success-2: var(--slds-g-color-on-success-2); --slds-g-color-on-success-2: var(--slds-g-color-success-base-20); --sds-g-color-border-success-2: var(--slds-g-color-border-success-2); --slds-g-color-border-success-2: var(--slds-g-color-success-base-40); --sds-g-color-surface-inverse-1: var(--slds-g-color-surface-inverse-1); --slds-g-color-surface-inverse-1: light-dark(#032d60, #aacbff); --sds-g-color-surface-inverse-2: var(--slds-g-color-surface-inverse-2); --slds-g-color-surface-inverse-2: light-dark(#03234d, #d8e6fe); --sds-g-color-surface-container-inverse-1: var(--slds-g-color-surface-container-inverse-1); --slds-g-color-surface-container-inverse-1: light-dark(#032d60, #aacbff); --sds-g-color-surface-container-inverse-2: var(--slds-g-color-surface-container-inverse-2); --slds-g-color-surface-container-inverse-2: light-dark(#03234d, #78b0fd); --sds-g-color-on-surface-inverse-1: var(--slds-g-color-on-surface-inverse-1); --slds-g-color-on-surface-inverse-1: light-dark(#ffffff, #181818); --sds-g-color-on-surface-inverse-2: var(--slds-g-color-on-surface-inverse-2); --slds-g-color-on-surface-inverse-2: light-dark(#a8cbff, #002775); --sds-g-color-border-inverse-1: var(--slds-g-color-border-inverse-1); --slds-g-color-border-inverse-1: light-dark(#f3f3f3, #181818); --sds-g-color-border-inverse-2: var(--slds-g-color-border-inverse-2); --slds-g-color-border-inverse-2: light-dark(#032d60, #aacbff); } } @layer deprecated { :where(html) { --lwc-brandPrimary: var(--slds-g-color-brand-base-60) !important; --lwc-brandPrimaryActive: var(--slds-g-color-brand-base-50) !important; --lwc-brandAccessible: var(--slds-g-color-brand-base-50) !important; --lwc-brandAccessibleActive: var(--slds-g-color-brand-base-40) !important; --lwc-brandContrast: var(--slds-g-color-brand-base-100) !important; --lwc-brandContrastActive: var(--slds-g-color-brand-base-100) !important; --lwc-brandLight: var(--slds-g-color-brand-base-95) !important; --lwc-brandLightActive: var(--slds-g-color-brand-base-90) !important; --lwc-brandDark: var(--slds-g-color-brand-base-20) !important; --lwc-brandDarkActive: var(--slds-g-color-brand-base-10) !important; --lwc-brandTextLink: var(--slds-g-color-brand-base-50) !important; --lwc-brandTextLinkActive: var(--slds-g-color-brand-base-40) !important; } } @layer shared { :where(html) { --sds-s-table-color: var(--slds-s-table-color); --slds-s-table-color: var(--slds-g-color-on-surface-1); --sds-s-table-header-color-background: var(--slds-s-table-header-color-background); --slds-s-table-header-color-background: var(--slds-g-color-surface-container-2); --sds-s-table-header-color-background-hover: var(--slds-s-table-header-color-background-hover); --slds-s-table-header-color-background-hover: var(--slds-g-color-surface-container-3); --sds-s-table-header-color-background-selected: var(--slds-s-table-header-color-background-selected); --slds-s-table-header-color-background-selected: var(--slds-g-color-surface-container-1); --sds-s-table-header-color: var(--slds-s-table-header-color); --slds-s-table-header-color: var(--slds-g-color-on-surface-1); --sds-s-table-header-font-weight: var(--slds-s-table-header-font-weight); --slds-s-table-header-font-weight: var(--slds-g-font-weight-6); --sds-s-table-resize-color: var(--slds-s-table-resize-color); --slds-s-table-resize-color: var(--slds-g-color-border-1); --sds-s-table-resize-color-active: var(--slds-s-table-resize-color-active); --slds-s-table-resize-color-active: var(--slds-g-color-accent-3); --sds-s-table-row-color-background-selected: var(--slds-s-table-row-color-background-selected); --slds-s-table-row-color-background-selected: var(--slds-g-color-brand-base-90); --sds-s-table-row-color-border-selected-hover: var(--slds-s-table-row-color-border-selected-hover); --slds-s-table-row-color-border-selected-hover: var(--slds-g-color-border-accent-2); --sds-s-table-cell-shadow-selected: var(--slds-s-table-cell-shadow-selected); --slds-s-table-cell-shadow-selected: var(--slds-g-color-brand-base-15) 0 0 0 2px inset; --sds-s-pill-color-background-hover: var(--slds-s-pill-color-background-hover); --slds-s-pill-color-background-hover: var(--slds-g-color-brand-base-90); --sds-s-pageheader-color-background: var(--slds-s-pageheader-color-background); --slds-s-pageheader-color-background: var(--slds-g-color-surface-container-2); --sds-s-pageheader-row-color-background: var(--slds-s-pageheader-row-color-background); --slds-s-pageheader-row-color-background: var(--slds-g-color-surface-container-2); --sds-s-pageheader-radius-border: var(--slds-s-pageheader-radius-border); --slds-s-pageheader-radius-border: 0; --sds-s-pageheader-title-font-size: var(--slds-s-pageheader-title-font-size); --slds-s-pageheader-title-font-size: var(--slds-g-font-scale-5); --sds-s-pageheader-title-font-weight: var(--slds-s-pageheader-title-font-weight); --slds-s-pageheader-title-font-weight: var(--slds-g-font-weight-4); --sds-s-pageheader-sizing-border: var(--slds-s-pageheader-sizing-border); --slds-s-pageheader-sizing-border: 0; --sds-s-pageheader-shadow: var(--slds-s-pageheader-shadow); --slds-s-pageheader-shadow: none; --sds-s-pageheader-action-bottom-spacing: var(--slds-s-pageheader-action-bottom-spacing); --slds-s-pageheader-action-bottom-spacing: var(--slds-g-spacing-1); --sds-s-navigation-color-background: var(--slds-s-navigation-color-background); --slds-s-navigation-color-background: var(--slds-g-color-surface-container-1); --sds-s-navigation-color-background-active: var(--slds-s-navigation-color-background-active); --slds-s-navigation-color-background-active: var(--slds-g-color-surface-container-1); --sds-s-navigation-color-background-hover: var(--slds-s-navigation-color-background-hover); --slds-s-navigation-color-background-hover: var(--slds-g-color-brand-base-90); --sds-s-navigation-color: var(--slds-s-navigation-color); --slds-s-navigation-color: var(--slds-g-color-on-surface-1); --sds-s-navigation-color-active: var(--slds-s-navigation-color-active); --slds-s-navigation-color-active: var(--slds-g-color-accent-3); --sds-s-navigation-color-hover: var(--slds-s-navigation-color-hover); --slds-s-navigation-color-hover: var(--slds-g-color-brand-base-15); --sds-s-navigation-color-border: var(--slds-s-navigation-color-border); --slds-s-navigation-color-border: var(--slds-g-color-neutral-base-80); --sds-s-navigation-color-border-hover: var(--slds-s-navigation-color-border-hover); --slds-s-navigation-color-border-hover: var(--slds-g-color-brand-base-15); --sds-s-navigation-sizing-border-hover: var(--slds-s-navigation-sizing-border-hover); --slds-s-navigation-sizing-border-hover: 3px; --sds-s-navigation-sizing-border-active: var(--slds-s-navigation-sizing-border-active); --slds-s-navigation-sizing-border-active: 3px; --sds-s-navigation-font-weight: var(--slds-s-navigation-font-weight); --slds-s-navigation-font-weight: 600; --sds-s-navigation-font-weight-active: var(--slds-s-navigation-font-weight-active); --slds-s-navigation-font-weight-active: 600; --sds-s-navigation-sizing-height: var(--slds-s-navigation-sizing-height); --slds-s-navigation-sizing-height: 2.5rem; --sds-s-navigation-font-lineheight: var(--slds-s-navigation-font-lineheight); --slds-s-navigation-font-lineheight: 2.5rem; --sds-s-menu-item-color-background-active: var(--slds-s-menu-item-color-background-active); --slds-s-menu-item-color-background-active: var(--slds-g-color-brand-base-90); --sds-s-menu-item-color-active: var(--slds-s-menu-item-color-active); --slds-s-menu-item-color-active: var(--slds-g-color-accent-1); --sds-s-mark-color-foreground-checked: var(--slds-s-mark-color-foreground-checked); --slds-s-mark-color-foreground-checked: var(--slds-g-color-on-accent-1); --sds-s-mark-color-background: var(--slds-s-mark-color-background); --slds-s-mark-color-background: var(--slds-g-color-surface-container-1); --sds-s-mark-color-background-checked: var(--slds-s-mark-color-background-checked); --slds-s-mark-color-background-checked: var(--slds-g-color-accent-container-1); --sds-s-mark-color-foreground-invalid: var(--slds-s-mark-color-foreground-invalid); --slds-s-mark-color-foreground-invalid: var(--slds-g-color-error-base-100); --sds-s-mark-color-background-invalid: var(--slds-s-mark-color-background-invalid); --slds-s-mark-color-background-invalid: var(--slds-g-color-error-base-40); --sds-s-mark-shadow-focus: var(--slds-s-mark-shadow-focus); --slds-s-mark-shadow-focus: 0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15); --sds-s-mark-shadow-checked: var(--slds-s-mark-shadow-checked); --slds-s-mark-shadow-checked: 0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.08) inset, 2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset; --sds-s-link-color: var(--slds-s-link-color); --slds-s-link-color: var(--slds-g-color-accent-2); --sds-s-link-color-hover: var(--slds-s-link-color-hover); --slds-s-link-color-hover: var(--slds-g-color-accent-3); --sds-s-link-color-focus: var(--slds-s-link-color-focus); --slds-s-link-color-focus: var(--slds-g-color-accent-3); --sds-s-link-color-active: var(--slds-s-link-color-active); --slds-s-link-color-active: var(--slds-g-color-accent-3); --sds-s-link-outline-color: var(--slds-s-link-outline-color); --slds-s-link-outline-color: var(--slds-g-color-brand-base-15); --sds-s-label-color: var(--slds-s-label-color); --slds-s-label-color: var(--slds-g-color-on-surface-1); --sds-s-label-font-size: var(--slds-s-label-font-size); --slds-s-label-font-size: var(--slds-g-font-size-base); --sds-s-label-font-weight: var(--slds-s-label-font-weight); --slds-s-label-font-weight: var(--slds-g-font-weight-4); --sds-s-label-spacing: var(--slds-s-label-spacing); --slds-s-label-spacing: var(--slds-g-spacing-2); --sds-s-label-spacing-gap: var(--slds-s-label-spacing-gap); --slds-s-label-spacing-gap: var(--slds-g-spacing-1); --sds-s-input-radius-border: var(--slds-s-input-radius-border); --slds-s-input-radius-border: var(--slds-g-radius-border-2); --sds-s-input-color-background: var(--slds-s-input-color-background); --slds-s-input-color-background: var(--slds-g-color-surface-container-1); --sds-s-input-color-background-disabled: var(--slds-s-input-color-background-disabled); --slds-s-input-color-background-disabled: var(--slds-g-color-disabled-container-1); --sds-s-input-color-background-invalid: var(--slds-s-input-color-background-invalid); --slds-s-input-color-background-invalid: var(--slds-g-color-palette-pink-95); --sds-s-input-color-border: var(--slds-s-input-color-border); --slds-s-input-color-border: var(--slds-g-color-border-2); --sds-s-input-color-border-disabled: var(--slds-s-input-color-border-disabled); --slds-s-input-color-border-disabled: var(--slds-g-color-border-disabled-1); --sds-s-input-color-border-focus: var(--slds-s-input-color-border-focus); --slds-s-input-color-border-focus: var(--slds-g-color-border-2); --sds-s-input-spacing: var(--slds-s-input-spacing); --slds-s-input-spacing: var(--slds-g-spacing-2); --sds-s-input-color: var(--slds-s-input-color); --slds-s-input-color: var(--slds-g-color-on-surface-2); --sds-s-input-color-disabled: var(--slds-s-input-color-disabled); --slds-s-input-color-disabled: var(--slds-g-color-on-disabled-1); --sds-s-input-color-invalid: var(--slds-s-input-color-invalid); --slds-s-input-color-invalid: var(--slds-g-color-palette-pink-40); --sds-s-input-shadow-focus: var(--slds-s-input-shadow-focus); --slds-s-input-shadow-focus: 2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset, 0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15); --sds-s-input-shadow-invalid: var(--slds-s-input-shadow-invalid); --slds-s-input-shadow-invalid: none; --sds-s-icon-color-foreground: var(--slds-s-icon-color-foreground); --slds-s-icon-color-foreground: var(--slds-g-color-on-surface-1); --sds-s-icon-radius-border: var(--slds-s-icon-radius-border); --slds-s-icon-radius-border: var(--slds-g-radius-border-circle); --sds-s-helptext-color: var(--slds-s-helptext-color); --slds-s-helptext-color: var(--slds-g-color-on-surface-1); --sds-s-helptext-font-size: var(--slds-s-helptext-font-size); --slds-s-helptext-font-size: var(--slds-g-font-scale-neg-1); --sds-s-helptext-spacing: var(--slds-s-helptext-spacing); --slds-s-helptext-spacing: var(--slds-g-spacing-1); --sds-s-header-sizing-height: var(--slds-s-header-sizing-height); --slds-s-header-sizing-height: 3.125rem; --sds-s-container-color: var(--slds-s-container-color); --slds-s-container-color: var(--slds-g-color-on-surface-1); --sds-s-container-shadow: var(--slds-s-container-shadow); --slds-s-container-shadow: none; --sds-s-container-footer-sizing-border: var(--slds-s-container-footer-sizing-border); --slds-s-container-footer-sizing-border: var(--slds-g-sizing-border-1); --sds-s-container-color-border: var(--slds-s-container-color-border); --slds-s-container-color-border: transparent; --sds-s-container-sizing-border: var(--slds-s-container-sizing-border); --slds-s-container-sizing-border: 0; --sds-s-container-radius-border: var(--slds-s-container-radius-border); --slds-s-container-radius-border: var(--slds-g-radius-border-4); --sds-s-container-heading-font-color: var(--slds-s-container-heading-font-color); --slds-s-container-heading-font-color: var(--slds-g-color-on-surface-3); --sds-s-container-heading-font-size: var(--slds-s-container-heading-font-size); --slds-s-container-heading-font-size: var(--slds-g-font-scale-3); --sds-s-container-heading-font-weight: var(--slds-s-container-heading-font-weight); --slds-s-container-heading-font-weight: var(--slds-g-font-weight-4); --sds-s-container-heading-font-align: var(--slds-s-container-heading-font-align); --slds-s-container-heading-font-align: left; --sds-s-container-footer-font-align: var(--slds-s-container-footer-font-align); --slds-s-container-footer-font-align: right; --sds-s-container-footer-font-color: var(--slds-s-container-footer-font-color); --slds-s-container-footer-font-color: var(--slds-g-color-on-surface-2); --sds-s-container-footer-color-background: var(--slds-s-container-footer-color-background); --slds-s-container-footer-color-background: var(--slds-g-color-surface-container-1); --sds-s-container-content-color: var(--slds-s-container-content-color); --slds-s-container-content-color: var(--slds-g-color-on-surface-1); --sds-s-container-heading-var-font-size: var(--slds-s-container-heading-var-font-size); --slds-s-container-heading-var-font-size: var(--slds-g-font-scale-var-3); --sds-s-button-color-background: var(--slds-s-button-color-background); --slds-s-button-color-background: var(--slds-g-color-surface-container-1); --sds-s-button-color-background-hover: var(--slds-s-button-color-background-hover); --slds-s-button-color-background-hover: var(--slds-g-color-brand-base-90); --sds-s-button-color-background-focus: var(--slds-s-button-color-background-focus); --slds-s-button-color-background-focus: var(--slds-g-color-surface-container-2); --sds-s-button-color-background-active: var(--slds-s-button-color-background-active); --slds-s-button-color-background-active: var(--slds-g-color-surface-container-2); --sds-s-button-color-border: var(--slds-s-button-color-border); --slds-s-button-color-border: var(--slds-g-color-border-2); --sds-s-button-shadow-focus: var(--slds-s-button-shadow-focus); --slds-s-button-shadow-focus: 0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15); --sds-s-button-shadow-focus-inverse: var(--slds-s-button-shadow-focus-inverse); --slds-s-button-shadow-focus-inverse: 0 0 0 2px var(--slds-g-color-brand-base-15), 0 0 0 4px var(--slds-g-color-surface-1); --sds-s-button-shadow-active: var(--slds-s-button-shadow-active); --slds-s-button-shadow-active: 2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset; --sds-s-button-brand-shadow-hover: var(--slds-s-button-brand-shadow-hover); --slds-s-button-brand-shadow-hover: 0 2.5px 0 0 var(--slds-g-color-accent-3); --sds-s-button-bordered-shadow-hover: var(--slds-s-button-bordered-shadow-hover); --slds-s-button-bordered-shadow-hover: 0 1.5px 0 0 var(--slds-g-color-neutral-base-30); --sds-s-button-transform-hover: var(--slds-s-button-transform-hover); --slds-s-button-transform-hover: translateY(calc(var(--slds-g-sizing-1) * -1)); --sds-s-button-radius-border: var(--slds-s-button-radius-border); --slds-s-button-radius-border: var(--slds-g-radius-border-pill); --sds-s-button-color: var(--slds-s-button-color); --slds-s-button-color: var(--slds-g-color-accent-2); --sds-s-button-color-hover: var(--slds-s-button-color-hover); --slds-s-button-color-hover: var(--slds-g-color-on-surface-3); --sds-s-button-spacing-inline: var(--slds-s-button-spacing-inline); --slds-s-button-spacing-inline: var(--slds-g-spacing-4); --sds-s-backdrop-color-background: var(--slds-s-backdrop-color-background); --slds-s-backdrop-color-background: rgba(92, 92, 92, 0.8); --sds-s-avatar-radius-border: var(--slds-s-avatar-radius-border); --slds-s-avatar-radius-border: var(--slds-g-radius-border-circle); --sds-s-alert-font-weight: var(--slds-s-alert-font-weight); --slds-s-alert-font-weight: var(--slds-g-font-weight-6); --sds-s-alert-close-button-hover: var(--slds-s-alert-close-button-hover); --slds-s-alert-close-button-hover: var(--slds-g-color-on-surface-3); } } @layer component { :where(html) { --_slds-c-path-item-color-background-active: var(--slds-g-color-surface-container-inverse-1); --_slds-c-path-item-color-background-active-hover: var(--slds-g-color-surface-container-inverse-2); --_slds-c-path-item-color-background-incomplete: var(--slds-g-color-surface-container-3); --_slds-c-path-item-color-incomplete: var(--slds-g-color-on-surface-2); --_slds-c-path-item-color-background-incomplete-hover: var(--slds-g-color-neutral-base-70); --_slds-c-path-item-color-background-complete: var(--slds-g-color-success-container-1); --_slds-c-path-item-color-background-complete-hover: var(--slds-g-color-success-container-1); --_slds-c-path-item-color-background-success: var(--slds-g-color-success-container-1); --_slds-c-path-item-color-background-error: var(--slds-g-color-error-container-1); --_slds-c-path-item-sizing-border: 0.0625rem; --_slds-c-path-item-sizing-height: 1.875rem; --_slds-c-globalnavigation-sizing-border: 0; --_slds-c-globalnavigation-spacing-block: var(--slds-g-spacing-1); --_slds-c-globalnavigation-spacing-gap: var(--slds-g-spacing-1); --_slds-c-globalnavigation-item-sizing-width-max: var(--slds-g-sizing-15); --_slds-c-globalnavigation-item-sizing-border: 0; --_slds-c-globalnavigation-item-radius-border: var(--slds-g-radius-border-3); --_slds-c-globalnavigation-item-sizing-border-hover: 3px; --_slds-c-globalnavigation-item-sizing-border-active: 0; --_slds-c-globalnavigation-item-color-background-hover: transparent; --_slds-c-globalnavigation-item-color-background-active: transparent; --_slds-c-globalnavigation-item-color-border-success: var(--slds-g-color-on-success-1); --_slds-c-globalnavigation-item-color-border-error: var(--slds-g-color-on-error-1); --_slds-c-globalnavigation-item-color-border-warning: var(--slds-g-color-on-warning-1); --_slds-c-globalnavigation-item-color-border-hover: var(--slds-g-color-brand-base-15); --_slds-c-globalnavigation-item-color-border-active: var(--slds-g-color-accent-2); --_slds-c-globalnavigation-item-shadow-focus: 0 0 0 2px var(--slds-g-color-brand-base-15) inset; --_slds-c-globalnavigation-font-decoration-focus: none; --_slds-c-globalnavigation-font-weight: 500; --_slds-c-globalnavigation-app-font-weight: var(--slds-g-font-weight-4); --_slds-c-globalnavigation-item-color-active: var(--slds-g-color-accent-2); --_slds-c-globalnavigation-subtab-color-background-active: var(--slds-g-color-brand-base-90); --_slds-c-globalnavigation-subtab-color-background-hover: var(--slds-g-color-surface-container-2); --_slds-c-globalheader-color-background: #ffffff; --_slds-c-globalheader-color: #5c5c5c; --_slds-c-globalheader-color-hover: #444444; --_slds-c-utilitybar-sizing-border-hover: 3px; --_slds-c-utilitybar-sizing-border-active: 3px; --_slds-c-utilitybar-color-border-hover: var(--slds-g-color-brand-base-15); --_slds-c-utilitybar-color-border-active: var(--slds-g-color-accent-2); --_slds-c-utilitybar-color-background-hover: var(--slds-g-color-surface-1); --_slds-c-utilitybar-color-background-active: var(--slds-g-color-surface-1); --_slds-c-utilitybar-color: var(--slds-g-color-on-surface-1); --_slds-c-utilitybar-color-hover: var(--slds-g-color-brand-base-15); --_slds-c-utilitybar-color-active: var(--slds-g-color-accent-2); --_slds-c-utilitybar-font-weight: var(--slds-g-font-weight-6); --_slds-c-datatable-color-background-error: var(--slds-g-color-error-container-1); --_slds-c-button-destructive-color-background: var(--slds-g-color-error-base-50); --_slds-c-button-destructive-color-border: var(--slds-g-color-error-base-50); --_slds-c-button-destructive-color: var(--slds-g-color-neutral-base-100); --_slds-c-button-destructive-color-background-hover: var(--slds-g-color-error-base-40); --_slds-c-button-destructive-color-border-hover: var(--slds-g-color-error-base-40); --_slds-c-button-success-color-background: var(--slds-g-color-success-base-50); --_slds-c-button-success-color: var(--slds-g-color-neutral-base-100); --_slds-c-button-success-color-border: var(--slds-g-color-success-base-50); --_slds-c-button-success-color-background-hover: var(--slds-g-color-success-base-40); --_slds-c-button-success-color-border-hover: var(--slds-g-color-success-base-40); --_slds-c-button-font-weight: var(--slds-g-font-weight-6); --_slds-c-buttonicon-brand-color-background-active: var(--slds-g-color-accent-container-2); --_slds-c-buttonicon-brand-sizing-border-active: 0; --_slds-c-buttonicon-bare-radius-focus: var(--slds-g-radius-border-1); --_slds-c-brandband-scrim-sizing-height: 3.125rem; --_slds-c-brandband-sizing-height-small: 6rem; --_slds-c-brandband-sizing-height-medium: 12.5rem; --_slds-c-brandband-sizing-height-large: 18.75rem; } } *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--slds-g-font-family-base); font-size: 100%; line-height: var(--slds-g-font-lineheight-base); background: var(--slds-g-color-surface-2); color: var(--slds-g-color-on-surface-3); -webkit-tap-highlight-color: transparent; } body { font-size: var(--slds-g-font-size-base, 0.8125rem); background: transparent; } ::placeholder { color: var(--slds-g-color-on-surface-1); font-weight: var(--slds-g-font-weight-4); opacity: 1; } ::selection { background: var(--slds-g-color-brand-base-90); text-shadow: none; color: var(--slds-g-color-brand-base-15); } h1, h2, h3, h4, h5, h6, p, ol, ul, dl, fieldset { margin: 0; padding: 0; } dd, figure { margin: 0; } abbr[title] { text-decoration: none; border: 0; cursor: help; } fieldset { border: 0; } hr { border: 0; padding: 0; display: block; margin-block: var(--slds-g-spacing-6); margin-inline: 0; border-block-start: 1px solid var(--slds-g-color-border-1); height: 1px; clear: both; } h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: 1em; } ol, ul { list-style: none; } a { color: var(--slds-s-link-color); text-decoration: none; transition: color 0.1s linear; } a:hover, a:focus-visible { text-decoration: underline; color: var(--slds-s-link-color-hover); } a:active { color: var(--slds-s-link-color-active); } a:focus-visible { outline-color: var(--slds-s-link-outline-color); } a, button { cursor: pointer; } button { padding: 0; } button, input, optgroup, select, textarea { font: inherit; } b, strong, dfn { font-weight: var(--slds-g-font-weight-7); } mark { background-color: var(--slds-g-color-palette-yellow-90); color: var(--slds-g-color-neutral-base-10); } input[type='search'] { box-sizing: border-box; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } img { max-width: 100%; height: auto; } .slds-icon-standard-header-discounts { --slds-c-icon-color-background: rgb(92, 92, 92); } .slds-icon-standard-contact { --slds-c-icon-color-background: rgb(150, 2, 199); } .slds-icon-standard-prep-flow { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-crypto-transaction { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-multi-select-checkbox { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-work-order { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-post { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-global-constant { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-change-request { --slds-c-icon-color-background: rgb(5, 103, 100); } .slds-icon-standard-indicator-performance-period { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-data-cloud { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-carousel { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-account-score { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-work-contract { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-impact-strategy-assignment { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-resource-skill { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-system-and-global-variable { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-segments { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-account-info { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-prompt-builder { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-goals { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-tour-check { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-adjust-value { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-case-wrap-up { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-investment-account { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-store { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-slider { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-output { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-medication-ingredient { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-store-group { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-all { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-service-territory-policy { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-slack-conversations { --slds-c-icon-color-background: rgb(72, 26, 84); } .slds-icon-standard-picklist-choice { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-choice { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-funding-requirement { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-your-account { --slds-c-icon-color-background: rgb(1, 68, 134); } .slds-icon-standard-app { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-default { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-case-milestone { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-operation-plan { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-today { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-buyer-account { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-lead-list { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-list-rate { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-work-plan-template { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-tableau { --slds-c-icon-color-background: rgb(15, 30, 60); } .slds-icon-standard-shift { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-people-score { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-product-item-transaction { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-person-language { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-apex { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-reply-text { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-answer-private { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-immunization { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-asset-downtime-period { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-opportunity-contact-role { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-retail-banking-console { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-channel-program-members { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-apps-admin { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-metric-definition { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-datadotcom { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-settings { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-network-contract { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-crypto-transaction-envelope-item { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-product-item { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-metrics { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-topic2 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-partner-fund-allocation { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-care-request-reviewer { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-indicator-definition { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-crypto-transaction-envelope-change-snapshot { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-standard-operation-plan-step-execution { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-approval { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-work-queue { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-iot-orchestrations { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-visualforce-page { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-person-account { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-entity { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-dynamic-highlights-panel { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-service-territory-location { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-qualifications { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-document-preview { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-tax-treatment { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-entitlement-policy { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-form { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-query-editor { --slds-c-icon-color-background: rgb(126, 38, 0); } .slds-icon-standard-visualization { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-products { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-prompt { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-order-item { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-read-receipts { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-javascript-button { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-maintenance-asset { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-work-plan-rule { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-loop { --slds-c-icon-color-background: rgb(221, 122, 1); } .slds-icon-standard-portal-roles-and-subordinates { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-work-capacity-limit { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-employee-organization { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-workforce-engagement { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-constant { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-marketing-actions { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-case-transcript { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-list-fee { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-timesheet-entry { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-key-dates { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-multi-picklist { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-facility-bed { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-product-workspace { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-visit-templates { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-restriction-policy { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-task { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-scheduling-workspace-territory { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-answer-best { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-attach { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-asset-action { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-section { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-service-request { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-orders { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-propagation-policy { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-budget { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-report-type { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-past-chat { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-crypto-transaction-envelope-change-log { --slds-c-icon-color-background: rgb(8, 73, 104); } .slds-icon-standard-feedback { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-action-list-component { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-opportunity-splits { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-location-permit { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-app-form-product-participant { --slds-c-icon-color-background: rgb(126, 38, 0); } .slds-icon-standard-messaging-user { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-filter-criteria { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-tax-policy { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-trailhead { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-entitlements { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-checkout { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-formula { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-case-log-a-call { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-shift-pattern-entry { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-thanks-loading { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-job-family { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-service-appointment-capacity-usage { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-inbox { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-channel-program-levels { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-letterhead { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-promotions-workspace { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-nft-settings { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-asset-hierarchy { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-email-chatter { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-custody-chain-entry { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-document-reference { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-announcement { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-field-sales { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-bot { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-macros { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-dashboard-ea { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-job-profile { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-steps { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-snippet-alt { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-asset-relationship { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-high-velocity-sales { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-brand { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-historical-adherence { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-visits { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-einstein-replies { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-coaching { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-record-lookup { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-product-service-campaign-item { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-scheduling-constraint { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-lightning-component { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-search { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-connected-apps { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-swarm-request { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-work-type-group { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-education { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-work-type { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-travel-mode { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-environment-hub { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-identifier { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-cms { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-call-coaching { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-salesforce-cms { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-price-sheet { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-thanks { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-service-territory-member { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-work-forecast { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-crypto-product-category-wallet-role { --slds-c-icon-color-background: rgb(5, 103, 100); } .slds-icon-standard-program-cohort-member { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-holiday-operating-hours { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-uploaded-model { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-user-role { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-observation-component { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-orchestrator { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-work-capacity-usage { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-record-create { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-campaign-members { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-retail-banking { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-product-service-campaign { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-portal-roles { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-operation-plan-step { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-calibration { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-answer-public { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-robot { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-display-text { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-product-consumed-state { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-budget-category-value { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-scheduling-workspace { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-unmatched { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-partners { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-email-iq { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-mulesoft { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-service-crew { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-payment-gateway { --slds-c-icon-color-background: rgb(5, 103, 100); } .slds-icon-standard-voice-call { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-cancel-checkout { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-asset-warranty { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-resource-capacity { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-repeaters { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-setup-modal { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-channel-programs { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-quip { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-quip-sheet { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-timeslot { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-live-chat { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-service-request-detail { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-med-rec-statement-recommendation { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-job-position { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-sobject-collection { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-user { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-client { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-screen { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-portal { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-partner-fund-request { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-asset-audit { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-resource-preference { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-record-consent { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-first-non-empty { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-rate-adjustment { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-impact-strategy { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-customer-360 { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-employee-job { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-resource-absence { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-registered-model { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-panel-detail { --slds-c-icon-color-background: rgb(8, 73, 104); } .slds-icon-standard-text-template { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-entitlement-template { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-lightning-usage { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-volume-discounts { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-indicator-result { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-product-transfer-state { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-medication-dispense { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-entitlement { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-empty { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-text { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-delegated-account { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-fulfillment-order { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-case-email { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-account { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-coupon-codes { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-assignment { --slds-c-icon-color-background: rgb(221, 122, 1); } .slds-icon-standard-wealth-management-console { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-task2, .slds-icon-standard-task-2 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-patient-medication-dosage { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-code-playground { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-social { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-endorsement { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-folder { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-service-crew-member { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-variation-attribute-setup { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-real-time { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-connect-wallet { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-flow { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-recipe { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-expense-report-entry { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-employee { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-omni-supervisor { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-capacity-plan { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-asset-object { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-product { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-crypto-transaction-envelope { --slds-c-icon-color-background: rgb(5, 103, 100); } .slds-icon-standard-topic { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-product-required { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-dynamic-record-choice { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-aggregation-policy { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-warranty-term { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-process { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-swarm-session { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-people { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-medication { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-reward { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-employee-contact { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-bundle-policy { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-performance { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-promotions { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-case-comment { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-price-book-entries { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-sales-channel { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-apex-plugin { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-party-profile { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-campaign { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-contact-request { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-business-hours { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-metric { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-evernote { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-variation-products { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-program-cohort { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-trailhead-alt { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-service-territory { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-customer-lifecycle-analytics { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-code-set { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-case { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-slack { --slds-c-icon-color-background: rgb(74, 21, 75); } .slds-icon-standard-currency { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-record { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-code-set-bundle { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-queue { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-schedule-objective { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-contract-line-item { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-skill-entity { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-funding-award-adjustment { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-skill { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-operating-hours { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-crypto-product { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-taxonomy { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-operation-plan-request { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-custom { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-related-list { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-bot-training { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-case-change-status { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-insurance-console { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-dashboard-component { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-incident { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-contract { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-policy { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-sobject { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-whatsapp { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-sales-cadence-target { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-photo { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-apps { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-timesheet { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-drafts { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-outcome { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-discounts { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-work-order-item { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-pricebook { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-scan-card { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-note { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-serialized-product-transaction { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-shift-pattern { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-buyer-group { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-price-adjustment-schedule { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-product-quantity-rules { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-medication-reconciliation { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-procedure { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-opportunity { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-news { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-sort-policy { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-display-rich-text { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-strategy { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-time-period { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-call-history { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-webcart { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-serialized-product { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-tax-rate { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-report { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-customer-workspace { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-groups { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-data-model { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-dashboard { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-generic-loading { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-number-input { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-toggle { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-address { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-price-books { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-entity-milestone { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-contract-line-outcome { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-wealth-management { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-customers { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-disclosure-and-compliance { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-workspace { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-story { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-service-appointment { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-maintenance-plan { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-contract-line-outcome-data { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-data-integration-hub { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-person-name { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-work-plan-template-entry { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-hierarchy { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-custom-component-task { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-partner-marketing-budget { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-asset-action-source { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-skill-requirement { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-filter-criteria-rule { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-no-code-model { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-location { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-promotion-tiers { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-radio-button { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-avatar-loading { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-article { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-custody-entry-verification { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-learner-program { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-invocable-action { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-device { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-app-form-participant { --slds-c-icon-color-background: rgb(5, 103, 100); } .slds-icon-standard-proposition { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-snippets { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-customer-portal-users { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-cost-model { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-path-experiment { --slds-c-icon-color-background: rgb(221, 122, 1); } .slds-icon-standard-actions-and-buttons { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-record-update { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-shift-type { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-water { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-log-a-call { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-crypto-wallet { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-crypto-wallet-group { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-quotes { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-data-governance { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-question-feed { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-attribute-based-pricing { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-walkthroughs { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-kanban { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-work-plan { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-shift-template { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-merge { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-expense { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-dataset { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-work-summary { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-shift-preference { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-product-consumed { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-canvas { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-bundles-pricing { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-forecasts { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-relationship { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-tour { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-service-resource { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-filter { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-sales-path { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-shift-scheduling-operation { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-data-graph { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-data-lake-objects { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-events { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-data-mapping { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-sms { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-impact-outcome { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-rtc-presence { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-avatar { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-record-delete { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-solution { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-nft-studio { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-manual-discounts { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-agent-home { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-linked { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-partner-fund-claim { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-individual { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-custom-notification { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-contract-payment { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-date-input { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-catalog { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-template { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-activation-target { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-standard-selling-model { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-shipment { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-budget-allocation { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-custody-override { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-record-signature-task { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-event { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-standard-insurance { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-live-chat-visitor { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-textarea { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-work-step { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-picklist-type { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-survey { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-operation-plan-execution { --slds-c-icon-color-background: rgb(90, 27, 169); } .slds-icon-standard-link { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-messaging-session { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-video { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-list-email { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-med-rec-recommendation { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-crypto-wallet-group-item { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-recycle-bin { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-document { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-product-transfer { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-instore-locations { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-recent { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-practitioner-role { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-password { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-datashare-target { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-expense-report { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-branch-merge { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-ai-accelerator-card { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-insights { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-standard-budget-period { --slds-c-icon-color-background: rgb(150, 2, 199); } .slds-icon-standard-market { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-dropbox { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-unified-health-score { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-bill-of-materials { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-calculated-insights { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-employee-job-position { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-file { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-outcome-activity { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-currency-input { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-data-transforms { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-variable { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-team-member { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-pricing-workspace { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-agent-session { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-guidance-center { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-crypto-category-wallet-group { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-group-loading { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-lead { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-email { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-service-contract { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-decision { --slds-c-icon-color-background: rgb(221, 122, 1); } .slds-icon-standard-promotion-segments { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-duration-downscale { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-snippet { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-entitlement-process { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-price-adjustment-matrix { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-contact-list { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-planogram { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-activations { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-scheduling-policy { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-channel-program-history { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-question-best { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-omni-channel { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-collection-variable { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-indicator-assignment { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-procedure-detail { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-sales-value { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-knowledge { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-standard-datashares { --slds-c-icon-color-background: rgb(150, 2, 199); } .slds-icon-standard-date-time { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-category { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-maintenance-work-rule { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-data-streams { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-textbox { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-standard-lead-insights { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-waits { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-concur { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-feed { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-sort { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-messaging-conversation { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-service-report { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-standard-iot-context { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-price-adjustment-tier { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-asset-state-period { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-call { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-collection { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-stage { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-sales-cadence { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-product-request-line-item { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-return-order-line-item { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-chart { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-customer { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-buyer-group-qualifier { --slds-c-icon-color-background: rgb(57, 101, 71); } .slds-icon-standard-quick-text { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-home { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-standard-sossession { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-digital-verification-config { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-aggregate { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-bundle-config { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-title-party { --slds-c-icon-color-background: rgb(5, 103, 100); } .slds-icon-standard-employee-asset { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-process-exception { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-product-warranty-term { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-standard-problem { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-stage-collection { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-product-request { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-logging { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-digital-verification-config-group { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-assigned-resource { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-return-order { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-poll { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-household { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-work-step-template { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-medication-statement { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-labels { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-ad-event-action { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-ad-event-cause { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-ad-event-effect { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-ad-event-factor { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-ad-event-info { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-ad-event-outcome { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-ad-event-party { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-standard-adverse-event { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-billing { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-calculated-dimension { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-calculated-measure { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-disease-definition-criteria { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-disease-investigation { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-disease-outbreak { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-icon-standard-edit-form { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-enrollee-status { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-eval-result { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-event-ext { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-life-sciences { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-map-line-item { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-medication-administration { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-member-period { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-patient-service { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-procedure-output-resolution { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-program-detail { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-program-site { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-program-status { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-prospect { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-replace { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-reset-password { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-send-log { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-study { --slds-c-icon-color-background: rgb(47, 44, 183); } .slds-icon-standard-study-candidate { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-study-related { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-sub-metric { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-usage-billing-period-item { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-usage-summary { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-table { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-transaction-usage-entitlement { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-usage-entitlement-account { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-usage-entitlement-bucket { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-usage-entitlement-entry { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-standard-usage-ratable-summary { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-standard-changes { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-custom-custom110, .slds-icon-custom-110 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom100, .slds-icon-custom-100 { --slds-c-icon-color-background: rgb(225, 93, 118); } .slds-icon-custom-custom111, .slds-icon-custom-111 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom1, .slds-icon-custom-1 { --slds-c-icon-color-background: rgb(255, 123, 132); } .slds-icon-custom-custom101, .slds-icon-custom-101 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom112, .slds-icon-custom-112 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom2, .slds-icon-custom-2 { --slds-c-icon-color-background: rgb(207, 208, 92); } .slds-icon-custom-custom102, .slds-icon-custom-102 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom113, .slds-icon-custom-113 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom90, .slds-icon-custom-90 { --slds-c-icon-color-background: rgb(34, 164, 138); } .slds-icon-custom-custom3, .slds-icon-custom-3 { --slds-c-icon-color-background: rgb(236, 180, 108); } .slds-icon-custom-custom103, .slds-icon-custom-103 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom80, .slds-icon-custom-80 { --slds-c-icon-color-background: rgb(101, 154, 213); } .slds-icon-custom-custom91, .slds-icon-custom-91 { --slds-c-icon-color-background: rgb(191, 123, 102); } .slds-icon-custom-custom4, .slds-icon-custom-4 { --slds-c-icon-color-background: rgb(225, 217, 81); } .slds-icon-custom-custom104, .slds-icon-custom-104 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom70, .slds-icon-custom-70 { --slds-c-icon-color-background: rgb(231, 105, 180); } .slds-icon-custom-custom81, .slds-icon-custom-81 { --slds-c-icon-color-background: rgb(218, 98, 127); } .slds-icon-custom-custom92, .slds-icon-custom-92 { --slds-c-icon-color-background: rgb(81, 126, 130); } .slds-icon-custom-custom5, .slds-icon-custom-5 { --slds-c-icon-color-background: rgb(159, 219, 102); } .slds-icon-custom-custom105, .slds-icon-custom-105 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom60, .slds-icon-custom-60 { --slds-c-icon-color-background: rgb(191, 90, 136); } .slds-icon-custom-custom71, .slds-icon-custom-71 { --slds-c-icon-color-background: rgb(227, 110, 227); } .slds-icon-custom-custom82, .slds-icon-custom-82 { --slds-c-icon-color-background: rgb(209, 91, 151); } .slds-icon-custom-custom93, .slds-icon-custom-93 { --slds-c-icon-color-background: rgb(144, 77, 76); } .slds-icon-custom-custom6, .slds-icon-custom-6 { --slds-c-icon-color-background: rgb(84, 196, 115); } .slds-icon-custom-custom106, .slds-icon-custom-106 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom50, .slds-icon-custom-50 { --slds-c-icon-color-background: rgb(73, 188, 211); } .slds-icon-custom-custom61, .slds-icon-custom-61 { --slds-c-icon-color-background: rgb(245, 115, 118); } .slds-icon-custom-custom72, .slds-icon-custom-72 { --slds-c-icon-color-background: rgb(141, 155, 251); } .slds-icon-custom-custom83, .slds-icon-custom-83 { --slds-c-icon-color-background: rgb(231, 128, 111); } .slds-icon-custom-custom94, .slds-icon-custom-94 { --slds-c-icon-color-background: rgb(67, 156, 186); } .slds-icon-custom-custom7, .slds-icon-custom-7 { --slds-c-icon-color-background: rgb(106, 137, 229); } .slds-icon-custom-custom107, .slds-icon-custom-107 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom40, .slds-icon-custom-40 { --slds-c-icon-color-background: rgb(131, 199, 94); } .slds-icon-custom-custom51, .slds-icon-custom-51 { --slds-c-icon-color-background: rgb(216, 199, 96); } .slds-icon-custom-custom62, .slds-icon-custom-62 { --slds-c-icon-color-background: rgb(107, 146, 220); } .slds-icon-custom-custom73, .slds-icon-custom-73 { --slds-c-icon-color-background: rgb(103, 158, 240); } .slds-icon-custom-custom84, .slds-icon-custom-84 { --slds-c-icon-color-background: rgb(246, 112, 123); } .slds-icon-custom-custom95, .slds-icon-custom-95 { --slds-c-icon-color-background: rgb(139, 207, 106); } .slds-icon-custom-custom8, .slds-icon-custom-8 { --slds-c-icon-color-background: rgb(80, 206, 185); } .slds-icon-custom-custom108, .slds-icon-custom-108 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom30, .slds-icon-custom-30 { --slds-c-icon-color-background: rgb(245, 159, 113); } .slds-icon-custom-custom41, .slds-icon-custom-41 { --slds-c-icon-color-background: rgb(67, 181, 181); } .slds-icon-custom-custom52, .slds-icon-custom-52 { --slds-c-icon-color-background: rgb(238, 142, 111); } .slds-icon-custom-custom63, .slds-icon-custom-63 { --slds-c-icon-color-background: rgb(124, 207, 96); } .slds-icon-custom-custom74, .slds-icon-custom-74 { --slds-c-icon-color-background: rgb(65, 200, 160); } .slds-icon-custom-custom85, .slds-icon-custom-85 { --slds-c-icon-color-background: rgb(242, 104, 145); } .slds-icon-custom-custom96, .slds-icon-custom-96 { --slds-c-icon-color-background: rgb(109, 157, 227); } .slds-icon-custom-custom9, .slds-icon-custom-9 { --slds-c-icon-color-background: rgb(107, 158, 226); } .slds-icon-custom-custom109, .slds-icon-custom-109 { --slds-c-icon-color-background: rgb(242, 139, 0); } .slds-icon-custom-custom20, .slds-icon-custom-20 { --slds-c-icon-color-background: rgb(72, 199, 200); } .slds-icon-custom-custom31, .slds-icon-custom-31 { --slds-c-icon-color-background: rgb(235, 104, 127); } .slds-icon-custom-custom42, .slds-icon-custom-42 { --slds-c-icon-color-background: rgb(207, 208, 91); } .slds-icon-custom-custom53, .slds-icon-custom-53 { --slds-c-icon-color-background: rgb(243, 110, 131); } .slds-icon-custom-custom64, .slds-icon-custom-64 { --slds-c-icon-color-background: rgb(97, 143, 216); } .slds-icon-custom-custom75, .slds-icon-custom-75 { --slds-c-icon-color-background: rgb(205, 159, 101); } .slds-icon-custom-custom86, .slds-icon-custom-86 { --slds-c-icon-color-background: rgb(226, 96, 171); } .slds-icon-custom-custom97, .slds-icon-custom-97 { --slds-c-icon-color-background: rgb(221, 96, 133); } .slds-icon-custom-custom10, .slds-icon-custom-10 { --slds-c-icon-color-background: rgb(100, 136, 227); } .slds-icon-custom-custom21, .slds-icon-custom-21 { --slds-c-icon-color-background: rgb(138, 122, 237); } .slds-icon-custom-custom32, .slds-icon-custom-32 { --slds-c-icon-color-background: rgb(56, 195, 147); } .slds-icon-custom-custom43, .slds-icon-custom-43 { --slds-c-icon-color-background: rgb(127, 147, 249); } .slds-icon-custom-custom54, .slds-icon-custom-54 { --slds-c-icon-color-background: rgb(234, 112, 177); } .slds-icon-custom-custom65, .slds-icon-custom-65 { --slds-c-icon-color-background: rgb(242, 121, 171); } .slds-icon-custom-custom76, .slds-icon-custom-76 { --slds-c-icon-color-background: rgb(219, 109, 122); } .slds-icon-custom-custom87, .slds-icon-custom-87 { --slds-c-icon-color-background: rgb(216, 118, 229); } .slds-icon-custom-custom98, .slds-icon-custom-98 { --slds-c-icon-color-background: rgb(225, 190, 92); } .slds-icon-custom-custom11, .slds-icon-custom-11 { --slds-c-icon-color-background: rgb(135, 132, 234); } .slds-icon-custom-custom22, .slds-icon-custom-22 { --slds-c-icon-color-background: rgb(139, 133, 249); } .slds-icon-custom-custom33, .slds-icon-custom-33 { --slds-c-icon-color-background: rgb(151, 207, 93); } .slds-icon-custom-custom44, .slds-icon-custom-44 { --slds-c-icon-color-background: rgb(200, 202, 88); } .slds-icon-custom-custom55, .slds-icon-custom-55 { --slds-c-icon-color-background: rgb(214, 110, 224); } .slds-icon-custom-custom66, .slds-icon-custom-66 { --slds-c-icon-color-background: rgb(216, 190, 95); } .slds-icon-custom-custom77, .slds-icon-custom-77 { --slds-c-icon-color-background: rgb(181, 93, 91); } .slds-icon-custom-custom88, .slds-icon-custom-88 { --slds-c-icon-color-background: rgb(153, 111, 230); } .slds-icon-custom-custom99, .slds-icon-custom-99 { --slds-c-icon-color-background: rgb(240, 133, 110); } .slds-icon-custom-custom12, .slds-icon-custom-12 { --slds-c-icon-color-background: rgb(220, 113, 209); } .slds-icon-custom-custom23, .slds-icon-custom-23 { --slds-c-icon-color-background: rgb(176, 112, 230); } .slds-icon-custom-custom34, .slds-icon-custom-34 { --slds-c-icon-color-background: rgb(213, 138, 106); } .slds-icon-custom-custom45, .slds-icon-custom-45 { --slds-c-icon-color-background: rgb(217, 88, 121); } .slds-icon-custom-custom56, .slds-icon-custom-56 { --slds-c-icon-color-background: rgb(113, 141, 235); } .slds-icon-custom-custom67, .slds-icon-custom-67 { --slds-c-icon-color-background: rgb(248, 125, 118); } .slds-icon-custom-custom78, .slds-icon-custom-78 { --slds-c-icon-color-background: rgb(90, 149, 221); } .slds-icon-custom-custom89, .slds-icon-custom-89 { --slds-c-icon-color-background: rgb(62, 153, 190); } .slds-icon-custom-custom13, .slds-icon-custom-13 { --slds-c-icon-color-background: rgb(223, 97, 132); } .slds-icon-custom-custom24, .slds-icon-custom-24 { --slds-c-icon-color-background: rgb(229, 103, 152); } .slds-icon-custom-custom35, .slds-icon-custom-35 { --slds-c-icon-color-background: rgb(233, 99, 126); } .slds-icon-custom-custom46, .slds-icon-custom-46 { --slds-c-icon-color-background: rgb(103, 165, 231); } .slds-icon-custom-custom57, .slds-icon-custom-57 { --slds-c-icon-color-background: rgb(90, 156, 221); } .slds-icon-custom-custom68, .slds-icon-custom-68 { --slds-c-icon-color-background: rgb(242, 105, 121); } .slds-icon-custom-custom79, .slds-icon-custom-79 { --slds-c-icon-color-background: rgb(142, 211, 99); } .slds-icon-custom-custom14, .slds-icon-custom-14 { --slds-c-icon-color-background: rgb(60, 194, 179); } .slds-icon-custom-custom25, .slds-icon-custom-25 { --slds-c-icon-color-background: rgb(228, 111, 190); } .slds-icon-custom-custom36, .slds-icon-custom-36 { --slds-c-icon-color-background: rgb(212, 114, 212); } .slds-icon-custom-custom47, .slds-icon-custom-47 { --slds-c-icon-color-background: rgb(95, 204, 100); } .slds-icon-custom-custom58, .slds-icon-custom-58 { --slds-c-icon-color-background: rgb(52, 181, 157); } .slds-icon-custom-custom69, .slds-icon-custom-69 { --slds-c-icon-color-background: rgb(237, 99, 135); } .slds-icon-custom-custom15, .slds-icon-custom-15 { --slds-c-icon-color-background: rgb(247, 126, 117); } .slds-icon-custom-custom26, .slds-icon-custom-26 { --slds-c-icon-color-background: rgb(118, 152, 240); } .slds-icon-custom-custom37, .slds-icon-custom-37 { --slds-c-icon-color-background: rgb(140, 137, 242); } .slds-icon-custom-custom48, .slds-icon-custom-48 { --slds-c-icon-color-background: rgb(239, 105, 127); } .slds-icon-custom-custom59, .slds-icon-custom-59 { --slds-c-icon-color-background: rgb(227, 208, 103); } .slds-icon-custom-custom16, .slds-icon-custom-16 { --slds-c-icon-color-background: rgb(233, 175, 103); } .slds-icon-custom-custom27, .slds-icon-custom-27 { --slds-c-icon-color-background: rgb(90, 176, 210); } .slds-icon-custom-custom38, .slds-icon-custom-38 { --slds-c-icon-color-background: rgb(83, 182, 215); } .slds-icon-custom-custom49, .slds-icon-custom-49 { --slds-c-icon-color-background: rgb(226, 92, 128); } .slds-icon-custom-custom17, .slds-icon-custom-17 { --slds-c-icon-color-background: rgb(172, 211, 96); } .slds-icon-custom-custom28, .slds-icon-custom-28 { --slds-c-icon-color-background: rgb(137, 192, 89); } .slds-icon-custom-custom39, .slds-icon-custom-39 { --slds-c-icon-color-background: rgb(79, 190, 117); } .slds-icon-custom-custom18, .slds-icon-custom-18 { --slds-c-icon-color-background: rgb(77, 202, 118); } .slds-icon-custom-custom29, .slds-icon-custom-29 { --slds-c-icon-color-background: rgb(189, 210, 95); } .slds-icon-custom-custom19, .slds-icon-custom-19 { --slds-c-icon-color-background: rgb(58, 190, 177); } .slds-icon-action-new-custom18 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom29 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-edit-groups { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom9 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-log-a-call { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom19 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-filter { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-user-activation { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-opportunity-competitor { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-canvas { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-change-record-type { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-new-notebook { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-docusign { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-share-link { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-add-file { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-edit-relationship { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-notebook { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-lead { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom-object { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-account { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-question-post-action { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-share-file { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-action-default-custom-object { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-opportunity-team-member { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-add-photo-video { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-sort { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-call { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-concur { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-reject { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-share-poll { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-scan-enabled { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-following { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-defer { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-opportunity-line-item { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-social-post { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-share-post { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-view-relationship { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-adjust-value { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-upload { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-remove-relationship { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-freeze-user { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-new-person-account { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-bug { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-apex { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-action-new-opportunity { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-fallback { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-dial-in { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-approval { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-change-owner { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-new-task { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-priority { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-remove { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-web-link { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-leave-group { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-manage-perm-sets { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-close { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-google-news { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-announcement { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-back { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom90 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-download { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-new-custom80 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom91 { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-action-search { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-event { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom70 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom81 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom92 { --slds-c-icon-color-background: rgb(5, 103, 100); } .slds-icon-action-refresh { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-share-thanks { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-update { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-email { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-join-group { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom60 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom71 { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-action-new-custom82 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom93 { --slds-c-icon-color-background: rgb(92, 92, 92); } .slds-icon-action-edit { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-quote { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-dropbox { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-description { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-map { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-user { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-reset-password { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-new-custom50 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom61 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom72 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom83 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom94 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-clone { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-script { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-delete { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom40 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom51 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom62 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom73 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom84 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom95 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-scan-disabled { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-action-share { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-new-custom30 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom41 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom52 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom63 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom74 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom85 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom96 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-log-event { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-group { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom20 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom31 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom42 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-info { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-new-custom53 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom64 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom75 { --slds-c-icon-color-background: rgb(147, 147, 147); } .slds-icon-action-new-custom86 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-flow { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-new-custom97 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-submit-for-approval { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-campaign { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom10 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom21 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom32 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom43 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom54 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom65 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom76 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom87 { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-action-new-custom98 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-case { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom100 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom1 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-contact { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-action-office-365 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom11 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom22 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom33 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom44 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom55 { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-action-new-custom66 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom77 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom88 { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-action-new-custom99 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-add-contact { --slds-c-icon-color-background: rgb(144, 80, 233); } .slds-icon-action-evernote { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom2 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-lead-convert { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom12 { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-action-new-custom23 { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-action-new-custom34 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom45 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom56 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom67 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-recall { --slds-c-icon-color-background: rgb(8, 73, 104); } .slds-icon-action-new-custom78 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom89 { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-follow { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-record { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom3 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-note { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom13 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom24 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom35 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom46 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom57 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom68 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom79 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-child-case { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom4 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom14 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom25 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom36 { --slds-c-icon-color-background: rgb(203, 101, 255); } .slds-icon-action-new-custom47 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom58 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-new-custom69 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom5 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-goal { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom15 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom26 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom37 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom48 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom59 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom6 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-log-this-event { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom16 { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-action-new-custom27 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom38 { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom49 { --slds-c-icon-color-background: rgb(255, 83, 138); } .slds-icon-action-new-custom7 { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-more { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-add-relationship { --slds-c-icon-color-background: rgb(27, 150, 255); } .slds-icon-action-new-custom17 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom28 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-new-custom39 { --slds-c-icon-color-background: rgb(59, 167, 85); } .slds-icon-action-password-unlock { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-check { --slds-c-icon-color-background: rgb(16, 124, 173); } .slds-icon-action-update-status { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-action-preview { --slds-c-icon-color-background: rgb(88, 103, 232); } .slds-icon-action-new-custom8 { --slds-c-icon-color-background: rgb(6, 165, 154); } .slds-icon-standard-entity-milestone-time { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-entity-milestone-date { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-outcome-timebound { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-outcome-datebound { --slds-c-icon-color-background: rgb(255, 93, 45); } .slds-icon-standard-submit-for-approval { --slds-c-icon-color-background: rgb(3, 45, 96); } .slds-icon-standard-it-service-management { --slds-c-icon-color-background: rgb(182, 5, 84); } .slds-timeline__item_expandable, .slds-timeline__item--expandable { position: relative; padding-block-end: var(--slds-g-spacing-4); } .slds-timeline__item_expandable .slds-media__figure, .slds-timeline__item--expandable .slds-media__figure { margin-inline-end: var(--slds-g-spacing-1); z-index: 1; } .slds-timeline__item_expandable .slds-media__figure .slds-button_icon, .slds-timeline__item--expandable .slds-media__figure .slds-button--icon { margin-inline-end: var(--slds-g-spacing-2); } .slds-timeline__item_expandable .slds-media__body, .slds-timeline__item--expandable .slds-media__body { padding-block: 0; padding-inline: var(--slds-g-spacing-1); } .slds-timeline__item_expandable .slds-checkbox, .slds-timeline__item--expandable .slds-checkbox { margin-inline-end: var(--slds-g-spacing-1); } .slds-timeline__item_expandable .slds-timeline__actions_inline, .slds-timeline__item--expandable .slds-timeline__actions--inline { flex-flow: row nowrap; align-items: center; flex-shrink: 0; margin-inline-start: var(--slds-g-spacing-2); } .slds-timeline__item_expandable .slds-timeline__actions_inline .slds-timeline__date, .slds-timeline__item--expandable .slds-timeline__actions--inline .slds-timeline__date { padding-inline-end: var(--slds-g-spacing-2); margin-block-end: 0; } .slds-timeline__item_expandable .slds-timeline__item_details, .slds-timeline__item--expandable .slds-timeline__item--details { visibility: hidden; opacity: 0; height: 0; padding: 0; } .slds-timeline__item_expandable.slds-is-open .slds-timeline__item_details, .slds-timeline__item--expandable.slds-is-open .slds-timeline__item--details { visibility: visible; opacity: 1; height: auto; padding: var(--slds-g-spacing-4); } .slds-timeline__item_expandable.slds-is-open .slds-timeline__details-action-icon, .slds-timeline__item--expandable.slds-is-open .slds-timeline__details-action-icon { transform: rotate(0); transform-origin: 45%; } .slds-timeline__item_expandable::before, .slds-timeline__item--expandable::before { content: ''; background: var(--slds-g-color-border-1); height: 100%; width: var(--slds-g-sizing-border-2); position: absolute; inset-inline-start: 2.235rem; inset-block-start: 0; inset-block-end: 0; margin-inline-start: var(--slds-g-sizing-border-2); } .slds-timeline__item_call::before, .slds-timeline__item--call::before { background: rgb(72, 195, 204); } .slds-timeline__item_email::before, .slds-timeline__item--email::before { background: rgb(147, 147, 147); } .slds-timeline__item_event::before, .slds-timeline__item--event::before { background: rgb(203, 101, 255); } .slds-timeline__item_task::before, .slds-timeline__item--task::before { background: rgb(75, 192, 118); } .slds-timeline__trigger { padding: var(--slds-g-spacing-1); } .slds-timeline__trigger:hover { background-color: var(--slds-g-color-surface-container-2); } .slds-timeline__icon { border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-surface-1); } .slds-timeline__actions { display: flex; flex-flow: column nowrap; align-items: flex-end; } .slds-timeline__date { margin-block-end: var(--slds-g-spacing-1); font-size: var(--slds-g-font-scale-neg-3); color: var(--slds-g-color-on-surface-2); } .slds-timeline__details-action-icon { transform: rotate(-90deg); } .slds-badge { display: inline-flex; align-items: center; padding-block: var(--slds-g-spacing-1); padding-inline: var(--slds-g-spacing-2); color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-1)); font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1)); font-weight: var(--slds-g-font-weight-4); line-height: normal; white-space: nowrap; border-width: var(--slds-c-badge-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-badge-color-border, transparent); border-radius: var(--slds-c-badge-radius-border, var(--slds-g-radius-border-1)); background-color: var(--slds-c-badge-color-background, var(--slds-g-color-surface-container-3)); } .slds-badge + .slds-badge { margin-inline-start: var(--slds-g-spacing-2); } .slds-badge:empty { padding: 0; } .slds-badge_inverse, .slds-badge--inverse { --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50)); --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-on-surface-inverse-1)); } .slds-badge_lightest, .slds-badge--lightest { /*! @css-var-fallback background-color */ --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--slds-g-color-surface-container-1)); --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-1)); } .slds-badge__icon { display: inline-flex; align-items: center; color: var(--slds-c-badge-icon-color-foreground, var(--slds-g-color-on-surface-1)); line-height: 1; vertical-align: middle; } .slds-badge__icon.slds-badge__icon_inverse, .slds-badge__icon.slds-badge__icon--inverse { --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor); } .slds-badge__icon_left, .slds-badge__icon--left { margin-inline-end: var(--slds-g-spacing-1); } .slds-badge__icon_right, .slds-badge__icon--right { margin-inline-start: var(--slds-g-spacing-1); } .slds-breadcrumb .slds-list__item, .slds-breadcrumb .slds-breadcrumb__item { position: relative; } .slds-breadcrumb .slds-list__item::before, .slds-breadcrumb .slds-breadcrumb__item::before { content: '>'; position: absolute; inset-inline-start: calc(var(--slds-g-spacing-1) * -1); } .slds-breadcrumb .slds-list__item > a, .slds-breadcrumb .slds-breadcrumb__item > a { display: block; padding-block-start: 0; padding-inline-end: var(--slds-c-breadcrumbs-spacing-inlineend, var(--slds-g-spacing-2)); padding-block-end: 0; padding-inline-start: var(--slds-c-breadcrumbs-spacing-inlinestart, var(--slds-g-spacing-2)); } .slds-breadcrumb .slds-list__item > a:hover, .slds-breadcrumb .slds-breadcrumb__item > a:hover { text-decoration: none; } .slds-breadcrumb .slds-list__item:first-child > a, .slds-breadcrumb .slds-breadcrumb__item:first-child > a { --slds-c-breadcrumbs-spacing-inlinestart: 0; } .slds-breadcrumb .slds-list__item:first-child::before, .slds-breadcrumb .slds-breadcrumb__item:first-child::before { content: ''; } .slds-breadcrumb .slds-dropdown-trigger { margin-inline-end: var(--slds-c-breadcrumbs-spacing-inlineend, var(--slds-g-spacing-2)); } [kx-scope='breadcrumbs-item'][kx-type='underline'] > a { position: relative; will-change: color, transform; transition: transform calc(calc(1 * 1) * 250ms / 1) cubic-bezier(0, 0.3, 0.15, 1); margin-inline-end: var(--slds-g-spacing-2); margin-inline-start: var(--slds-g-spacing-2); padding-inline-end: 0; padding-inline-start: 0; } [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:active { transform: scale(0.95); } @media (prefers-reduced-motion: reduce) { [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:active { transform: none; } } [kx-scope='breadcrumbs-item'][kx-type='underline'] > a::after { will-change: transform-origin, transform; content: ''; position: absolute; inset-block-start: 80%; inset-inline-start: 0%; height: 0.0625rem; width: 100%; background: var(--slds-g-color-accent-2); background-position: left top; transform: scaleX(0); transform-origin: var(--slds-kx-breadcrumbs-pointer-position-x, 50%) 0; transition: transform calc(calc(1 * 1) * 250ms / 1) cubic-bezier(0, 0.3, 0.15, 1); } [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:hover::after { transform: scaleX(1); } [kx-scope='breadcrumbs-item'][kx-type='underline']:first-child > a { margin-inline-start: 0; } .slds-button-group, .slds-button-group-list { display: inline-flex; } .slds-button-group .slds-button, .slds-button-group-list .slds-button { border-radius: 0; border-width: var(--slds-g-sizing-border-1); } .slds-button-group .slds-button:focus, .slds-button-group-list .slds-button:focus { z-index: 1; } .slds-button-group .slds-button:focus-visible, .slds-button-group-list .slds-button:focus-visible { --slds-c-button-shadow-focus: none; outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -2px; z-index: 1; } .slds-button-group .slds-button.slds-button_icon-bare:focus-visible, .slds-button-group .slds-button.slds-button--icon-bare:focus-visible, .slds-button-group-list .slds-button.slds-button_icon-bare:focus-visible, .slds-button-group-list .slds-button.slds-button--icon-bare:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-outset-focus-1); outline: 0; } .slds-button-group .slds-button.slds-button_destructive:focus-visible, .slds-button-group .slds-button.slds-button--destructive:focus-visible, .slds-button-group .slds-button.slds-button_success:focus-visible, .slds-button-group .slds-button.slds-button--success:focus-visible, .slds-button-group .slds-button.slds-button_brand:focus-visible, .slds-button-group .slds-button.slds-button--brand:focus-visible, .slds-button-group .slds-button.slds-button_icon-brand:focus-visible, .slds-button-group .slds-button.slds-button--icon-brand:focus-visible, .slds-button-group .slds-button.slds-is-selected:focus-visible, .slds-button-group-list .slds-button.slds-button_destructive:focus-visible, .slds-button-group-list .slds-button.slds-button--destructive:focus-visible, .slds-button-group-list .slds-button.slds-button_success:focus-visible, .slds-button-group-list .slds-button.slds-button--success:focus-visible, .slds-button-group-list .slds-button.slds-button_brand:focus-visible, .slds-button-group-list .slds-button.slds-button--brand:focus-visible, .slds-button-group-list .slds-button.slds-button_icon-brand:focus-visible, .slds-button-group-list .slds-button.slds-button--icon-brand:focus-visible, .slds-button-group-list .slds-button.slds-is-selected:focus-visible { box-shadow: inset 0 0 0 3px var(--slds-g-color-neutral-base-100); } .slds-button-group .slds-button.slds-button_inverse:focus-visible, .slds-button-group .slds-button.slds-button--inverse:focus-visible, .slds-button-group .slds-button.slds-button_icon-inverse:focus-visible, .slds-button-group .slds-button.slds-button--icon-inverse:focus-visible, .slds-button-group-list .slds-button.slds-button_inverse:focus-visible, .slds-button-group-list .slds-button.slds-button--inverse:focus-visible, .slds-button-group-list .slds-button.slds-button_icon-inverse:focus-visible, .slds-button-group-list .slds-button.slds-button--icon-inverse:focus-visible { outline-color: var(--slds-g-color-neutral-base-95); } .slds-button-group .slds-button_neutral[disabled], .slds-button-group .slds-button--neutral[disabled], .slds-button-group .slds-button_neutral:disabled, .slds-button-group .slds-button--neutral:disabled, .slds-button-group .slds-button_outline-brand[disabled], .slds-button-group .slds-button--outline-brand[disabled], .slds-button-group .slds-button_outline-brand:disabled, .slds-button-group .slds-button--outline-brand:disabled, .slds-button-group .slds-button_destructive[disabled], .slds-button-group .slds-button--destructive[disabled], .slds-button-group .slds-button_destructive:disabled, .slds-button-group .slds-button--destructive:disabled, .slds-button-group .slds-button_text-destructive[disabled], .slds-button-group .slds-button--text-destructive[disabled], .slds-button-group .slds-button_text-destructive:disabled, .slds-button-group .slds-button--text-destructive:disabled, .slds-button-group .slds-button_success[disabled], .slds-button-group .slds-button--success[disabled], .slds-button-group .slds-button_success:disabled, .slds-button-group .slds-button--success:disabled, .slds-button-group .slds-button_icon-border[disabled], .slds-button-group .slds-button--icon-border[disabled], .slds-button-group .slds-button_icon-border:disabled, .slds-button-group .slds-button--icon-border:disabled, .slds-button-group .slds-button_icon-border-filled[disabled], .slds-button-group .slds-button--icon-border-filled[disabled], .slds-button-group .slds-button_icon-border-filled:disabled, .slds-button-group .slds-button--icon-border-filled:disabled, .slds-button-group-list .slds-button_neutral[disabled], .slds-button-group-list .slds-button--neutral[disabled], .slds-button-group-list .slds-button_neutral:disabled, .slds-button-group-list .slds-button--neutral:disabled, .slds-button-group-list .slds-button_outline-brand[disabled], .slds-button-group-list .slds-button--outline-brand[disabled], .slds-button-group-list .slds-button_outline-brand:disabled, .slds-button-group-list .slds-button--outline-brand:disabled, .slds-button-group-list .slds-button_destructive[disabled], .slds-button-group-list .slds-button--destructive[disabled], .slds-button-group-list .slds-button_destructive:disabled, .slds-button-group-list .slds-button--destructive:disabled, .slds-button-group-list .slds-button_text-destructive[disabled], .slds-button-group-list .slds-button--text-destructive[disabled], .slds-button-group-list .slds-button_text-destructive:disabled, .slds-button-group-list .slds-button--text-destructive:disabled, .slds-button-group-list .slds-button_success[disabled], .slds-button-group-list .slds-button--success[disabled], .slds-button-group-list .slds-button_success:disabled, .slds-button-group-list .slds-button--success:disabled, .slds-button-group-list .slds-button_icon-border[disabled], .slds-button-group-list .slds-button--icon-border[disabled], .slds-button-group-list .slds-button_icon-border:disabled, .slds-button-group-list .slds-button--icon-border:disabled, .slds-button-group-list .slds-button_icon-border-filled[disabled], .slds-button-group-list .slds-button--icon-border-filled[disabled], .slds-button-group-list .slds-button_icon-border-filled:disabled, .slds-button-group-list .slds-button--icon-border-filled:disabled { border-color: var(--slds-g-color-border-2); } .slds-button-group .slds-button + .slds-button, .slds-button-group .slds-button + .slds-button_last .slds-button, .slds-button-group .slds-button + .slds-button--last .slds-button, .slds-button-group-list li + li .slds-button { margin-inline-start: calc(-1 * var(--slds-g-sizing-border-1)); } .slds-button-group .slds-button_brand + .slds-button_last .slds-button_icon-brand, .slds-button-group .slds-button--brand + .slds-button--last .slds-button--icon-brand, .slds-button-group-list li:last-child .slds-button_icon-brand, .slds-button-group-list li:last-child .slds-button--icon-brand, .slds-button-group .slds-button_brand + .slds-button_brand, .slds-button-group .slds-button--brand + .slds-button--brand { box-shadow: inset 1px 0 0 var(--slds-g-color-neutral-base-100); } .slds-button-group-list li:first-child .slds-button, .slds-button-group .slds-button:first-child { border-start-start-radius: var(--slds-s-button-radius-border); border-start-end-radius: 0; border-end-start-radius: var(--slds-s-button-radius-border); border-end-end-radius: 0; } .slds-button-group .slds-button:last-child, .slds-button-group-list li:last-child .slds-button, .slds-button-group .slds-button_last .slds-button, .slds-button-group .slds-button--last .slds-button, .slds-button-group .slds-button.slds-button_last, .slds-button-group .slds-button.slds-button--last, .slds-button-group .slds-button_last .slds-button:only-child, .slds-button-group .slds-button--last .slds-button:only-child { border-start-start-radius: 0; border-start-end-radius: var(--slds-s-button-radius-border); border-end-start-radius: 0; border-end-end-radius: var(--slds-s-button-radius-border); } .slds-button-group .slds-button:only-child, .slds-button-group-list li:only-child .slds-button { border-radius: var(--slds-s-button-radius-border); } .slds-button.slds-button_first.slds-button_first, .slds-button.slds-button--first.slds-button--first { border-inline-end: 0; border-start-start-radius: var(--slds-s-button-radius-border); border-start-end-radius: 0; border-end-start-radius: var(--slds-s-button-radius-border); border-end-end-radius: 0; } .slds-button.slds-button_middle.slds-button_middle, .slds-button.slds-button--middle.slds-button--middle { border-radius: 0; margin-inline-start: calc(var(--slds-g-sizing-border-1) * -1); } .slds-button.slds-button_last.slds-button_last, .slds-button.slds-button--last.slds-button--last { border-start-start-radius: 0; border-start-end-radius: var(--slds-s-button-radius-border); border-end-start-radius: 0; border-end-end-radius: var(--slds-s-button-radius-border); margin-inline-start: calc(var(--slds-g-sizing-border-1) * -1); } .slds-button-group + .slds-button-group, .slds-button-group + .slds-button-group-list, .slds-button-group + .slds-button, .slds-button-group-list + .slds-button-group-list, .slds-button-group-list + .slds-button-group, .slds-button-group-list + .slds-button { margin-inline-start: var(--slds-g-spacing-2); } .slds-button-group-row { display: inline-flex; } .slds-button-group-row .slds-button-group-item + .slds-button-group-item { margin-inline-start: var(--slds-g-spacing-2); } .slds-button-group-row .slds-button-group-item .slds-button { margin: 0; } .slds-button-space-left { margin-left: var(--slds-g-spacing-1); } .slds-button_small, .slds-button--small { line-height: var(--slds-g-sizing-8); min-height: var(--slds-g-sizing-9); } .slds-button { position: relative; display: inline-flex; align-items: center; padding-block-start: var(--slds-c-button-spacing-blockstart); padding-inline-end: var(--slds-c-button-spacing-inlineend); padding-block-end: var(--slds-c-button-spacing-blockend); padding-inline-start: var(--slds-c-button-spacing-inlinestart); background: none; background-color: var(--slds-c-button-color-background); background-clip: border-box; border-color: var(--slds-c-button-color-border, transparent); border-style: solid; border-width: var(--slds-c-button-sizing-border, var(--slds-g-sizing-border-1)); border-radius: var(--slds-c-button-radius-border, var(--slds-s-button-radius-border, var(--slds-g-radius-border-2))); box-shadow: var(--slds-c-button-shadow, var(--slds-s-button-shadow)); line-height: 1.875rem; text-decoration: none; color: var(--slds-c-button-text-color, var(--slds-s-button-color, var(--slds-g-color-accent-2))); appearance: none; white-space: normal; user-select: none; font-family: inherit; font-weight: var(--_slds-c-button-font-weight, --slds-g-font-weight-4); } .slds-button:hover, .slds-button:focus-visible, .slds-button:active, .slds-button:visited { text-decoration: none; } .slds-button:hover { --slds-c-button-color-border: var(--slds-c-button-color-border-hover, var(--slds-s-button-color-border-hover)); --slds-c-button-color-background: var(--slds-c-button-color-background-hover, revert); color: var(--slds-c-button-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))); box-shadow: var(--slds-s-button-shadow-hover, revert); } .slds-button:focus-visible { box-shadow: var(--slds-c-button-shadow-focus, var(--slds-g-shadow-outline-focus-1)); outline: 0; background-clip: padding-box; --slds-c-button-color-border: transparent; } .slds-button:active { color: var(--slds-c-button-text-color-active, var(--slds-g-color-accent-3)); --slds-c-button-color-background: var(--slds-c-button-color-background-active, revert); --slds-c-button-color-border: var(--slds-c-button-color-border-active, revert); } .slds-button[disabled], .slds-button:disabled { background-color: transparent; border-color: transparent; color: var(--slds-g-color-disabled-1); cursor: default; pointer-events: none; } .slds-button[disabled] *, .slds-button:disabled * { pointer-events: none; } .slds-button a { --slds-c-button-text-color: currentColor; } .slds-button:hover .slds-button__icon, .slds-button:focus-visible .slds-button__icon, .slds-button:active .slds-button__icon, .slds-button[disabled] .slds-button__icon, .slds-button:disabled .slds-button__icon { fill: currentColor; pointer-events: none; } .slds-button + .slds-button-group, .slds-button + .slds-button-group-list { margin-inline-start: var(--slds-g-spacing-1); } .slds-button + .slds-button { margin-inline-start: var(--slds-g-spacing-1); } .slds-button_neutral, .slds-button--neutral { justify-content: center; --slds-c-button-color-background: var(--slds-c-button-neutral-color-background, var(--slds-g-color-surface-container-1)); --slds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2)); --slds-c-button-spacing-blockstart: var(--slds-s-button-spacing-block); --slds-c-button-spacing-blockend: var(--slds-s-button-spacing-block); --slds-c-button-spacing-inlinestart: var(--slds-s-button-spacing-inline); --slds-c-button-spacing-inlineend: var(--slds-s-button-spacing-inline); } .slds-button_neutral:hover, .slds-button--neutral:hover, .slds-button_neutral:focus-visible, .slds-button--neutral:focus-visible { --slds-c-button-color-background-hover: var(--slds-c-button-neutral-color-background-hover, var(--slds-g-color-surface-container-2, revert)); --slds-c-button-color-border-hover: var(--slds-c-button-neutral-color-border-hover, var(--slds-g-color-border-2, revert)); } .slds-button_neutral:active, .slds-button--neutral:active { --slds-c-button-color-background-active: var(--slds-c-button-neutral-color-background-active, var(--slds-g-color-surface-container-2, revert)); --slds-c-button-color-border-active: var(--slds-c-button-neutral-color-border-active, var(--slds-g-color-border-2, revert)); } .slds-button_neutral[disabled], .slds-button--neutral[disabled], .slds-button_neutral:disabled, .slds-button--neutral:disabled { background-color: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-1); } .slds-button_brand, .slds-button--brand { justify-content: center; --slds-c-button-color-background: var(--slds-c-button-brand-color-background, var(--slds-g-color-accent-container-1)); --slds-c-button-color-border: var(--slds-c-button-brand-color-border, var(--slds-g-color-border-accent-1)); --slds-c-button-text-color: var(--slds-c-button-brand-text-color, var(--slds-g-color-on-accent-1)); --slds-c-button-spacing-blockstart: var(--slds-s-button-spacing-block); --slds-c-button-spacing-blockend: var(--slds-s-button-spacing-block); --slds-c-button-spacing-inlinestart: var(--slds-s-button-spacing-inline); --slds-c-button-spacing-inlineend: var(--slds-s-button-spacing-inline); } .slds-button_brand:hover, .slds-button--brand:hover, .slds-button_brand:focus-visible, .slds-button--brand:focus-visible { --slds-c-button-color-background-hover: var(--slds-c-button-brand-color-background-hover, var(--slds-g-color-accent-container-2)); --slds-c-button-color-border-hover: var(--slds-c-button-brand-color-border-hover, var(--slds-g-color-accent-container-2)); --slds-c-button-text-color-hover: var(--slds-c-button-brand-text-color-hover, var(--slds-g-color-on-accent-1)); } .slds-button_brand:active, .slds-button--brand:active { --slds-c-button-color-background-active: var(--slds-c-button-brand-color-background-active, var(--slds-g-color-accent-container-2)); --slds-c-button-color-border-active: var(--slds-g-color-border-accent-2); --slds-c-button-text-color-active: var(--slds-c-button-brand-text-color-active, var(--slds-g-color-on-accent-1)); } .slds-button_brand[disabled], .slds-button--brand[disabled], .slds-button_brand:disabled, .slds-button--brand:disabled { background-color: var(--slds-g-color-disabled-container-2); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-2); } .slds-button_outline-brand, .slds-button--outline-brand { justify-content: center; --slds-c-button-color-background: var(--slds-g-color-surface-container-1); --slds-c-button-color-border: var(--slds-g-color-border-accent-1); --slds-c-button-spacing-blockstart: var(--slds-s-button-spacing-block); --slds-c-button-spacing-blockend: var(--slds-s-button-spacing-block); --slds-c-button-spacing-inlinestart: var(--slds-s-button-spacing-inline); --slds-c-button-spacing-inlineend: var(--slds-s-button-spacing-inline); } .slds-button_outline-brand:hover, .slds-button--outline-brand:hover, .slds-button_outline-brand:focus-visible, .slds-button--outline-brand:focus-visible { --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover: var(--slds-g-color-border-accent-1); } .slds-button_outline-brand:active, .slds-button--outline-brand:active { --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active: var(--slds-g-color-border-accent-1); } .slds-button_outline-brand[disabled], .slds-button--outline-brand[disabled], .slds-button_outline-brand:disabled, .slds-button--outline-brand:disabled { background-color: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-border-disabled-1); } .slds-button_inverse, .slds-button--inverse { justify-content: center; --slds-c-button-color-background: var(--slds-c-button-inverse-color-background, transparent); --slds-c-button-color-border: var(--slds-c-button-inverse-color-border, var(--slds-g-color-border-inverse-1)); --slds-c-button-text-color: var(--slds-c-button-inverse-text-color, var(--slds-g-color-on-surface-inverse-1)); --slds-c-button-spacing-blockstart: var(--slds-s-button-spacing-block); --slds-c-button-spacing-blockend: var(--slds-s-button-spacing-block); --slds-c-button-spacing-inlinestart: var(--slds-s-button-spacing-inline); --slds-c-button-spacing-inlineend: var(--slds-s-button-spacing-inline); } .slds-button_inverse:hover, .slds-button--inverse:hover, .slds-button_inverse:focus-visible, .slds-button--inverse:focus-visible { --slds-c-button-color-background-hover: var(--slds-c-button-inverse-color-background-hover, var(--slds-g-color-surface-container-2)); --slds-c-button-color-border-hover: var(--slds-c-button-inverse-color-border-hover, var(--slds-g-color-border-inverse-1)); } .slds-button_inverse:focus-visible, .slds-button--inverse:focus-visible { --slds-c-button-shadow-focus: 0px 0px 0px 2px var(--slds-g-color-neutral-base-95) inset; } .slds-button_inverse:active, .slds-button--inverse:active { --slds-c-button-color-background-active: var(--slds-c-button-inverse-color-background-active, var(--slds-g-color-surface-container-2)); --slds-c-button-color-border-active: var(--slds-c-button-inverse-color-border-active, var(--slds-g-color-border-inverse-2)); } .slds-button_inverse[disabled], .slds-button--inverse[disabled], .slds-button_inverse:disabled, .slds-button--inverse:disabled { background-color: transparent; border-color: color-mix(in oklab, var(--slds-g-color-neutral-base-100), transparent 50%); } .slds-button_inverse:link, .slds-button--inverse:link, .slds-button_inverse:visited, .slds-button--inverse:visited, .slds-button_icon-border-inverse:link, .slds-button--icon-border-inverse:link, .slds-button_icon-border-inverse:visited, .slds-button--icon-border-inverse:visited { --slds-c-button-text-color: var(--slds-c-button-inverse-text-color, var(--slds-g-color-on-surface-inverse-1)); } .slds-button_inverse:hover, .slds-button--inverse:hover, .slds-button_inverse:focus-visible, .slds-button--inverse:focus-visible, .slds-button_icon-border-inverse:hover, .slds-button--icon-border-inverse:hover, .slds-button_icon-border-inverse:focus-visible, .slds-button--icon-border-inverse:focus-visible { --slds-c-button-text-color-hover: var(--slds-c-button-inverse-text-color-hover, var(--slds-g-color-accent-3)); } .slds-button_inverse:focus-visible, .slds-button--inverse:focus-visible, .slds-button_icon-border-inverse:focus-visible, .slds-button--icon-border-inverse:focus-visible { --slds-c-button-shadow-focus: 0px 0px 0px 2px var(--slds-g-color-neutral-base-95) inset; outline: none; } .slds-button_inverse:active, .slds-button--inverse:active, .slds-button_icon-border-inverse:active, .slds-button--icon-border-inverse:active { --slds-c-button-text-color-active: var(--slds-c-button-inverse-text-color-active, var(--slds-g-color-accent-3)); } .slds-button_inverse[disabled], .slds-button--inverse[disabled], .slds-button_inverse:disabled, .slds-button--inverse:disabled, .slds-button_icon-border-inverse[disabled], .slds-button--icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button--icon-border-inverse:disabled { color: color-mix(in oklab, var(--slds-g-color-neutral-base-100), transparent 50%); } .slds-button_destructive, .slds-button--destructive { justify-content: center; --slds-c-button-color-background: var(--_slds-c-button-destructive-color-background); --slds-c-button-color-border: var(--_slds-c-button-destructive-color-border); --slds-c-button-text-color: var(--_slds-c-button-destructive-color); --slds-c-button-spacing-blockstart: var(--slds-s-button-spacing-block); --slds-c-button-spacing-blockend: var(--slds-s-button-spacing-block); --slds-c-button-spacing-inlinestart: var(--slds-s-button-spacing-inline); --slds-c-button-spacing-inlineend: var(--slds-s-button-spacing-inline); } .slds-button_destructive:hover, .slds-button--destructive:hover, .slds-button_destructive:focus-visible, .slds-button--destructive:focus-visible { --slds-c-button-color-background-hover: var(--_slds-c-button-destructive-color-background-hover); --slds-c-button-color-border-hover: var(--_slds-c-button-destructive-color-border-hover); --slds-c-button-text-color-hover: var(--_slds-c-button-destructive-color); } .slds-button_destructive:active, .slds-button--destructive:active { --slds-c-button-color-background-active: var(--_slds-c-button-destructive-color-background-hover); --slds-c-button-color-border-active: var(--_slds-c-button-destructive-color-border-hover); --slds-c-button-text-color-active: var(--_slds-c-button-destructive-color); } .slds-button_destructive[disabled], .slds-button--destructive[disabled], .slds-button_destructive:disabled, .slds-button--destructive:disabled { background-color: var(--slds-g-color-disabled-container-2); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-2); } .slds-button_text-destructive, .slds-button--text-destructive { justify-content: center; --slds-c-button-color-background: var(--slds-g-color-surface-container-1); --slds-c-button-color-border: var(--slds-g-color-border-error-1); --slds-c-button-text-color: var(--slds-g-color-error-1); --slds-c-button-spacing-blockstart: var(--slds-s-button-spacing-block); --slds-c-button-spacing-blockend: var(--slds-s-button-spacing-block); --slds-c-button-spacing-inlinestart: var(--slds-s-button-spacing-inline); --slds-c-button-spacing-inlineend: var(--slds-s-button-spacing-inline); } .slds-button_text-destructive:hover, .slds-button--text-destructive:hover, .slds-button_text-destructive:focus-visible, .slds-button--text-destructive:focus-visible { --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover: var(--slds-g-color-border-error-2); --slds-c-button-text-color-hover: var(--slds-g-color-error-1); } .slds-button_text-destructive:active, .slds-button--text-destructive:active { --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active: var(--slds-g-color-border-error-2); --slds-c-button-text-color-active: var(--slds-g-color-error-1); } .slds-button_text-destructive[disabled], .slds-button--text-destructive[disabled], .slds-button_text-destructive:disabled, .slds-button--text-destructive:disabled { background-color: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-1); } .slds-button_success, .slds-button--success { justify-content: center; --slds-c-button-color-background: var(--_slds-c-button-success-color-background); --slds-c-button-color-border: var(--_slds-c-button-success-color-border); --slds-c-button-text-color: var(--_slds-c-button-success-color); --slds-c-button-spacing-blockstart: var(--slds-s-button-spacing-block); --slds-c-button-spacing-blockend: var(--slds-s-button-spacing-block); --slds-c-button-spacing-inlinestart: var(--slds-s-button-spacing-inline); --slds-c-button-spacing-inlineend: var(--slds-s-button-spacing-inline); } .slds-button_success:hover, .slds-button--success:hover, .slds-button_success:focus-visible, .slds-button--success:focus-visible { --slds-c-button-color-background-hover: var(--_slds-c-button-success-color-background-hover); --slds-c-button-color-border-hover: var(--_slds-c-button-success-color-border-hover); --slds-c-button-text-color-hover: var(--_slds-c-button-success-color); } .slds-button_success:active, .slds-button--success:active { --slds-c-button-color-background-active: var(--_slds-c-button-success-color-background-hover); --slds-c-button-color-border-active: var(--_slds-c-button-success-color-border-hover); --slds-c-button-text-color-active: var(--_slds-c-button-success-color); } .slds-button_success[disabled], .slds-button--success[disabled], .slds-button_success:disabled, .slds-button--success:disabled { background-color: var(--slds-g-color-disabled-container-2); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-2); } .slds-button_neutral:focus-visible, .slds-button--neutral:focus-visible, .slds-button_brand:focus-visible, .slds-button--brand:focus-visible, .slds-button_outline-brand:focus-visible, .slds-button--outline-brand:focus-visible, .slds-button_destructive:focus-visible, .slds-button--destructive:focus-visible, .slds-button_text-destructive:focus-visible, .slds-button--text-destructive:focus-visible, .slds-button_success:focus-visible, .slds-button--success:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1); } .slds-button_neutral:active, .slds-button--neutral:active, .slds-button_brand:active, .slds-button--brand:active, .slds-button_outline-brand:active, .slds-button--outline-brand:active, .slds-button_inverse:active, .slds-button--inverse:active, .slds-button_icon-border-inverse:active, .slds-button--icon-border-inverse:active, .slds-button_destructive:active, .slds-button--destructive:active, .slds-button_text-destructive:active, .slds-button--text-destructive:active, .slds-button_success:active, .slds-button--success:active { box-shadow: var(--slds-s-button-shadow-active, revert); } .slds-button__icon, .slds-button__icon_stateful, .slds-button__icon--stateful { width: 0.875rem; height: 0.875rem; fill: var(--slds-c-icon-color-foreground, currentColor); } .slds-button__icon_large, .slds-button__icon--large { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); } .slds-button__icon_small, .slds-button__icon--small { width: var(--slds-g-sizing-4); height: var(--slds-g-sizing-4); } .slds-button__icon_x-small, .slds-button__icon--x-small { width: var(--slds-g-sizing-3); height: var(--slds-g-sizing-3); } .slds-button__icon_left, .slds-button__icon--left { margin-inline-end: var(--slds-g-spacing-2); } .slds-button__icon_right, .slds-button__icon--right { margin-inline-start: var(--slds-g-spacing-2); } .slds-button_reset, .slds-button--reset { font-size: inherit; color: inherit; line-height: inherit; padding: 0; background: transparent; border: 0; text-align: inherit; } .slds-button_reset:focus-visible, .slds-button--reset:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-outset-focus-1); } .slds-button_stretch, .slds-button--stretch { justify-content: center; width: 100%; } .slds-button_full-width, .slds-button--full-width { color: inherit; line-height: inherit; padding: 0; background: transparent; border: 0; text-align: inherit; width: 100%; display: inline-flex; flex-grow: 1; align-items: center; justify-content: space-between; } .slds-button_full-width:focus-visible, .slds-button--full-width:focus-visible { --slds-c-button-shadow: none; --slds-c-button-shadow-focus: var(--slds-g-shadow-outset-focus-1); } .slds-button_neutral.slds-is-selected, .slds-button--neutral.slds-is-selected { --slds-c-button-neutral-color-background: var(--slds-c-button-stateful-color-background-selected, transparent); --slds-c-button-neutral-color-border: var(--slds-c-button-stateful-color-border-selected, transparent); } .slds-button_neutral.slds-is-selected:hover:not([disabled]), .slds-button--neutral.slds-is-selected:hover:not([disabled]), .slds-button_neutral.slds-is-selected:focus:not([disabled]), .slds-button--neutral.slds-is-selected:focus:not([disabled]) { --slds-c-button-neutral-color-background-hover: var( --slds-c-button-stateful-color-background-selected-hover, var(--slds-g-color-surface-container-2) ); --slds-c-button-neutral-color-border-hover: var(--slds-c-button-stateful-color-border-selected-hover, var(--slds-g-color-border-1)); } .slds-button_neutral.slds-is-selected:active:not([disabled]), .slds-button--neutral.slds-is-selected:active:not([disabled]) { --slds-c-button-neutral-color-background-active: var( --slds-c-button-stateful-color-background-selected-active, var(--slds-g-color-surface-container-2) ); } .slds-button_inverse.slds-is-selected, .slds-button--inverse.slds-is-selected { border-color: transparent; } .slds-button_stateful .slds-text-selected, .slds-button--stateful .slds-text-selected, .slds-button_stateful .slds-text-selected-focus, .slds-button--stateful .slds-text-selected-focus, .slds-button_stateful .slds-text-not-selected, .slds-button--stateful .slds-text-not-selected { align-items: center; } .slds-not-selected .slds-text-selected { display: none; } .slds-not-selected .slds-text-selected-focus { display: none; } .slds-not-selected .slds-text-not-selected { display: inline-flex; } .slds-is-selected-clicked .slds-text-selected, .slds-is-selected[disabled] .slds-text-selected, .slds-is-selected[disabled]:hover .slds-text-selected, .slds-is-selected[disabled]:focus .slds-text-selected { display: inline-flex; } .slds-is-selected-clicked .slds-text-selected-focus, .slds-is-selected[disabled] .slds-text-selected-focus, .slds-is-selected[disabled]:hover .slds-text-selected-focus, .slds-is-selected[disabled]:focus .slds-text-selected-focus { display: none; } .slds-is-selected-clicked .slds-text-not-selected, .slds-is-selected[disabled] .slds-text-not-selected, .slds-is-selected[disabled]:hover .slds-text-not-selected, .slds-is-selected[disabled]:focus .slds-text-not-selected { display: none; } .slds-is-selected .slds-text-not-selected { display: none; } .slds-is-selected .slds-text-selected { display: inline-flex; } .slds-is-selected .slds-text-selected-focus { display: none; } .slds-is-selected:hover .slds-text-not-selected, .slds-is-selected:focus .slds-text-not-selected { display: none; } .slds-is-selected:hover .slds-text-selected, .slds-is-selected:focus .slds-text-selected { display: none; } .slds-is-selected:hover .slds-text-selected-focus, .slds-is-selected:focus .slds-text-selected-focus { display: inline-flex; } .slds-button_dual-stateful .slds-text-not-pressed, .slds-button--dual-stateful .slds-text-not-pressed { display: block; } .slds-button_dual-stateful .slds-text-pressed, .slds-button--dual-stateful .slds-text-pressed { display: none; } .slds-button_dual-stateful.slds-is-pressed, .slds-button--dual-stateful.slds-is-pressed { padding-inline-start: var(--slds-c-button-brand-spacing-inlinestart, var(--slds-g-spacing-4)); padding-inline-end: var(--slds-c-button-brand-spacing-inlineend, var(--slds-g-spacing-4)); --slds-c-button-color-background: var(--slds-c-button-brand-color-background, var(--slds-g-color-accent-container-1)); --slds-c-button-color-border: var(--slds-c-button-brand-color-border, var(--slds-g-color-border-accent-1)); --slds-c-button-text-color: var(--slds-c-button-brand-text-color, var(--slds-g-color-on-accent-1)); --slds-c-button-text-color-hover: var(--slds-c-button-brand-text-color-hover, var(--slds-g-color-on-accent-1)); --slds-c-button-text-color-active: var(--slds-c-button-brand-text-color-active, var(--slds-g-color-on-accent-1)); } .slds-button_dual-stateful.slds-is-pressed:hover, .slds-button--dual-stateful.slds-is-pressed:hover { --slds-c-button-color-background: var(--slds-c-button-brand-color-background-hover, var(--slds-g-color-accent-container-2)); --slds-c-button-color-border: var(--slds-c-button-brand-color-border-hover, var(--slds-g-color-border-accent-2)); --slds-c-button-text-color-hover: var(--slds-c-button-brand-text-color-hover, var(--slds-g-color-on-accent-1)); } .slds-button_dual-stateful.slds-is-pressed:focus-visible, .slds-button--dual-stateful.slds-is-pressed:focus-visible { --slds-c-button-color-border: transparent; } .slds-button_dual-stateful.slds-is-pressed .slds-text-not-pressed, .slds-button--dual-stateful.slds-is-pressed .slds-text-not-pressed { display: none; } .slds-button_dual-stateful.slds-is-pressed .slds-text-pressed, .slds-button--dual-stateful.slds-is-pressed .slds-text-pressed { display: block; } .slds-button_icon-bare, .slds-button--icon-bare { line-height: var(--slds-g-font-lineheight-1); vertical-align: middle; color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1)); } .slds-button_icon, .slds-button--icon, .slds-button_icon-inverse, .slds-button--icon-inverse, .slds-button_icon-container, .slds-button--icon-container, .slds-button_icon-border, .slds-button--icon-border, .slds-button_icon-border-filled, .slds-button--icon-border-filled, .slds-button_icon-border-inverse, .slds-button--icon-border-inverse, .slds-button_icon-more, .slds-button--icon-more, .slds-button_icon-error, .slds-button--icon-error, .slds-button_icon-warning, .slds-button--icon-warning { --slds-c-button-color-background-hover: none; line-height: 1; vertical-align: middle; justify-content: center; color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1)); flex-shrink: 0; padding: 0; } .slds-button_icon:focus-visible, .slds-button--icon:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1); } .slds-button_icon-inverse:focus-visible, .slds-button--icon-inverse:focus-visible, .slds-button_icon-container:focus-visible, .slds-button--icon-container:focus-visible, .slds-button_icon-border:focus-visible, .slds-button--icon-border:focus-visible, .slds-button_icon-border-filled:focus-visible, .slds-button--icon-border-filled:focus-visible, .slds-button_icon-border-inverse:focus-visible, .slds-button--icon-border-inverse:focus-visible, .slds-button_icon-more:focus-visible, .slds-button--icon-more:focus-visible, .slds-button_icon-error:focus-visible, .slds-button--icon-error:focus-visible, .slds-button_icon-warning:focus-visible, .slds-button--icon-warning:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1); } .slds-button_icon-container, .slds-button--icon-container, .slds-button_icon-border, .slds-button--icon-border, .slds-button_icon-border-filled, .slds-button--icon-border-filled, .slds-button_icon-border-inverse, .slds-button--icon-border-inverse, .slds-button_icon-brand, .slds-button--icon-brand, .slds-button_icon-more, .slds-button--icon-more, .slds-button_icon-container-more, .slds-button--icon-container-more { width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); } .slds-button_icon-border-filled, .slds-button--icon-border-filled, .slds-button_icon-border, .slds-button--icon-border { line-height: 1; vertical-align: middle; color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1)); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); transition: border 0.15s linear; } .slds-button_icon-border-filled[disabled], .slds-button--icon-border-filled[disabled], .slds-button_icon-border-filled:disabled, .slds-button--icon-border-filled:disabled, .slds-button_icon-border[disabled], .slds-button--icon-border[disabled], .slds-button_icon-border:disabled, .slds-button--icon-border:disabled { border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-2); } .slds-button_icon-border-filled:focus-visible, .slds-button--icon-border-filled:focus-visible, .slds-button_icon-border:focus-visible, .slds-button--icon-border:focus-visible { border-color: var(--slds-c-button-color-border); transition: none; } .slds-button_icon-border-filled:hover, .slds-button--icon-border-filled:hover, .slds-button_icon-border:hover, .slds-button--icon-border:hover { box-shadow: var(--slds-s-button-bordered-shadow-hover); transform: var(--slds-s-button-transform-hover); } .slds-button_icon-border-inverse, .slds-button--icon-border-inverse { background-color: transparent; border-color: var(--slds-g-color-border-inverse-1); } .slds-button_icon-border-inverse[disabled], .slds-button--icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button--icon-border-inverse:disabled { background-color: transparent; border-color: color-mix(in oklab, var(--slds-g-color-neutral-base-100), transparent 75%); } .slds-button_icon-bare:focus-visible, .slds-button--icon-bare:focus-visible, .slds-button_icon-bare:active, .slds-button--icon-bare:active { --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1); --slds-c-button-sizing-border: var(--slds-g-sizing-border-1); } .slds-button_icon-bare.slds-button_icon-inverse:focus-visible, .slds-button--icon-bare.slds-button--icon-inverse:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-outset-focus-1); } .slds-button_icon-bare:focus-visible, .slds-button--icon-bare:focus-visible { border-radius: var(--_slds-c-buttonicon-bare-radius-focus); } .slds-button_icon-brand, .slds-button--icon-brand { background-color: var(--slds-g-color-accent-container-1); border-color: var(--slds-g-color-border-accent-1); color: var(--slds-g-color-on-accent-1); } .slds-button_icon-brand:visited, .slds-button--icon-brand:visited, .slds-button_icon-brand:active, .slds-button--icon-brand:active { color: var(--slds-g-color-on-accent-1); } .slds-button_icon-brand:hover, .slds-button--icon-brand:hover { background-color: var(--slds-g-color-accent-container-2); border-color: var(--slds-g-color-accent-container-2); box-shadow: var(--slds-s-button-brand-shadow-hover); color: var(--slds-g-color-on-accent-1); transform: var(--slds-s-button-transform-hover); } .slds-button_icon-brand:focus-visible, .slds-button--icon-brand:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1); border-color: var(--slds-c-button-color-border); } .slds-button_icon-brand:active, .slds-button--icon-brand:active { background-color: var(--_slds-c-buttonicon-brand-color-background-active); border-color: var(--slds-g-color-accent-container-3); border-width: var(--_slds-c-buttonicon-brand-sizing-border-active, var(--slds-g-sizing-border-1)); } .slds-button_icon-brand[disabled], .slds-button--icon-brand[disabled], .slds-button_icon-brand:disabled, .slds-button--icon-brand:disabled { background: var(--slds-g-color-disabled-container-2); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-2); } .slds-button_icon-border-filled, .slds-button--icon-border-filled { --slds-c-button-color-background: var(--slds-g-color-surface-container-1); } .slds-button_icon-border-filled:hover, .slds-button--icon-border-filled:hover, .slds-button_icon-border-filled:focus-visible, .slds-button--icon-border-filled:focus-visible { --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2); } .slds-button_icon-border-filled[disabled], .slds-button--icon-border-filled[disabled], .slds-button_icon-border-filled:disabled, .slds-button--icon-border-filled:disabled { border-color: var(--slds-g-color-border-disabled-1); background-color: var(--slds-g-color-disabled-container-1); } .slds-button_icon-inverse, .slds-button--icon-inverse, .slds-button_icon-border-inverse, .slds-button--icon-border-inverse { color: var(--slds-g-color-on-surface-inverse-1); } .slds-button_icon-inverse:hover, .slds-button--icon-inverse:hover, .slds-button_icon-border-inverse:hover, .slds-button--icon-border-inverse:hover { --slds-c-button-color-background-hover: transparent; color: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%); } .slds-button_icon-inverse:focus-visible, .slds-button--icon-inverse:focus-visible, .slds-button_icon-border-inverse:focus-visible, .slds-button--icon-border-inverse:focus-visible { outline: none; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-inverse-1); border-color: transparent; --slds-c-button-shadow-focus: var(--slds-g-shadow-insetinverse-focus-1); } .slds-button_icon-inverse:active, .slds-button--icon-inverse:active, .slds-button_icon-border-inverse:active, .slds-button--icon-border-inverse:active { color: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 50%); } .slds-button_icon-inverse[disabled], .slds-button--icon-inverse[disabled], .slds-button_icon-inverse:disabled, .slds-button--icon-inverse:disabled, .slds-button_icon-border-inverse[disabled], .slds-button--icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button--icon-border-inverse:disabled { color: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 75%); } .slds-button_icon-error, .slds-button--icon-error { color: var(--slds-g-color-error-1); } .slds-button_icon-error:hover, .slds-button--icon-error:hover, .slds-button_icon-error:active, .slds-button--icon-error:active, .slds-button_icon-error:focus-visible, .slds-button--icon-error:focus-visible { color: var(--slds-g-color-error-1); } .slds-button_icon-error:focus-visible, .slds-button--icon-error:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1); } .slds-button_icon-warning, .slds-button--icon-warning { color: var(--slds-g-color-warning-1); } .slds-button_icon-warning:hover, .slds-button--icon-warning:hover, .slds-button_icon-warning:active, .slds-button--icon-warning:active, .slds-button_icon-warning:focus-visible, .slds-button--icon-warning:focus-visible { color: var(--slds-g-color-warning-1); } .slds-button_icon-warning:focus-visible, .slds-button--icon-warning:focus-visible { --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1); } .slds-button_icon-current-color, .slds-button--icon-current-color { color: currentColor; } .slds-button_icon-large, .slds-button--icon-large { width: var(--slds-g-sizing-10); height: var(--slds-g-sizing-10); } .slds-button_icon-large .slds-button__icon, .slds-button--icon-large .slds-button__icon { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); } .slds-button_icon-small, .slds-button--icon-small { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); } .slds-button_icon-x-small, .slds-button--icon-x-small { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); line-height: 1; } .slds-button_icon-x-small .slds-button__icon, .slds-button--icon-x-small .slds-button__icon { width: var(--slds-g-sizing-4); height: var(--slds-g-sizing-4); } .slds-button_icon-xx-small, .slds-button--icon-xx-small { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); line-height: 1; } .slds-button_icon-xx-small .slds-button__icon, .slds-button--icon-xx-small .slds-button__icon { width: var(--slds-g-sizing-3); height: var(--slds-g-sizing-3); } .slds-button_icon-more, .slds-button--icon-more { width: auto; line-height: 1.875rem; padding: 0 var(--slds-g-spacing-2); background-color: var(--slds-g-color-surface-container-1); border-color: var(--slds-g-color-border-2); color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1)); } .slds-button_icon-more:hover .slds-button__icon, .slds-button--icon-more:hover .slds-button__icon { fill: var(--slds-s-button-color-hover, var(--slds-g-color-accent-2)); } .slds-button_icon-more:active .slds-button__icon, .slds-button--icon-more:active .slds-button__icon { fill: var(--slds-g-color-accent-3); } .slds-button_icon-more[disabled], .slds-button--icon-more[disabled], .slds-button_icon-more:disabled, .slds-button--icon-more:disabled { cursor: default; } .slds-button_icon-more[disabled] .slds-button__icon, .slds-button--icon-more[disabled] .slds-button__icon, .slds-button_icon-more:disabled .slds-button__icon, .slds-button--icon-more:disabled .slds-button__icon { fill: var(--slds-g-color-disabled-1); } .slds-button_icon-more:focus-visible, .slds-button--icon-more:focus-visible { border-color: transparent; } .slds-button_icon-container-more, .slds-button--icon-container-more { width: auto; line-height: 1.875rem; padding-block: 0; padding-inline: var(--slds-g-spacing-2); vertical-align: middle; } .slds-button__icon_hint, .slds-button__icon--hint { fill: var(--slds-s-button-color, var(--slds-g-color-on-surface-1)); } .slds-button__icon_inverse-hint, .slds-button__icon--inverse-hint { fill: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 50%); } .slds-hint-parent .slds-button_icon-border-inverse, .slds-hint-parent .slds-button--icon-border-inverse { border-color: color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 50%); } .slds-hint-parent .slds-button_icon-border-inverse:focus, .slds-hint-parent .slds-button--icon-border-inverse:focus { border-color: color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 25%); } .slds-hint-parent:hover .slds-button_icon-border-inverse, .slds-hint-parent:hover .slds-button--icon-border-inverse, .slds-hint-parent:focus .slds-button_icon-border-inverse, .slds-hint-parent:focus .slds-button--icon-border-inverse { border-color: color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 25%); } .slds-hint-parent:hover .slds-button__icon_hint, .slds-hint-parent:hover .slds-button__icon--hint, .slds-hint-parent:focus .slds-button__icon_hint, .slds-hint-parent:focus .slds-button__icon--hint { fill: var(--slds-g-color-on-surface-2); } .slds-hint-parent:hover .slds-button__icon_inverse-hint, .slds-hint-parent:hover .slds-button__icon--inverse-hint, .slds-hint-parent:focus .slds-button__icon_inverse-hint, .slds-hint-parent:focus .slds-button__icon--inverse-hint { fill: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%); } .slds-hint-parent:hover .slds-button:disabled .slds-button__icon_hint, .slds-hint-parent:hover .slds-button:disabled .slds-button__icon--hint, .slds-hint-parent:focus .slds-button:disabled .slds-button__icon_hint, .slds-hint-parent:focus .slds-button:disabled .slds-button__icon--hint { fill: currentColor; } .slds-button_icon-container.slds-is-selected, .slds-button--icon-container.slds-is-selected, .slds-button_icon-border.slds-is-selected, .slds-button--icon-border.slds-is-selected, .slds-button_icon-border-filled.slds-is-selected, .slds-button--icon-border-filled.slds-is-selected, .slds-button_icon-border-inverse.slds-is-selected, .slds-button--icon-border-inverse.slds-is-selected { background-color: var(--slds-g-color-accent-container-1); border-color: var(--slds-g-color-border-accent-1); color: var(--slds-g-color-on-accent-1); } .slds-button_icon-container.slds-is-selected:hover, .slds-button--icon-container.slds-is-selected:hover, .slds-button_icon-container.slds-is-selected:focus, .slds-button--icon-container.slds-is-selected:focus, .slds-button_icon-border.slds-is-selected:hover, .slds-button--icon-border.slds-is-selected:hover, .slds-button_icon-border.slds-is-selected:focus, .slds-button--icon-border.slds-is-selected:focus, .slds-button_icon-border-filled.slds-is-selected:hover, .slds-button--icon-border-filled.slds-is-selected:hover, .slds-button_icon-border-filled.slds-is-selected:focus, .slds-button--icon-border-filled.slds-is-selected:focus, .slds-button_icon-border-inverse.slds-is-selected:hover, .slds-button--icon-border-inverse.slds-is-selected:hover, .slds-button_icon-border-inverse.slds-is-selected:focus, .slds-button--icon-border-inverse.slds-is-selected:focus { background-color: var(--slds-g-color-accent-container-2); border-color: var(--slds-g-color-accent-container-2); color: var(--slds-g-color-on-accent-1); } .slds-button_icon-container.slds-is-selected[disabled], .slds-button--icon-container.slds-is-selected[disabled], .slds-button_icon-container.slds-is-selected:disabled, .slds-button--icon-container.slds-is-selected:disabled, .slds-button_icon-border.slds-is-selected[disabled], .slds-button--icon-border.slds-is-selected[disabled], .slds-button_icon-border.slds-is-selected:disabled, .slds-button--icon-border.slds-is-selected:disabled, .slds-button_icon-border-filled.slds-is-selected[disabled], .slds-button--icon-border-filled.slds-is-selected[disabled], .slds-button_icon-border-filled.slds-is-selected:disabled, .slds-button--icon-border-filled.slds-is-selected:disabled, .slds-button_icon-border-inverse.slds-is-selected[disabled], .slds-button--icon-border-inverse.slds-is-selected[disabled], .slds-button_icon-border-inverse.slds-is-selected:disabled, .slds-button--icon-border-inverse.slds-is-selected:disabled { background: var(--slds-g-color-disabled-container-2); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-2); } .slds-color-picker { position: relative; } .slds-color-picker .slds-form-error { padding-block-start: var(--slds-g-spacing-2); color: var(--slds-g-color-error-base-40, var(--slds-g-color-error-1)); font-size: var(--slds-g-font-scale-neg-1); } .slds-color-picker__summary-label { display: block; } .slds-color-picker__summary-button { vertical-align: top; padding-block: 0.3rem; padding-inline: var(--slds-g-spacing-2); line-height: 1; background: var(--slds-g-color-neutral-base-100, var(--slds-g-color-surface-container-1)); margin-inline-end: var(--slds-g-spacing-1); border-radius: var(--slds-s-input-radius-border); } .slds-color-picker__summary-button:focus-visible { border-color: transparent; } .slds-color-picker__summary-input { display: inline-block; } .slds-color-picker__summary-input .slds-input { width: 6rem; } .slds-color-picker__selector { margin-block-start: var(--slds-g-spacing-2); } .slds-popover__footer { border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-s-container-color-border, var(--slds-g-color-neutral-base-90)); } .slds-color-picker__selector.slds-popover { width: 14rem; } .slds-color-picker__selector .slds-tabs_default__content, .slds-color-picker__selector .slds-tabs--default__content { padding-block: var(--slds-g-spacing-2); padding-inline: 0; } .slds-color-picker__swatches { font-size: 0; } .slds-color-picker__swatches.slds-swatch { cursor: pointer; } .slds-color-picker__swatch { display: inline-block; margin: var(--slds-g-spacing-1); } .slds-color-picker__swatch-trigger { display: inline-block; } .slds-color-picker__swatch-trigger:focus-visible, .slds-color-picker__swatch-trigger:active { outline: none; box-shadow: var(--slds-g-shadow-outset-focus-1); border-radius: var(--slds-g-radius-border-2); } .slds-color-picker__custom { padding-block: var(--slds-g-spacing-1); padding-inline: 0; } .slds-color-picker__custom-range { position: relative; margin-block-end: var(--slds-g-spacing-1); height: var(--slds-g-sizing-12); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); overflow: hidden; } .slds-color-picker__custom-range::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 1%, transparent 99%), linear-gradient(to right, rgba(255, 255, 255, 1) 1%, transparent); } .slds-color-picker__range-indicator { --_slds-c-color-picker-half-spacing: calc(0.75rem * 0.5); transform: translate3d(var(--_slds-c-color-picker-half-spacing), var(--_slds-c-color-picker-half-spacing), 0); cursor: pointer; position: absolute; height: var(--slds-g-sizing-4); width: var(--slds-g-sizing-4); border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-surface-container-1); border-radius: var(--slds-g-radius-border-circle); box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 0.16), inset 0 2px 4px 4px rgba(0, 0, 0, 0.16); } .slds-color-picker__range-indicator:focus-visible { outline: none; box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-color-picker__hue-and-preview { display: flex; } .slds-color-picker__hue-and-preview .slds-swatch { margin-inline-start: var(--slds-g-spacing-1); height: var(--slds-g-spacing-5); width: var(--slds-g-spacing-5); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-1); } .slds-color-picker__hue-slider { appearance: none; flex: 1; padding: 0; height: var(--slds-g-sizing-7); width: 100%; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-1); background: linear-gradient( 90deg, red, #ff1500, #ff2b00, #ff4000, #f50, #ff6a00, #ff8000, #ff9500, #fa0, #ffbf00, #ffd500, #ffea00, #ff0, #eaff00, #d4ff00, #bfff00, #af0, #95ff00, #80ff00, #6aff00, #5f0, #40ff00, #2bff00, #15ff00, #0f0, #00ff15, #00ff2b, #00ff40, #0f5, #00ff6a, #00ff80, #00ff95, #0fa, #00ffbf, #00ffd5, #00ffea, #0ff, #00eaff, #00d4ff, #00bfff, #0af, #0095ff, #007fff, #006aff, #05f, #0040ff, #002bff, #0015ff, #00f, #1500ff, #2a00ff, #4000ff, #50f, #6a00ff, #7f00ff, #9500ff, #a0f, #bf00ff, #d400ff, #ea00ff, #f0f, #ff00ea, #ff00d4, #ff00bf, #f0a, #ff0095, #ff0080, #ff006a, #f05, #ff0040, #ff002b, #ff0015 ); margin: 0; } .slds-color-picker__hue-slider::-webkit-slider-thumb { appearance: none; cursor: pointer; height: calc(var(--slds-g-sizing-7) - (var(--slds-g-sizing-border-1) * 2)); width: 0.375rem; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-30); border-radius: var(--slds-g-radius-border-1); background: var(--slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-95)); } .slds-color-picker__hue-slider::-moz-range-thumb { appearance: none; cursor: pointer; height: calc(var(--slds-g-sizing-7) - (var(--slds-g-sizing-border-1) * 2)); width: 0.375rem; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-30); border-radius: var(--slds-g-radius-border-1); background: var(--slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-95)); } .slds-color-picker__hue-slider::-ms-thumb { appearance: none; cursor: pointer; width: 0.375rem; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-30); border-radius: var(--slds-g-radius-border-1); background: var(--slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-95)); height: var(--slds-g-sizing-7); } .slds-color-picker__hue-slider:focus { outline: none; } .slds-color-picker__hue-slider:focus-visible::-webkit-slider-thumb { border-color: var(--slds-g-color-brand-base-60, var(--slds-g-color-accent-1)); box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-color-picker__hue-slider:focus-visible::-moz-range-thumb { border-color: var(--slds-g-color-brand-base-60, var(--slds-g-color-accent-1)); box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-color-picker__hue-slider:focus-visible::-ms-thumb { border-color: var(--slds-g-color-brand-base-60, var(--slds-g-color-accent-1)); box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-color-picker__hue-slider::-moz-range-track { height: 0; } .slds-color-picker__hue-slider::-ms-track { height: 0; border: 0; background: transparent; color: transparent; } .slds-color-picker__custom-inputs { display: flex; padding-block-start: var(--slds-g-spacing-2); } .slds-color-picker__custom-inputs .slds-form-element:not(:first-child) { margin-inline-start: var(--slds-g-spacing-1); } .slds-color-picker__custom-inputs input { padding-block: 0; padding-inline: var(--slds-g-spacing-1); } .slds-color-picker__custom-inputs abbr { cursor: text; text-decoration: none; } .slds-color-picker__custom-inputs .slds-form-element.slds-color-picker__input-custom-hex { flex: none; width: 4.2rem; } .slds-color-picker__custom-inputs .slds-form-element.slds-color-picker__input-custom-hex input { font-size: var(--slds-g-spacing-3); } .slds-color-picker__selector-footer { display: flex; } .slds-color-picker__selector-footer .slds-button { flex: 1; } .slds-swatch { display: inline-block; vertical-align: middle; height: var(--slds-g-sizing-6); width: var(--slds-g-sizing-6); border-radius: var(--slds-g-radius-border-1); box-shadow: var(--slds-g-color-neutral-base-10, inset 0 0 1px rgba(0, 0, 0, 0.4)); } .slds-color-picker.slds-color-picker_swatches-only, .slds-color-picker.slds-color-picker--swatches-only { width: 13.3rem; padding: var(--slds-g-spacing-2); } .slds-color-picker.slds-color-picker_swatches-only .slds-color-picker__selector, .slds-color-picker.slds-color-picker--swatches-only .slds-color-picker__selector { margin: 0; } .slds-icon_container, .slds-icon--container { padding-block-start: var(--slds-s-icon-spacing); padding-block-end: var(--slds-s-icon-spacing); padding-inline-start: var(--slds-s-icon-spacing); padding-inline-end: var(--slds-s-icon-spacing); border-radius: var(--slds-c-icon-radius-border, var(--slds-s-icon-radius-border)); border-width: var(--slds-s-icon-sizing-border, 0); border-style: solid; border-color: var(--slds-s-icon-color-border, transparent); background-color: var(--slds-c-icon-color-background, var(--slds-s-icon-color-background)); display: inline-block; line-height: 1; } .slds-icon_container_circle, .slds-icon_container--circle { --slds-c-icon-radius-border: var(--slds-g-radius-border-circle); padding: var(--slds-g-spacing-2); } [dir='rtl'] .slds-icon_flip, [dir='rtl'] .slds-icon--flip { transform: scaleX(-1); } .slds-icon { display: inline-flex; height: var(--_slds-c-icon-sizing, var(--slds-s-icon-sizing, var(--slds-g-sizing-9))); width: var(--_slds-c-icon-sizing, var(--slds-s-icon-sizing, var(--slds-g-sizing-9))); fill: var(--slds-c-icon-color-foreground, var(--slds-g-color-neutral-base-100)); } .slds-icon_xxx-small, .slds-icon--xxx-small { width: var(--slds-g-sizing-3); height: var(--slds-g-sizing-3); } .slds-icon_xx-small, .slds-icon--xx-small { width: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4)); height: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4)); } .slds-icon_x-small, .slds-icon--x-small { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); } .slds-icon_small, .slds-icon--small { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); } .slds-icon_large, .slds-icon--large { --_slds-c-icon-sizing: var(--slds-g-sizing-10); } .slds-icon-text-warning { --slds-c-icon-color-foreground: var(--slds-g-color-warning-1); } .slds-icon-text-success { --slds-c-icon-color-foreground: var(--slds-g-color-success-1); } .slds-icon-text-error { --slds-c-icon-color-foreground: var(--slds-g-color-error-1); } .slds-icon-text-light { --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-70); } .slds-icon_container[icon-name^='action'], .slds-icon--container[icon-name^='action'] { --slds-c-icon-radius-border: var(--slds-g-radius-border-circle); padding-block: var(--slds-g-sizing-3); padding-inline: var(--slds-g-sizing-3); } .slds-icon_container[icon-name^='action'], .slds-icon--container[icon-name^='action'], .slds-icon_container[class^='action'], .slds-icon--container[class^='action'], .slds-icon_container[icon-name^='standard'], .slds-icon--container[icon-name^='standard'], .slds-icon_container[class^='standard'], .slds-icon--container[class^='standard'], .slds-icon_container[icon-name^='custom'], .slds-icon--container[icon-name^='custom'], .slds-icon_container[class^='custom'], .slds-icon--container[class^='custom'] { --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-100); } .slds-icon-text-default { --slds-c-icon-color-foreground: var(--slds-c-icon-color-foreground-default, var(--slds-s-icon-color-foreground)); } .slds-icon-text-default.slds-is-disabled { fill: var(--slds-g-color-disabled-1); } .slds-current-color .slds-icon { --slds-c-icon-color-foreground: currentColor; } .slds-icon_disabled, .slds-icon--disabled { background-color: currentcolor; } .slds-input__icon { --_slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4)); position: absolute; top: 50%; margin-block-start: -0.4375rem; line-height: var(--slds-g-font-lineheight-1); border: 0; z-index: 2; } .slds-accordion { position: relative; } .slds-accordion__list-item { border-block-start-width: var(--slds-c-accordion-section-sizing-border, var(--slds-g-sizing-border-1)); border-block-start-style: solid; border-block-start-color: var(--slds-c-accordion-section-color-border, var(--slds-g-color-border-1)); } .slds-accordion__list-item:first-child { border-top: 0; } .slds-accordion__summary { display: flex; margin-block-start: calc(var(--slds-c-accordion-section-spacing-blockstart, var(--slds-g-sizing-4)) * -1); margin-inline-end: calc(var(--slds-c-accordion-section-spacing-inlineend, var(--slds-g-sizing-4)) * -1); margin-block-end: calc(var(--slds-c-accordion-section-spacing-blockend, var(--slds-g-sizing-4)) * -1); margin-inline-start: calc(var(--slds-c-accordion-section-spacing-inlinestart, var(--slds-g-sizing-4)) * -1); padding-block-start: var(--slds-c-accordion-section-spacing-blockstart, var(--slds-g-sizing-4)); padding-inline-end: var(--slds-c-accordion-section-spacing-inlineend, var(--slds-g-sizing-4)); padding-block-end: var(--slds-c-accordion-section-spacing-blockend, var(--slds-g-sizing-4)); padding-inline-start: var(--slds-c-accordion-section-spacing-inlinestart, var(--slds-g-sizing-4)); background-color: var(--slds-c-accordion-summary-color-background, transparent); } .slds-accordion__summary-heading { display: flex; flex-grow: 1; min-width: 0; color: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3)); font-size: var(--slds-c-accordion-heading-font-size, var(--slds-s-container-heading-var-font-size, var(--slds-g-font-scale-2))); font-weight: var(--slds-s-container-heading-var-font-weight, var(--slds-g-font-weight-4)); line-height: var(--slds-g-font-lineheight-2); } .slds-accordion__summary-heading .slds-button:focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); border-radius: var(--slds-g-radius-border-3); margin-inline-end: var(--slds-c-accordion-section-spacing-inlineend, revert); } .slds-accordion__summary-action { display: inline-flex; flex-grow: 1; align-items: center; justify-content: flex-start; min-width: 0; margin-block-start: calc(var(--slds-c-accordion-section-spacing-blockstart, var(--slds-g-sizing-4)) * -1); margin-inline-end: calc(var(--slds-c-accordion-section-spacing-inlineend, var(--slds-g-sizing-4)) * -1); margin-block-end: calc(var(--slds-c-accordion-section-spacing-blockend, var(--slds-g-sizing-4)) * -1); margin-inline-start: calc(var(--slds-c-accordion-section-spacing-inlinestart, var(--slds-g-sizing-4)) * -1); padding-block-start: var(--slds-c-accordion-section-spacing-blockstart, var(--slds-g-sizing-4)); padding-inline-end: var(--slds-c-accordion-section-spacing-inlineend, var(--slds-g-sizing-4)); padding-block-end: var(--slds-c-accordion-section-spacing-blockend, var(--slds-g-sizing-4)); padding-inline-start: var(--slds-c-accordion-section-spacing-inlinestart, var(--slds-g-sizing-4)); font-weight: inherit; } .slds-accordion__summary-action:hover, .slds-accordion__summary-action:focus { color: var(--slds-g-color-accent-container-3); } .slds-accordion__summary-action:active { box-shadow: none; } .slds-accordion__summary-action-icon { flex-shrink: 0; transform: rotate(-90deg); } .slds-accordion__summary-action-icon:dir(rtl) { transform: rotate(90deg); } @media (min-width: 64em) { .slds-accordion__summary-content { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .slds-accordion__section { padding-block-start: var(--slds-c-accordion-section-spacing-blockstart, var(--slds-g-sizing-4)); padding-inline-end: var(--slds-c-accordion-section-spacing-inlineend, var(--slds-g-sizing-4)); padding-block-end: var(--slds-c-accordion-section-spacing-blockend, var(--slds-g-sizing-4)); padding-inline-start: var(--slds-c-accordion-section-spacing-inlinestart, var(--slds-g-sizing-4)); } .slds-accordion__content { overflow: hidden; visibility: hidden; opacity: 0; height: 0; color: var(--slds-g-color-on-surface-1); } .slds-is-open > .slds-accordion__summary { margin-block-end: 0; } .slds-is-open > .slds-accordion__summary .slds-accordion__summary-action-icon { transform: rotate(0deg); } .slds-is-open > .slds-accordion__content { overflow: visible; visibility: visible; opacity: 1; height: auto; color: var(--slds-g-color-on-surface-1); } .slds-icon-ellie { width: calc(14rem / 16); height: calc(14rem / 16); display: inline-block; overflow: hidden; } .slds-icon-ellie.slds-is-animated { will-change: transform; animation: slds-icon-ellie-pop 0.3s ease-in 2s 1 both; } .slds-icon-ellie.slds-is-animated svg { will-change: transform; animation: slds-icon-ellie 1.2s steps(20) 2.3s 2 alternate; } .slds-icon-ellie.slds-is-paused, .slds-icon-ellie.slds-is-paused svg { animation-play-state: paused; } .slds-icon-ellie svg { width: 17.5rem; vertical-align: top; color: var(--slds-g-color-accent-1); } .slds-icon-ellie circle:nth-child(2n + 1) { fill: currentColor; stroke: currentColor; stroke-width: 4px; } .slds-icon-ellie circle:nth-child(2n) { fill: var(--slds-g-color-on-accent-1); stroke: var(--slds-g-color-on-accent-1); stroke-width: 1px; } .slds-icon-ellie circle:nth-child(1), .slds-icon-ellie circle:nth-last-child(2) { stroke-width: 4px; } .slds-icon-ellie circle:nth-child(2), .slds-icon-ellie circle:nth-last-child(1) { stroke-width: 1px; } .slds-icon-ellie circle:nth-child(3), .slds-icon-ellie circle:nth-last-child(4) { stroke-width: 3.95px; } .slds-icon-ellie circle:nth-child(4), .slds-icon-ellie circle:nth-last-child(3) { stroke-width: 1.2px; } .slds-icon-ellie circle:nth-child(5), .slds-icon-ellie circle:nth-last-child(6) { stroke-width: 3.85px; } .slds-icon-ellie circle:nth-child(6), .slds-icon-ellie circle:nth-last-child(5) { stroke-width: 1.4px; } .slds-icon-ellie circle:nth-child(7), .slds-icon-ellie circle:nth-last-child(8) { stroke-width: 3.6px; } .slds-icon-ellie circle:nth-child(8), .slds-icon-ellie circle:nth-last-child(7) { stroke-width: 1.7px; } .slds-icon-ellie circle:nth-child(9), .slds-icon-ellie circle:nth-last-child(10) { stroke-width: 3.3px; } .slds-icon-ellie circle:nth-child(10), .slds-icon-ellie circle:nth-last-child(9) { stroke-width: 2px; } .slds-icon-ellie circle:nth-child(11), .slds-icon-ellie circle:nth-last-child(12) { stroke-width: 3.2px; } .slds-icon-ellie circle:nth-child(12), .slds-icon-ellie circle:nth-last-child(11) { stroke-width: 2.4px; } .slds-icon-ellie circle:nth-child(13), .slds-icon-ellie circle:nth-last-child(14) { stroke-width: 3.15px; } .slds-icon-ellie circle:nth-child(14), .slds-icon-ellie circle:nth-last-child(13) { stroke-width: 2.8px; } .slds-icon-ellie circle:nth-child(15), .slds-icon-ellie circle:nth-last-child(16) { stroke-width: 3.1px; } .slds-icon-ellie circle:nth-child(16), .slds-icon-ellie circle:nth-last-child(15) { stroke-width: 3.25px; } .slds-icon-ellie circle:nth-child(17), .slds-icon-ellie circle:nth-last-child(18) { stroke-width: 3.05px; } .slds-icon-ellie circle:nth-child(18), .slds-icon-ellie circle:nth-last-child(17) { stroke-width: 3.7px; } .slds-icon-ellie circle:nth-child(19), .slds-icon-ellie circle:nth-last-child(20) { stroke-width: 3px; } .slds-icon-ellie circle:nth-child(20), .slds-icon-ellie circle:nth-last-child(19) { stroke-width: 4px; } @keyframes slds-icon-ellie-pop { 0% { transform: scale(0.2); } 70% { transform: scale(1.1); } 90% { transform: scale(0.7); } 100% { transform: scale(1); } } @keyframes slds-icon-ellie { to { transform: translateX(-17.5rem); } } .slds-icon-eq { position: relative; width: calc(14rem / 16); height: calc(14rem / 16); } .slds-icon-eq.slds-is-animated .slds-icon-eq__bar { animation: slds-icon-eq 0.25s ease-in-out infinite alternate; will-change: transform; height: 0.1875rem; } .slds-icon-eq.slds-is-animated .slds-icon-eq__bar:nth-of-type(2) { animation-duration: 0.65s; } .slds-icon-eq.slds-is-animated .slds-icon-eq__bar:nth-of-type(3) { animation-duration: 0.35s; } .slds-icon-eq__bar { position: absolute; bottom: 0; left: 0; width: calc(4rem / 16); height: 0.5625rem; background: var(--slds-g-color-accent-1); transform: scaleY(1); transform-origin: bottom; } .slds-icon-eq__bar:nth-of-type(2) { left: calc(5rem / 16); height: 0.875rem; } .slds-icon-eq__bar:nth-of-type(3) { left: calc(10rem / 16); height: 0.75rem; } @keyframes slds-icon-eq { to { transform: scaleY(4.6666666667); } } .slds-icon-score { display: inline-block; width: 0.3125rem; height: 0.3125rem; position: relative; } .slds-icon-score__positive, .slds-icon-score__negative { position: absolute; opacity: 0; transition: opacity 0.4s ease-in-out; will-change: opacity; stroke-width: 1.125px; } .slds-icon-score__positive { fill: var(--slds-g-color-success-1); stroke: var(--slds-g-color-success-1); } .slds-icon-score__negative { fill: transparent; stroke: var(--slds-g-color-error-1); } [data-slds-state='positive'] .slds-icon-score__positive, [data-slds-state='negative'] .slds-icon-score__negative { opacity: 1; } .slds-icon-strength { width: 1.6875rem; height: 0.4375rem; display: inline-block; } .slds-icon-strength circle { stroke-width: 0.95px; fill: transparent; stroke: var(--slds-g-color-border-2); transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out; will-change: fill, stroke; } .slds-icon-strength[data-slds-strength='1'] circle:nth-child(1), .slds-icon-strength[data-slds-strength='2'] circle:nth-child(1), .slds-icon-strength[data-slds-strength='2'] circle:nth-child(2), .slds-icon-strength[data-slds-strength='3'] circle:nth-child(1), .slds-icon-strength[data-slds-strength='3'] circle:nth-child(2), .slds-icon-strength[data-slds-strength='3'] circle:nth-child(3) { fill: var(--slds-g-color-success-1); stroke: var(--slds-g-color-success-1); } .slds-icon-strength[data-slds-strength='-1'] circle:nth-child(1), .slds-icon-strength[data-slds-strength='-2'] circle:nth-child(1), .slds-icon-strength[data-slds-strength='-2'] circle:nth-child(2), .slds-icon-strength[data-slds-strength='-3'] circle:nth-child(1), .slds-icon-strength[data-slds-strength='-3'] circle:nth-child(2), .slds-icon-strength[data-slds-strength='-3'] circle:nth-child(3) { fill: var(--slds-g-color-error-container-1); stroke: var(--slds-g-color-error-1); } .slds-icon-strength.slds-is-animated circle { animation: slds-icon-strength-positive-load 0.4s 1s ease-in-out alternate both paused; } .slds-icon-strength.slds-is-animated circle:nth-child(2) { animation-delay: 1.4s; } .slds-icon-strength.slds-is-animated circle:nth-child(3) { animation-delay: 1.8s; } .slds-icon-strength.slds-is-animated[data-slds-strength^='-'] circle { animation-name: slds-icon-strength-negative-load; } .slds-icon-strength.slds-is-animated[data-slds-strength='-1'] circle:nth-child(1), .slds-icon-strength.slds-is-animated[data-slds-strength='-2'] circle:nth-child(1), .slds-icon-strength.slds-is-animated[data-slds-strength='-2'] circle:nth-child(2), .slds-icon-strength.slds-is-animated[data-slds-strength='-3'] circle:nth-child(1), .slds-icon-strength.slds-is-animated[data-slds-strength='-3'] circle:nth-child(2), .slds-icon-strength.slds-is-animated[data-slds-strength='-3'] circle:nth-child(3), .slds-icon-strength.slds-is-animated[data-slds-strength='1'] circle:nth-child(1), .slds-icon-strength.slds-is-animated[data-slds-strength='2'] circle:nth-child(1), .slds-icon-strength.slds-is-animated[data-slds-strength='2'] circle:nth-child(2), .slds-icon-strength.slds-is-animated[data-slds-strength='3'] circle:nth-child(1), .slds-icon-strength.slds-is-animated[data-slds-strength='3'] circle:nth-child(2), .slds-icon-strength.slds-is-animated[data-slds-strength='3'] circle:nth-child(3) { animation-play-state: running; } .slds-icon-strength.slds-is-paused circle { animation-play-state: paused !important; } @keyframes slds-icon-strength-positive-load { 0% { fill: transparent; stroke: var(--slds-g-color-border-2); } 100% { fill: var(--slds-g-color-success-1); stroke: var(--slds-g-color-success-1); } } @keyframes slds-icon-strength-negative-load { 0% { fill: transparent; stroke: var(--slds-g-color-border-2); } 100% { fill: var(--slds-g-color-error-container-1); stroke: var(--slds-g-color-error-1); } } .slds-icon-trend { width: 1rem; height: 1rem; display: inline-block; } .slds-icon-trend.slds-is-animated .slds-icon-trend__arrow { animation: slds-icon-trend-arrow 0.8s 0.4s ease-in-out both; } .slds-icon-trend.slds-is-animated .slds-icon-trend__circle { animation: slds-icon-trend-circle 0.8s ease-in-out both; } .slds-icon-trend.slds-is-paused .slds-icon-trend__arrow, .slds-icon-trend.slds-is-paused .slds-icon-trend__circle { animation-play-state: paused; } .slds-icon-trend[data-slds-trend='down'] { color: var(--slds-g-color-error-1); transform: rotate(45deg); } .slds-icon-trend[data-slds-trend='neutral'] { color: var(--slds-g-color-on-surface-1); } .slds-icon-trend[data-slds-trend='up'] { color: var(--slds-g-color-success-1); transform: rotate(-45deg); } .slds-icon-trend__arrow, .slds-icon-trend__circle { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.125px; } .slds-icon-trend__arrow { stroke-dashoffset: 0.1px; stroke-dasharray: 39.175px; } .slds-icon-trend__circle { stroke-dasharray: 42.3385px, 46.3385px; } @keyframes slds-icon-trend-arrow { from { stroke-dashoffset: 40.3px; } } @keyframes slds-icon-trend-circle { from { stroke-dasharray: 0.1px, 46.3385px; } } .slds-icon-waffle_container, .slds-icon-waffle--container { border: 0; outline: 0; } .slds-icon-waffle_container:focus-visible, .slds-icon-waffle--container:focus-visible { box-shadow: var(--slds-g-shadow-outline-focus-1); outline: 0; } .slds-icon-waffle_container:hover .slds-r1, .slds-icon-waffle--container:hover .slds-r1, .slds-icon-waffle_container:hover .slds-r2, .slds-icon-waffle--container:hover .slds-r2, .slds-icon-waffle_container:hover .slds-r3, .slds-icon-waffle--container:hover .slds-r3, .slds-icon-waffle_container:hover .slds-r4, .slds-icon-waffle--container:hover .slds-r4, .slds-icon-waffle_container:hover .slds-r5, .slds-icon-waffle--container:hover .slds-r5, .slds-icon-waffle_container:hover .slds-r6, .slds-icon-waffle--container:hover .slds-r6, .slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle--container:hover .slds-r7, .slds-icon-waffle_container:hover .slds-r8, .slds-icon-waffle--container:hover .slds-r8, .slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle--container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r1, .slds-icon-waffle--container:focus .slds-r1, .slds-icon-waffle_container:focus .slds-r2, .slds-icon-waffle--container:focus .slds-r2, .slds-icon-waffle_container:focus .slds-r3, .slds-icon-waffle--container:focus .slds-r3, .slds-icon-waffle_container:focus .slds-r4, .slds-icon-waffle--container:focus .slds-r4, .slds-icon-waffle_container:focus .slds-r5, .slds-icon-waffle--container:focus .slds-r5, .slds-icon-waffle_container:focus .slds-r6, .slds-icon-waffle--container:focus .slds-r6, .slds-icon-waffle_container:focus .slds-r7, .slds-icon-waffle--container:focus .slds-r7, .slds-icon-waffle_container:focus .slds-r8, .slds-icon-waffle--container:focus .slds-r8, .slds-icon-waffle_container:focus .slds-r9, .slds-icon-waffle--container:focus .slds-r9 { animation: slds-icon-waffle-throb 2 200ms alternate; } .slds-icon-waffle_container:hover .slds-r1, .slds-icon-waffle--container:hover .slds-r1, .slds-icon-waffle_container:hover .slds-r2, .slds-icon-waffle--container:hover .slds-r2, .slds-icon-waffle_container:hover .slds-r3, .slds-icon-waffle--container:hover .slds-r3, .slds-icon-waffle_container:focus .slds-r1, .slds-icon-waffle--container:focus .slds-r1, .slds-icon-waffle_container:focus .slds-r2, .slds-icon-waffle--container:focus .slds-r2, .slds-icon-waffle_container:focus .slds-r3, .slds-icon-waffle--container:focus .slds-r3 { background-color: var(--slds-g-color-accent-1); } .slds-icon-waffle_container:hover .slds-r4, .slds-icon-waffle--container:hover .slds-r4, .slds-icon-waffle_container:hover .slds-r5, .slds-icon-waffle--container:hover .slds-r5, .slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle--container:hover .slds-r7, .slds-icon-waffle_container:focus .slds-r4, .slds-icon-waffle--container:focus .slds-r4, .slds-icon-waffle_container:focus .slds-r5, .slds-icon-waffle--container:focus .slds-r5, .slds-icon-waffle_container:focus .slds-r7, .slds-icon-waffle--container:focus .slds-r7 { background-color: var(--slds-g-color-warning-base-70); } .slds-icon-waffle_container:hover .slds-r6, .slds-icon-waffle--container:hover .slds-r6, .slds-icon-waffle_container:hover .slds-r8, .slds-icon-waffle--container:hover .slds-r8, .slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle--container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r6, .slds-icon-waffle--container:focus .slds-r6, .slds-icon-waffle_container:focus .slds-r8, .slds-icon-waffle--container:focus .slds-r8, .slds-icon-waffle_container:focus .slds-r9, .slds-icon-waffle--container:focus .slds-r9 { background-color: var(--slds-g-color-palette-yellow-80); } .slds-icon-waffle_container:hover .slds-r2, .slds-icon-waffle--container:hover .slds-r2, .slds-icon-waffle_container:hover .slds-r4, .slds-icon-waffle--container:hover .slds-r4, .slds-icon-waffle_container:focus .slds-r2, .slds-icon-waffle--container:focus .slds-r2, .slds-icon-waffle_container:focus .slds-r4, .slds-icon-waffle--container:focus .slds-r4 { transition-delay: 50ms; animation-delay: 50ms; } .slds-icon-waffle_container:hover .slds-r3, .slds-icon-waffle--container:hover .slds-r3, .slds-icon-waffle_container:hover .slds-r5, .slds-icon-waffle--container:hover .slds-r5, .slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle--container:hover .slds-r7, .slds-icon-waffle_container:focus .slds-r3, .slds-icon-waffle--container:focus .slds-r3, .slds-icon-waffle_container:focus .slds-r5, .slds-icon-waffle--container:focus .slds-r5, .slds-icon-waffle_container:focus .slds-r7, .slds-icon-waffle--container:focus .slds-r7 { transition-delay: 100ms; animation-delay: 100ms; } .slds-icon-waffle_container:hover .slds-r6, .slds-icon-waffle--container:hover .slds-r6, .slds-icon-waffle_container:hover .slds-r8, .slds-icon-waffle--container:hover .slds-r8, .slds-icon-waffle_container:focus .slds-r6, .slds-icon-waffle--container:focus .slds-r6, .slds-icon-waffle_container:focus .slds-r8, .slds-icon-waffle--container:focus .slds-r8 { transition-delay: 150ms; animation-delay: 150ms; } .slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle--container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r9, .slds-icon-waffle--container:focus .slds-r9 { transition-delay: 200ms; animation-delay: 200ms; } .slds-icon-waffle { width: 1.3125rem; height: 1.3125rem; position: relative; display: block; cursor: pointer; } .slds-icon-waffle .slds-r1, .slds-icon-waffle .slds-r2, .slds-icon-waffle .slds-r3, .slds-icon-waffle .slds-r4, .slds-icon-waffle .slds-r5, .slds-icon-waffle .slds-r6, .slds-icon-waffle .slds-r7, .slds-icon-waffle .slds-r8, .slds-icon-waffle .slds-r9 { width: 0.3125rem; height: 0.3125rem; background-color: var(--slds-g-color-neutral-base-50, #747474); display: inline-block; position: absolute; border-radius: 50%; transition: background-color 100ms; transform-origin: 50% 50%; will-change: scale, background-color; border: 2px solid transparent; } .slds-icon-waffle .slds-r1 { top: 0; left: 0; } .slds-icon-waffle .slds-r2 { top: 0; left: 0.5rem; } .slds-icon-waffle .slds-r3 { top: 0; right: 0; } .slds-icon-waffle .slds-r4 { top: 0.5rem; left: 0; } .slds-icon-waffle .slds-r5 { top: 0.5rem; left: 0.5rem; } .slds-icon-waffle .slds-r6 { top: 0.5rem; right: 0; } .slds-icon-waffle .slds-r7 { bottom: 0; left: 0; } .slds-icon-waffle .slds-r8 { bottom: 0; left: 0.5rem; } .slds-icon-waffle .slds-r9 { bottom: 0; right: 0; } .slds-icon-waffle .slds-r1 { transition-delay: 200ms; } .slds-icon-waffle .slds-r2, .slds-icon-waffle .slds-r4 { transition-delay: 150ms; } .slds-icon-waffle .slds-r3, .slds-icon-waffle .slds-r5, .slds-icon-waffle .slds-r7 { transition-delay: 100ms; } .slds-icon-waffle .slds-r6, .slds-icon-waffle .slds-r8 { transition-delay: 50ms; } @keyframes slds-icon-waffle-throb { to { transform: scale(1.5); } } .slds-icon-help { width: 1.5rem; height: 1.5rem; fill: var(--slds-g-color-on-surface-1); } .slds-icon-help:hover .slds-icon-help_hover, .slds-icon-help:hover .slds-icon-help--hover { opacity: 1; transform: scale(1); } .slds-icon-help:focus { animation: slds-click-global-action 80ms cubic-bezier(1, 1.9, 0.94, 0.98); } .slds-icon-help:focus .slds-icon-help_focus, .slds-icon-help:focus .slds-icon-help--focus { opacity: 1; transform: scale(1); } .slds-icon-help mask { mask-type: alpha; } .slds-icon-help_hover, .slds-icon-help--hover { opacity: 0; transform: scale(0.1, 0.1); transform-origin: 45px 47px; transition: all 200ms ease-out; fill: var(--slds-g-color-accent-3); } .slds-icon-help_focus, .slds-icon-help--focus { opacity: 0; transform: scale(0.1, 0.1); transform-origin: 45px 47px; transition: all 200ms ease-out; fill: var(--slds-g-color-accent-2); } .slds-icon-help svg { width: 1.5rem; height: 1.5rem; } .slds-icon-help g { mask: url('#questionMark'); } @keyframes slds-click-global-action { 25% { transform: scale(0.95, 0.95); } 100% { transform: scale(0.98, 0.98); } } .slds-icon-typing { display: inline-block; padding: var(--slds-g-spacing-1) 0; } .slds-icon-typing.slds-is-animated .slds-icon-typing__dot { animation: slds-icon-typing__dot-first 1.2s infinite ease-in-out; } .slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(1) { animation-name: slds-icon-typing__dot-first; } .slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(2) { animation-name: slds-icon-typing__dot-second; } .slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(3) { animation-name: slds-icon-typing__dot-third; } .slds-icon-typing.slds-is-paused .slds-icon-typing__dot { animation-play-state: paused; } .slds-icon-typing__dot { background-color: var(--slds-g-color-neutral-base-80); border-radius: 50%; display: inline-block; height: 0.5rem; margin: 0 0.125rem; width: 0.5rem; } @keyframes slds-icon-typing__dot-first { 0% { background-color: var(--slds-g-color-neutral-base-80); } 16% { background-color: var(--slds-g-color-neutral-base-60); } 33%, 100% { background-color: var(--slds-g-color-neutral-base-80); } } @keyframes slds-icon-typing__dot-second { 0%, 33% { background-color: var(--slds-g-color-neutral-base-80); } 50% { background-color: var(--slds-g-color-neutral-base-60); } 67%, 100% { background-color: var(--slds-g-color-neutral-base-80); } } @keyframes slds-icon-typing__dot-third { 0%, 67% { background-color: var(--slds-g-color-neutral-base-80); } 83% { background-color: var(--slds-g-color-neutral-base-60); } 100% { background-color: var(--slds-g-color-neutral-base-80); } } .slds-dynamic-menu .slds-popover__body { color: var(--slds-g-color-on-surface-2); } .slds-dynamic-menu .slds-popover__footer { background-color: transparent; } .slds-dynamic-menu .slds-dropdown_fluid:focus-visible, .slds-dynamic-menu .slds-dropdown--fluid:focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); outline: 0; } .slds-dynamic-menu__header { font-size: var(--slds-g-font-scale-1); font-weight: var(--slds-g-font-weight-7); } .slds-carousel { position: relative; color: var(--slds-g-color-on-surface-2); } .slds-carousel__stage { position: relative; display: flex; flex-direction: column; overflow: hidden; } .slds-carousel__panels { display: flex; transition: transform 250ms ease-in; min-height: 0%; } .slds-carousel__panel { flex: 0 0 100%; max-width: 100%; } .slds-carousel__panel-action { display: block; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-s-container-radius-border); margin: var(--slds-g-spacing-1); } .slds-carousel__panel-action:focus-visible { outline: 0; box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-carousel__image { border-start-start-radius: inherit; border-start-end-radius: inherit; overflow: hidden; } .slds-carousel__image > img { width: 100%; } .slds-carousel__content { background: var(--slds-g-color-surface-1); padding: var(--slds-g-spacing-4); border-end-start-radius: inherit; border-end-end-radius: inherit; text-align: center; height: 6.625rem; overflow-x: hidden; overflow-y: auto; } .slds-carousel__content-title { font-size: var(--slds-g-font-scale-2); font-weight: var(--slds-g-font-weight-6); } .slds-carousel__indicators { align-self: center; margin: var(--slds-g-spacing-2) 0; } .slds-carousel__indicator { display: inline-flex; margin-block: 0; margin-inline: var(--slds-g-spacing-1); } .slds-carousel__indicator-action { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); background: var(--slds-g-color-surface-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: 50%; } .slds-carousel__indicator-action.slds-is-active, .slds-carousel__indicator-action.slds-is-active:hover { background: var(--slds-g-color-accent-container-1); border-color: var(--slds-g-color-border-accent-1); } .slds-carousel__indicator-action.slds-is-active { box-shadow: var(--slds-s-mark-shadow-checked); } .slds-carousel__indicator-action:hover { background-color: var(--slds-g-color-surface-2); } .slds-carousel__indicator-action:focus-visible { outline: 0; box-shadow: var(--slds-g-shadow-outset-focus-1); background-color: var(--slds-g-color-accent-container-3); border-color: var(--slds-g-color-border-accent-3); } .slds-carousel__autoplay { position: absolute; inset-inline-start: 0; inset-block-end: var(--slds-g-spacing-1); margin: var(--slds-g-spacing-1); } .slds-card_empty .slds-card__body, .slds-card--empty .slds-card__body, .slds-card--empty .slds-card__body { text-align: center; } .slds-einstein-header { position: relative; background-color: var(--slds-g-color-palette-cloud-blue-80); background-image: url('/einstein-header-background.svg'); background-repeat: no-repeat; background-position: left top; background-size: cover; border-top-left-radius: var(--slds-c-card-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); border-top-right-radius: var(--slds-c-card-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-90); padding-inline-start: var(--slds-g-spacing-3); padding-inline-end: var(--slds-g-spacing-3); text-shadow: 0 0 4px var(--slds-g-color-palette-cloud-blue-90); } .slds-einstein-header .slds-einstein-header__figure, .slds-einstein-header .slds-einstein-header__figure:last-child { margin-block-end: calc((var(--slds-g-spacing-3) + 5px) * -1); height: calc(var(--slds-g-sizing-11) + var(--slds-g-sizing-4)); background-image: url('/einstein-figure.svg'); background-position: right bottom; background-repeat: no-repeat; } .slds-einstein-header .slds-einstein-header__actions { padding-inline-start: var(--slds-g-spacing-4); display: flex; align-items: center; } .slds-einstein-header .slds-popover__close { color: currentColor; position: absolute; inset-block-start: 0; inset-inline-end: 0; } .slds-popover_einstein.slds-nubbin_top::before, .slds-popover--einstein.slds-nubbin--top::before, .slds-popover_einstein.slds-nubbin--top::before, .slds-popover--einstein.slds-nubbin--top::before, .slds-popover_einstein.slds-nubbin_top-left::before, .slds-popover--einstein.slds-nubbin--top-left::before, .slds-popover_einstein.slds-nubbin--top-left::before, .slds-popover--einstein.slds-nubbin--top-left::before, .slds-popover_einstein.slds-nubbin_top-right::before, .slds-popover--einstein.slds-nubbin--top-right::before, .slds-popover_einstein.slds-nubbin--top-right::before, .slds-popover--einstein.slds-nubbin--top-right::before, .slds-popover_einstein.slds-nubbin_left-top::before, .slds-popover--einstein.slds-nubbin--left-top::before, .slds-popover_einstein.slds-nubbin--left-top::before, .slds-popover--einstein.slds-nubbin--left-top::before, .slds-popover_einstein.slds-nubbin_right-top::before, .slds-popover--einstein.slds-nubbin--right-top::before, .slds-popover_einstein.slds-nubbin--right-top::before, .slds-popover--einstein.slds-nubbin--right-top::before { background-color: var(--slds-g-color-palette-cloud-blue-80); } .slds-card { position: relative; padding-block-start: var(--slds-c-card-spacing-blockstart, 0); padding-inline-end: var(--slds-c-card-spacing-inlineend, 0); padding-block-end: var(--slds-c-card-spacing-blockend, 0); padding-inline-start: var(--slds-c-card-spacing-inlinestart, 0); background: var(--slds-c-card-color-background, var(--slds-g-color-surface-container-1)); border-width: var(--slds-c-card-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-card-color-border, var(--slds-s-container-color-border, var(--slds-g-color-border-1))); border-radius: var(--slds-c-card-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); background-clip: padding-box; box-shadow: var(--slds-c-card-shadow, var(--slds-s-container-shadow, var(--slds-g-shadow-2))); color: var(--slds-c-card-text-color, var(--slds-s-container-color)); } .slds-card + .slds-card { margin-block-start: var(--_slds-g-spacing-var-block-4, var(--slds-g-spacing-4)); } .slds-card__header { padding-block-start: var( --slds-c-card-header-spacing-blockstart, var(--slds-c-card-header-spacing-block, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))) ); padding-inline-end: var( --slds-c-card-header-spacing-inlineend, var(--slds-c-card-header-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); padding-block-end: var(--slds-c-card-header-spacing-blockend, var(--slds-c-card-header-spacing-block, 0)); padding-inline-start: var( --slds-c-card-header-spacing-inlinestart, var(--slds-c-card-header-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); margin: 0; margin-block-end: var(--slds-c-card-header-spacing-blockend, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))); } .slds-card__header-title { display: flex; font-size: var(--slds-c-card-heading-font-size, var(--slds-s-container-heading-font-size, var(--slds-g-font-scale-2))); font-weight: var(--slds-c-card-heading-font-weight, var(--slds-s-container-heading-font-weight, var(--slds-g-font-weight-4))); line-height: var(--slds-g-font-lineheight-2); color: var(--slds-g-color-on-surface-3); } .slds-card__header-link { color: inherit; font-weight: var(--slds-c-card-heading-font-weight, var(--slds-s-container-heading-font-weight, var(--slds-g-font-weight-7))); } .slds-card__body { margin-block-start: var( --slds-c-card-body-spacing-blockstart, var(--slds-c-card-body-spacing-block, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))) ); margin-block-end: var( --slds-c-card-body-spacing-blockend, var(--slds-c-card-body-spacing-block, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))) ); padding-inline-end: var(--slds-c-card-body-spacing-inlineend, var(--slds-c-card-body-spacing-inline)); padding-inline-start: var(--slds-c-card-body-spacing-inlinestart, var(--slds-c-card-body-spacing-inline, var(--slds-g-spacing-1))); } .slds-card__body_inner, .slds-card__body--inner { --slds-c-card-body-spacing-inlineend: var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3)); --slds-c-card-body-spacing-inlinestart: var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3)); padding-block-start: 0; padding-block-end: 0; } .slds-card__body:empty, .slds-card__footer:empty { display: none; } .slds-card__footer { display: flex; justify-content: center; align-items: center; padding-block-start: var( --slds-c-card-footer-spacing-blockstart, var(--slds-c-card-footer-spacing-block, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))) ); padding-inline-end: var( --slds-c-card-footer-spacing-inlineend, var(--slds-c-card-footer-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); padding-block-end: var( --slds-c-card-footer-spacing-blockend, var(--slds-c-card-footer-spacing-block, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))) ); padding-inline-start: var( --slds-c-card-footer-spacing-inlinestart, var(--slds-c-card-footer-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); margin-block-start: var(--slds-c-card-footer-spacing-blockstart, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))); font-size: var(--slds-c-card-footer-font-size, var(--slds-g-font-size-base)); border-top-width: var(--slds-c-card-footer-sizing-border, var(--slds-g-sizing-border-1)); border-top-style: solid; border-top-color: var(--slds-c-card-footer-color-border, var(--slds-g-color-border-1)); } .slds-card__footer-action { display: block; } .slds-card__tile { margin-block-start: var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3)); } .slds-region__pinned-left .slds-card, .slds-region__pinned-left .slds-card-wrapper, .slds-region__pinned-left .slds-card_boundary, .slds-region__pinned-left .slds-card--boundary, .slds-region__pinned-left .slds-tabs_card, .slds-region__pinned-left .slds-tabs--card, .slds-region__pinned-right .slds-card, .slds-region__pinned-right .slds-card-wrapper, .slds-region__pinned-right .slds-card_boundary, .slds-region__pinned-right .slds-card--boundary, .slds-region__pinned-right .slds-tabs_card, .slds-region__pinned-right .slds-tabs--card { border-radius: 0; border: 0; border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); box-shadow: none; } .slds-region__pinned-left .slds-card:last-child, .slds-region__pinned-left .slds-card-wrapper:last-child, .slds-region__pinned-left .slds-card_boundary:last-child, .slds-region__pinned-left .slds-card--boundary:last-child, .slds-region__pinned-left .slds-tabs_card:last-child, .slds-region__pinned-left .slds-tabs--card:last-child, .slds-region__pinned-right .slds-card:last-child, .slds-region__pinned-right .slds-card-wrapper:last-child, .slds-region__pinned-right .slds-card_boundary:last-child, .slds-region__pinned-right .slds-card--boundary:last-child, .slds-region__pinned-right .slds-tabs_card:last-child, .slds-region__pinned-right .slds-tabs--card:last-child { border-block-end: 0; } .slds-card-wrapper { padding: var(--_slds-g-spacing-var-4, var(--slds-g-spacing-4)); background: var(--slds-c-card-color-background, var(--slds-g-color-surface-container-1)); border-width: var(--slds-c-card-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-card-color-border, var(--slds-s-container-color-border, var(--slds-g-color-border-1))); border-radius: var(--slds-c-card-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); background-clip: padding-box; box-shadow: var(--slds-c-card-shadow, var(--slds-s-container-shadow, var(--slds-g-shadow-2))); } .slds-card-wrapper .slds-card__header, .slds-card-wrapper .slds-card__body, .slds-card-wrapper .slds-card__footer { padding-inline-start: 0; padding-inline-end: 0; } .slds-card .slds-card, .slds-card .slds-card-wrapper, .slds-card-wrapper .slds-card, .slds-card-wrapper .slds-card-wrapper, .slds-modal .slds-card, .slds-modal .slds-card-wrapper { border: 0; box-shadow: none; } .slds-tabs_default .slds-card, .slds-tabs--default .slds-card, .slds-tabs_default .slds-card-wrapper, .slds-tabs--default .slds-card-wrapper, .slds-tabs_card .slds-card, .slds-tabs--card .slds-card, .slds-tabs_card .slds-card-wrapper, .slds-tabs--card .slds-card-wrapper, .slds-tabs_card.slds-tabs_card .slds-card, .slds-tabs--card.slds-tabs--card .slds-card, .slds-tabs_card.slds-tabs_card .slds-card-wrapper, .slds-tabs--card.slds-tabs--card .slds-card-wrapper { border: 0; box-shadow: none; } .slds-card .slds-card_boundary, .slds-card .slds-card--boundary, .slds-modal .slds-card_boundary, .slds-modal .slds-card--boundary, .slds-tabs_default .slds-card_boundary, .slds-tabs--default .slds-card--boundary { border-width: var(--slds-c-card-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-card-color-border, var(--slds-s-container-color-border, var(--slds-g-color-border-1))); border-radius: var(--slds-c-card-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); } .slds-tabs_card, .slds-tabs--card, .slds-tabs_card.slds-tabs_card, .slds-tabs--card.slds-tabs--card { padding-block: var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3)); padding-inline: var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4)); background: var(--slds-c-card-color-background, var(--slds-g-color-surface-container-1)); border-width: var(--slds-c-card-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-card-color-border, var(--slds-s-container-color-border, var(--slds-g-color-border-1))); border-radius: var(--slds-c-card-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); box-shadow: var(--slds-c-card-shadow, var(--slds-s-container-shadow, var(--slds-g-shadow-2))); } .slds-tabs_card .slds-card, .slds-tabs--card .slds-card, .slds-tabs_card .slds-card-wrapper, .slds-tabs--card .slds-card-wrapper, .slds-tabs_card.slds-tabs_card .slds-card, .slds-tabs--card.slds-tabs--card .slds-card, .slds-tabs_card.slds-tabs_card .slds-card-wrapper, .slds-tabs--card.slds-tabs--card .slds-card-wrapper { padding-inline-start: 0; padding-inline-end: 0; } .slds-tabs_card .slds-card__header, .slds-tabs--card .slds-card__header, .slds-tabs_card .slds-card__body, .slds-tabs--card .slds-card__body, .slds-tabs_card .slds-card__footer, .slds-tabs--card .slds-card__footer, .slds-tabs_card.slds-tabs_card .slds-card__header, .slds-tabs--card.slds-tabs--card .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card__body, .slds-tabs--card.slds-tabs--card .slds-card__body, .slds-tabs_card.slds-tabs_card .slds-card__footer, .slds-tabs--card.slds-tabs--card .slds-card__footer { padding-inline-start: 0; padding-inline-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .slds-tabs_card .slds-card__header, .slds-tabs--card .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card__header, .slds-tabs--card.slds-tabs--card .slds-card__header { padding-block-start: 0; } .slds-tabs_card .slds-card_boundary, .slds-tabs--card .slds-card--boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary, .slds-tabs--card.slds-tabs--card .slds-card--boundary, .slds-card-wrapper .slds-card_boundary, .slds-card-wrapper .slds-card--boundary { border-width: var(--slds-c-card-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-card-color-border, var(--slds-s-container-color-border, var(--slds-g-color-border-1))); border-radius: var(--slds-c-card-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); } .slds-tabs_card .slds-card_boundary .slds-card__header, .slds-tabs--card .slds-card--boundary .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__header, .slds-tabs--card.slds-tabs--card .slds-card--boundary .slds-card__header, .slds-card-wrapper .slds-card_boundary .slds-card__header, .slds-card-wrapper .slds-card--boundary .slds-card__header { padding-block-start: var( --slds-c-card-header-spacing-blockstart, var(--slds-c-card-header-spacing-block, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))) ); padding-inline-end: var( --slds-c-card-header-spacing-inlineend, var(--slds-c-card-header-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); padding-block-end: var(--slds-c-card-header-spacing-blockend, var(--slds-c-card-header-spacing-block, 0)); padding-inline-start: var( --slds-c-card-header-spacing-inlinestart, var(--slds-c-card-header-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); } .slds-tabs_card .slds-card_boundary .slds-card__body_inner, .slds-tabs--card .slds-card--boundary .slds-card__body--inner, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__body_inner, .slds-tabs--card.slds-tabs--card .slds-card--boundary .slds-card__body--inner, .slds-card-wrapper .slds-card_boundary .slds-card__body_inner, .slds-card-wrapper .slds-card--boundary .slds-card__body--inner { padding: 0; padding-inline-end: var( --slds-c-card-body-spacing-inlineend, var(--slds-c-card-body-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); padding-inline-start: var( --slds-c-card-body-spacing-inlinestart, var(--slds-c-card-body-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); } .slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-tabs--card .slds-card--boundary .slds-card__footer, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-tabs--card.slds-tabs--card .slds-card--boundary .slds-card__footer, .slds-card-wrapper .slds-card_boundary .slds-card__footer, .slds-card-wrapper .slds-card--boundary .slds-card__footer { padding-block-start: var( --slds-c-card-footer-spacing-blockstart, var(--slds-c-card-footer-spacing-block, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))) ); padding-inline-end: var( --slds-c-card-footer-spacing-inlineend, var(--slds-c-card-footer-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); padding-block-end: var( --slds-c-card-footer-spacing-blockend, var(--slds-c-card-footer-spacing-block, var(--_slds-g-spacing-var-block-3, var(--slds-g-spacing-3))) ); padding-inline-start: var( --slds-c-card-footer-spacing-inlinestart, var(--slds-c-card-footer-spacing-inline, var(--_slds-g-spacing-var-inline-4, var(--slds-g-spacing-4))) ); } .slds-card_related-list-fix, .slds-card--related-list-fix { border-radius: var(--slds-s-container-radius-border, var(--slds-g-radius-border-2)); } .slds-card_related-list-fix .slds-page-header, .slds-card--related-list-fix .slds-page-header { background: var(--slds-g-color-surface-container-1); border-radius: var(--slds-s-container-radius-border); } .slds-accordion .slds-card_related-list-fix, .slds-accordion .slds-card--related-list-fix, .slds-tabs_card.slds-tabs_card .slds-card_related-list-fix, .slds-tabs--card.slds-tabs--card .slds-card--related-list-fix { border-color: var(--slds-g-color-border-1); } .slds-card_related-list-fix .slds-page-header .slds-button-group-list .slds-button_icon-border-filled, .slds-card--related-list-fix .slds-page-header .slds-button-group-list .slds-button--icon-border-filled { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); } .slds-card_related-list-fix .slds-file-selector__dropzone, .slds-card--related-list-fix .slds-file-selector__dropzone { margin-block-start: 0; margin-block-end: var(--slds-g-spacing-4); margin-inline-start: var(--slds-g-spacing-4); margin-inline-end: var(--slds-g-spacing-4); } .slds-chat { margin-block-end: var(--slds-g-spacing-3); } .slds-chat-list { padding-block: 0; padding-inline: var(--slds-g-spacing-3); } .slds-chat-listitem { display: flex; margin-block-start: var(--slds-g-spacing-3); } .slds-chat-listitem_outbound, .slds-chat-listitem--outbound { justify-content: flex-end; } .slds-chat-listitem_inbound + .slds-chat-listitem_inbound, .slds-chat-listitem--inbound + .slds-chat-listitem--inbound, .slds-chat-listitem_outbound + .slds-chat-listitem_outbound, .slds-chat-listitem--outbound + .slds-chat-listitem--outbound { margin-block-start: var(--slds-g-spacing-1); } .slds-chat-listitem_bookend, .slds-chat-listitem--bookend { margin-block: var(--slds-g-spacing-4); margin-inline-start: calc(var(--slds-g-spacing-3) * -1); margin-inline-end: calc(var(--slds-g-spacing-3) * -1); } .slds-chat-listitem_bookend + .slds-chat-listitem_bookend, .slds-chat-listitem--bookend + .slds-chat-listitem--bookend { margin-block-start: var(--slds-g-spacing-8); } .slds-chat-listitem_event, .slds-chat-listitem--event { margin-block: var(--slds-g-spacing-5); margin-inline: 0; } .slds-chat-icon { margin-inline-end: var(--slds-g-spacing-2); } .slds-chat-message { display: flex; } .slds-chat-message_faux-avatar, .slds-chat-message--faux-avatar { padding-inline-start: calc(var(--slds-g-spacing-6) + var(--slds-g-spacing-2)); } .slds-chat-avatar { margin-inline-end: var(--slds-g-spacing-2); min-width: 2rem; } .slds-chat-message__body { display: flex; flex-direction: column; } .slds-chat-message__image_loading, .slds-chat-message__image--loading { width: var(--slds-g-sizing-14); height: calc((180 / 16) * 1rem); } .slds-chat-message__text { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; display: inline-block; font-size: var(--slds-g-font-size-base); max-width: calc((420 / 16) * 1rem); white-space: pre-line; } .slds-chat-message__text a { color: var(--slds-s-link-color-focus); text-decoration: underline; } .slds-chat-message__text a:hover { text-decoration: none; } .slds-chat-message__file { width: var(--slds-g-sizing-14); } .slds-chat-message__file, .slds-chat-message__image { overflow: hidden; } .slds-chat-message__file .slds-file:hover, .slds-chat-message__image .slds-file:hover { box-shadow: none; transition: none; } .slds-chat-message__file:focus-within, .slds-chat-message__image:focus-within { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-chat-message__text_inbound, .slds-chat-message__text--inbound, .slds-chat-message__file_inbound, .slds-chat-message__file--inbound, .slds-chat-message__image_inbound, .slds-chat-message__image--inbound, .slds-chat-message__text_outbound, .slds-chat-message__text--outbound, .slds-chat-message__file_outbound, .slds-chat-message__file--outbound, .slds-chat-message__image_outbound, .slds-chat-message__image--outbound, .slds-chat-message__text_outbound-agent, .slds-chat-message__text--outbound-agent, .slds-chat-message__text_unsupported-type, .slds-chat-message__text--unsupported-type, .slds-chat-message__text_delivery-failure, .slds-chat-message__text--delivery-failure { border-start-start-radius: var(--slds-g-radius-border-3); border-start-end-radius: var(--slds-g-radius-border-3); border-end-start-radius: var(--slds-g-radius-border-3); border-end-end-radius: 0; color: var(--slds-g-color-on-surface-inverse-1); min-height: 2rem; } .slds-chat-message__text_inbound, .slds-chat-message__text--inbound, .slds-chat-message__text_outbound, .slds-chat-message__text--outbound, .slds-chat-message__text_outbound-agent, .slds-chat-message__text--outbound-agent, .slds-chat-message__text_unsupported-type, .slds-chat-message__text--unsupported-type, .slds-chat-message__text_delivery-failure, .slds-chat-message__text--delivery-failure { padding: var(--slds-g-spacing-2); } .slds-chat-message__file_inbound, .slds-chat-message__file--inbound, .slds-chat-message__image_inbound, .slds-chat-message__image--inbound, .slds-chat-message__file_outbound, .slds-chat-message__file--outbound, .slds-chat-message__image_outbound, .slds-chat-message__image--outbound { padding: 0; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-chat-message__file_inbound, .slds-chat-message__file--inbound, .slds-chat-message__image_inbound, .slds-chat-message__image--inbound, .slds-chat-message__file_outbound, .slds-chat-message__file--outbound, .slds-chat-message__image_outbound, .slds-chat-message__image--outbound { color: var(--slds-g-color-on-surface-2); } .slds-chat-message__text_inbound, .slds-chat-message__text--inbound { margin-right: auto; background-color: var(--slds-g-color-surface-container-2); border-start-start-radius: var(--slds-g-radius-border-3); border-start-end-radius: var(--slds-g-radius-border-3); border-end-start-radius: 0; border-end-end-radius: var(--slds-g-radius-border-3); color: var(--slds-g-color-on-surface-2); } .slds-chat-message__image_inbound, .slds-chat-message__image--inbound { background-color: var(--slds-g-color-surface-container-2); border-start-start-radius: var(--slds-g-radius-border-3); border-start-end-radius: var(--slds-g-radius-border-3); border-end-start-radius: 0; border-end-end-radius: var(--slds-g-radius-border-3); } .slds-chat-message__file_inbound, .slds-chat-message__file--inbound { border-radius: var(--slds-g-radius-border-3); background-color: var(--slds-g-color-surface-container-1); } .slds-chat-message__text_outbound, .slds-chat-message__text--outbound { margin-inline-start: auto; background-color: var(--slds-g-color-surface-container-inverse-1); } .slds-chat-message__text_outbound-agent, .slds-chat-message__text--outbound-agent { background-color: var(--slds-g-color-neutral-base-50); margin-inline-start: auto; } .slds-chat-message__text_outbound a, .slds-chat-message__text--outbound a, .slds-chat-message__text_outbound-agent a, .slds-chat-message__text--outbound-agent a { color: var(--slds-g-color-neutral-base-100); text-decoration: underline; } .slds-chat-message__text_unsupported-type, .slds-chat-message__text--unsupported-type { background-color: var(--slds-g-color-surface-container-1); border-start-start-radius: var(--slds-g-radius-border-3); border-start-end-radius: var(--slds-g-radius-border-3); border-end-start-radius: 0; border-end-end-radius: var(--slds-g-radius-border-3); border: var(--slds-g-color-warning-base-60) var(--slds-g-sizing-border-1) solid; color: var(--slds-g-color-on-surface-2); margin-inline-end: auto; } .slds-chat-message__text_delivery-failure, .slds-chat-message__text--delivery-failure { background-color: var(--slds-g-color-surface-container-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-error-1); color: var(--slds-g-color-on-surface-2); margin-inline-start: auto; } .slds-chat-message__text_delivery-failure .slds-chat-message__text_delivery-failure-reason, .slds-chat-message__text--delivery-failure .slds-chat-message__text--delivery-failure-reason { display: flex; padding-block: var(--slds-g-spacing-2) 0; padding-inline: var(--slds-g-spacing-2); margin-block: var(--slds-g-spacing-2) 0; margin-inline: calc(var(--slds-g-spacing-2) * -1); color: var(--slds-g-color-error-1); border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-error-1); } .slds-chat-message__text_sneak-peak, .slds-chat-message__text--sneak-peak, .slds-chat-message__text_sneak-peek, .slds-chat-message__text--sneak-peek { font-style: italic; } .slds-chat-message__text_sneak-peak .slds-icon-typing, .slds-chat-message__text--sneak-peak .slds-icon-typing, .slds-chat-message__text_sneak-peek .slds-icon-typing, .slds-chat-message__text--sneak-peek .slds-icon-typing { margin-inline-end: var(--slds-g-spacing-2); } .slds-chat-message__meta { color: var(--slds-g-color-on-surface-2); font-size: var(--slds-g-font-scale-neg-2); margin-block: 0.125rem 0; margin-inline: var(--slds-g-spacing-2) 0; } .slds-chat-message__action { font-size: var(--slds-g-font-scale-neg-1); margin-inline-start: var(--slds-g-spacing-2); line-height: var(--slds-g-font-lineheight-2); } .slds-chat-message__action .slds-chat-icon.slds-icon-utility-redo .slds-icon { width: var(--slds-g-sizing-4); height: var(--slds-g-sizing-4); fill: var(--slds-s-link-color); } .slds-chat-event { align-items: center; color: var(--slds-g-color-on-surface-2); display: inline-flex; flex-wrap: wrap; justify-content: center; font-size: var(--slds-g-font-size-base); text-align: center; width: 100%; } .slds-chat-event.slds-has-error { color: var(--slds-g-color-error-1); } .slds-chat-event.slds-has-error svg { fill: var(--slds-g-color-error-1); } .slds-chat-event__body { align-items: center; display: flex; margin-block: 0; margin-inline: var(--slds-g-spacing-2); } .slds-chat-event__agent-message { flex-grow: 3; font-size: var(--slds-g-font-scale-neg-1); font-style: italic; margin-block-start: var(--slds-g-spacing-2); width: 100%; } .slds-chat-bookend { align-items: center; border: var(--slds-g-color-border-1) 0 solid; border-block-end-width: var(--slds-g-sizing-border-1); color: var(--slds-g-color-on-surface-2); display: flex; font-size: var(--slds-g-font-size-base); justify-content: center; padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); width: 100%; } .slds-chat-bookend_stop, .slds-chat-bookend--stop { border-width: var(--slds-g-sizing-border-1) 0 0; } .slds-chat_past .slds-chat-listitem_event, .slds-chat--past .slds-chat-listitem--event { margin-block: var(--slds-g-spacing-4); margin-inline: 0; } .slds-chat_past .slds-chat-message__meta, .slds-chat--past .slds-chat-message__meta { margin-block: var(--slds-g-spacing-1) 0; margin-inline: 0; } .slds-chat_past .slds-chat-message__meta b, .slds-chat--past .slds-chat-message__meta b { color: var(--slds-g-color-on-surface-3); } .slds-datetimepicker_has-tooltip .slds-form-element__icon, .slds-datetimepicker--has-tooltip .slds-form-element__icon { padding-block-start: 0; } .slds-form-element { position: relative; min-width: 0; } .slds-form-element__label { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; display: inline-block; color: var(--slds-s-label-color, var(--slds-g-color-on-surface-2)); font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2)); padding-inline-end: var(--slds-g-spacing-2); padding-block-start: var(--slds-g-spacing-1); margin-block-end: var(--slds-s-label-spacing-gap, calc(var(--slds-g-spacing-1) / 2)); } .slds-form-element__label:empty { margin: 0; } .slds-form-element__control { clear: left; position: relative; } .slds-form-element__control .slds-radio, .slds-form-element__control .slds-checkbox { display: block; } [dir='rtl'] .slds-form-element__label { /*! @noflip */ padding-right: 0; /*! @noflip */ padding-left: var(--slds-g-spacing-2); } [dir='rtl'] .slds-form-element__control { /*! @noflip */ clear: right; } .slds-form-element__icon { display: inline-block; position: relative; padding-block-start: var(--slds-g-spacing-1); vertical-align: top; line-height: var(--slds-g-font-lineheight-1); z-index: 1; } .slds-form-element__icon .slds-button_icon, .slds-form-element__icon .slds-button--icon { position: relative; } .slds-form-element__help, .slds-form-element__helper { font-size: var(--slds-s-helptext-font-size, var(--slds-g-font-scale-neg-2)); margin-block-start: calc(var(--slds-g-spacing-1) / 2); display: block; color: var(--slds-s-helptext-color); } .slds-form-element_edit .slds-form-element__static, .slds-form-element--edit .slds-form-element__static { width: calc(100% - var(--slds-g-sizing-7)); } .slds-form-element_readonly, .slds-form-element--readonly { flex-basis: 0%; border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); margin-block-end: 0; } .slds-form-element_readonly .slds-form-element__control, .slds-form-element--readonly .slds-form-element__control { padding-block-start: calc(var(--slds-g-spacing-1) / 2); padding-block-end: calc(var(--slds-g-spacing-1) / 2); } .slds-form-element_readonly .slds-form-element__label, .slds-form-element--readonly .slds-form-element__label { margin-block-end: 0; } .slds-form-element__legend { font-weight: var(--slds-g-font-weight-7); float: left; } [dir='rtl'] .slds-form-element__legend { /*! @noflip */ float: right; /*! @noflip */ padding-right: 0; } .slds-form-element__addon { display: inline-block; margin: 0 var(--slds-g-spacing-2); align-self: center; } .slds-form-element__static { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; display: inline-block; font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-1)); font-weight: var(--slds-g-font-weight-4); color: var(--slds-g-color-neutral-base-10); width: 100%; } .slds-form-element__static.slds-text-longform *:last-child { margin-block-end: 0; } .slds-form-element__static:empty { min-height: calc(var(--slds-g-sizing-6) + 1px); vertical-align: bottom; } .slds-form-element__static--edit { width: calc(100% - var(--slds-g-sizing-7)); } .slds-required { color: var(--slds-g-color-error-1); margin: 0 calc(var(--slds-g-spacing-1) / 2); } .slds-has-error .slds-form-element__help { color: var(--slds-g-color-error-1); } .slds-form_inline .slds-form-element, .slds-form--inline .slds-form-element, .slds-form_inline .slds-form-element__label, .slds-form--inline .slds-form-element__label, .slds-form_inline .slds-form-element__control, .slds-form--inline .slds-form-element__control { display: block; } .slds-form_inline .slds-form-element + .slds-form-element, .slds-form--inline .slds-form-element + .slds-form-element { margin-block-start: var(--slds-g-spacing-3); } @media (min-width: 30em) { .slds-form_inline .slds-form-element, .slds-form--inline .slds-form-element { margin-inline-end: var(--slds-g-spacing-2); } .slds-form_inline .slds-form-element + .slds-form-element, .slds-form--inline .slds-form-element + .slds-form-element { margin-block-start: 0; } .slds-form_inline .slds-form-element, .slds-form--inline .slds-form-element, .slds-form_inline .slds-form-element__label, .slds-form--inline .slds-form-element__label, .slds-form_inline .slds-form-element__control, .slds-form--inline .slds-form-element__control { display: inline-block; vertical-align: middle; margin-block-end: 0; } } .slds-form-element__legend_has-tooltip, .slds-form-element__legend--has-tooltip { float: left; } .slds-form-element_address .slds-form-element__row, .slds-form-element--address .slds-form-element__row { align-items: flex-end; } .slds-form-element_stacked, .slds-form-element--stacked, .slds-form_stacked .slds-form-element, .slds-form--stacked .slds-form-element, .slds-form_horizontal .slds-form-element_stacked, .slds-form--horizontal .slds-form-element--stacked { display: block; } .slds-form-element_stacked:not(.slds-form-element_readonly), .slds-form-element--stacked:not(.slds-form-element--readonly), .slds-form_stacked .slds-form-element:not(.slds-form-element_readonly), .slds-form--stacked .slds-form-element:not(.slds-form-element--readonly), .slds-form_horizontal .slds-form-element_stacked:not(.slds-form-element_readonly), .slds-form--horizontal .slds-form-element--stacked:not(.slds-form-element--readonly) { margin-block-end: var(--slds-g-spacing-2); } .slds-form-element_stacked:not(.slds-is-editing), .slds-form-element--stacked:not(.slds-is-editing), .slds-form_stacked .slds-form-element:not(.slds-is-editing), .slds-form--stacked .slds-form-element:not(.slds-is-editing), .slds-form_horizontal .slds-form-element_stacked:not(.slds-is-editing), .slds-form--horizontal .slds-form-element--stacked:not(.slds-is-editing) { padding: 0 var(--slds-g-spacing-1); } .slds-form-element_stacked .slds-form-element, .slds-form-element--stacked .slds-form-element, .slds-form_stacked .slds-form-element .slds-form-element, .slds-form--stacked .slds-form-element .slds-form-element, .slds-form_horizontal .slds-form-element_stacked .slds-form-element, .slds-form--horizontal .slds-form-element--stacked .slds-form-element { padding: 0; margin-block-end: 0; } .slds-form-element_stacked:not([class*='slds-size']), .slds-form-element--stacked:not([class*='slds-size']), .slds-form_stacked .slds-form-element:not([class*='slds-size']), .slds-form--stacked .slds-form-element:not([class*='slds-size']), .slds-form_horizontal .slds-form-element_stacked:not([class*='slds-size']), .slds-form--horizontal .slds-form-element--stacked:not([class*='slds-size']) { width: 100%; flex-basis: 100%; } .slds-form-element_stacked .slds-checkbox, .slds-form-element--stacked .slds-checkbox, .slds-form-element_stacked .slds-radio, .slds-form-element--stacked .slds-radio, .slds-form_stacked .slds-form-element .slds-checkbox, .slds-form--stacked .slds-form-element .slds-checkbox, .slds-form_stacked .slds-form-element .slds-radio, .slds-form--stacked .slds-form-element .slds-radio, .slds-form_horizontal .slds-form-element_stacked .slds-checkbox, .slds-form--horizontal .slds-form-element--stacked .slds-checkbox, .slds-form_horizontal .slds-form-element_stacked .slds-radio, .slds-form--horizontal .slds-form-element--stacked .slds-radio { display: block; } .slds-form-element_stacked .slds-form-element__label, .slds-form-element--stacked .slds-form-element__label, .slds-form-element_stacked .slds-form-element__control, .slds-form-element--stacked .slds-form-element__control, .slds-form_stacked .slds-form-element .slds-form-element__label, .slds-form--stacked .slds-form-element .slds-form-element__label, .slds-form_stacked .slds-form-element .slds-form-element__control, .slds-form--stacked .slds-form-element .slds-form-element__control, .slds-form_horizontal .slds-form-element_stacked .slds-form-element__label, .slds-form--horizontal .slds-form-element--stacked .slds-form-element__label, .slds-form_horizontal .slds-form-element_stacked .slds-form-element__control, .slds-form--horizontal .slds-form-element--stacked .slds-form-element__control { border-bottom: 0; padding-inline-start: 0; } .slds-form-element_stacked .slds-form-element__control, .slds-form-element--stacked .slds-form-element__control, .slds-form_stacked .slds-form-element .slds-form-element__control, .slds-form--stacked .slds-form-element .slds-form-element__control, .slds-form_horizontal .slds-form-element_stacked .slds-form-element__control, .slds-form--horizontal .slds-form-element--stacked .slds-form-element__control { width: 100%; flex-basis: 100%; clear: left; } [dir='rtl'] .slds-form-element_stacked .slds-form-element__control, [dir='rtl'] .slds-form-element--stacked .slds-form-element__control, [dir='rtl'] .slds-form_stacked .slds-form-element .slds-form-element__control, [dir='rtl'] .slds-form--stacked .slds-form-element .slds-form-element__control, [dir='rtl'] .slds-form_horizontal .slds-form-element_stacked .slds-form-element__control, [dir='rtl'] .slds-form--horizontal .slds-form-element--stacked .slds-form-element__control { /*! @noflip */ clear: right; } .slds-form-element_stacked .slds-form-element__icon, .slds-form-element--stacked .slds-form-element__icon, .slds-form_stacked .slds-form-element .slds-form-element__icon, .slds-form--stacked .slds-form-element .slds-form-element__icon, .slds-form_horizontal .slds-form-element_stacked .slds-form-element__icon, .slds-form--horizontal .slds-form-element--stacked .slds-form-element__icon { float: none; padding-block-start: var(--slds-g-spacing-1); } .slds-form-element_horizontal, .slds-form-element--horizontal, .slds-form_horizontal .slds-form-element, .slds-form--horizontal .slds-form-element, .slds-form_stacked .slds-form-element_horizontal, .slds-form--stacked .slds-form-element--horizontal { display: block; } .slds-form-element_horizontal:not(.slds-form-element_readonly), .slds-form-element--horizontal:not(.slds-form-element--readonly), .slds-form_horizontal .slds-form-element:not(.slds-form-element_readonly), .slds-form--horizontal .slds-form-element:not(.slds-form-element--readonly), .slds-form_stacked .slds-form-element_horizontal:not(.slds-form-element_readonly), .slds-form--stacked .slds-form-element--horizontal:not(.slds-form-element--readonly) { margin-block-end: var(--slds-g-spacing-2); } .slds-form-element_horizontal:not([class*='slds-size']), .slds-form-element--horizontal:not([class*='slds-size']), .slds-form_horizontal .slds-form-element:not([class*='slds-size']), .slds-form--horizontal .slds-form-element:not([class*='slds-size']), .slds-form_stacked .slds-form-element_horizontal:not([class*='slds-size']), .slds-form--stacked .slds-form-element--horizontal:not([class*='slds-size']) { width: 100%; flex-basis: 100%; } .slds-form-element_horizontal:not(.slds-is-editing), .slds-form-element--horizontal:not(.slds-is-editing), .slds-form_horizontal .slds-form-element:not(.slds-is-editing), .slds-form--horizontal .slds-form-element:not(.slds-is-editing), .slds-form_stacked .slds-form-element_horizontal:not(.slds-is-editing), .slds-form--stacked .slds-form-element--horizontal:not(.slds-is-editing) { padding-block: var(--slds-g-spacing-var-1); padding-inline: var(--slds-g-spacing-1); } .slds-form-element_horizontal .slds-form-element, .slds-form-element--horizontal .slds-form-element, .slds-form_horizontal .slds-form-element .slds-form-element, .slds-form--horizontal .slds-form-element .slds-form-element, .slds-form_stacked .slds-form-element_horizontal .slds-form-element, .slds-form--stacked .slds-form-element--horizontal .slds-form-element { padding: 0; margin-block-end: 0; } .slds-form-element_horizontal.slds-is-edited, .slds-form-element--horizontal.slds-is-edited, .slds-form_horizontal .slds-form-element.slds-is-edited, .slds-form--horizontal .slds-form-element.slds-is-edited, .slds-form_stacked .slds-form-element_horizontal.slds-is-edited, .slds-form--stacked .slds-form-element--horizontal.slds-is-edited { padding-block-start: calc(var(--slds-g-spacing-4) + var(--slds-g-spacing-1)); } @media (min-width: 48em) { .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__label, .slds-form-element--horizontal.slds-form-element--1-col .slds-form-element__label, .slds-form_horizontal .slds-form-element.slds-form-element_1-col .slds-form-element__label, .slds-form--horizontal .slds-form-element.slds-form-element--1-col .slds-form-element__label, .slds-form_stacked .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__label, .slds-form--stacked .slds-form-element--horizontal.slds-form-element--1-col .slds-form-element__label { max-width: calc((50% - 33.333%) - 1.25rem); } .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__control, .slds-form-element--horizontal.slds-form-element--1-col .slds-form-element__control, .slds-form_horizontal .slds-form-element.slds-form-element_1-col .slds-form-element__control, .slds-form--horizontal .slds-form-element.slds-form-element--1-col .slds-form-element__control, .slds-form_stacked .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__control, .slds-form--stacked .slds-form-element--horizontal.slds-form-element--1-col .slds-form-element__control { padding-inline-start: calc((50% - 33.333%) - (0.25rem * 2)); } } @media (min-width: 48em) { .slds-form-element_horizontal .slds-form-element__label, .slds-form-element--horizontal .slds-form-element__label, .slds-form_horizontal .slds-form-element .slds-form-element__label, .slds-form--horizontal .slds-form-element .slds-form-element__label, .slds-form_stacked .slds-form-element_horizontal .slds-form-element__label, .slds-form--stacked .slds-form-element--horizontal .slds-form-element__label { float: inline-start; max-width: calc(33% - 1.25rem); flex-basis: calc(33% - 1.25rem); margin-block-end: 0; position: relative; z-index: 1; } .slds-form-element_horizontal .slds-form-element__control, .slds-form-element--horizontal .slds-form-element__control, .slds-form_horizontal .slds-form-element .slds-form-element__control, .slds-form--horizontal .slds-form-element .slds-form-element__control, .slds-form_stacked .slds-form-element_horizontal .slds-form-element__control, .slds-form--stacked .slds-form-element--horizontal .slds-form-element__control { padding-inline-start: 33%; clear: none; } .slds-form-element_horizontal .slds-form-element__control .slds-form-element__control, .slds-form-element--horizontal .slds-form-element__control .slds-form-element__control, .slds-form_horizontal .slds-form-element .slds-form-element__control .slds-form-element__control, .slds-form--horizontal .slds-form-element .slds-form-element__control .slds-form-element__control, .slds-form_stacked .slds-form-element_horizontal .slds-form-element__control .slds-form-element__control, .slds-form--stacked .slds-form-element--horizontal .slds-form-element__control .slds-form-element__control { padding-inline-start: 0; } .slds-form-element_horizontal .slds-form-element__icon, .slds-form-element--horizontal .slds-form-element__icon, .slds-form_horizontal .slds-form-element .slds-form-element__icon, .slds-form--horizontal .slds-form-element .slds-form-element__icon, .slds-form_stacked .slds-form-element_horizontal .slds-form-element__icon, .slds-form--stacked .slds-form-element--horizontal .slds-form-element__icon { float: inline-start; padding-block-start: var(--slds-g-spacing-1); } .slds-form-element_horizontal .slds-checkbox_standalone, .slds-form-element--horizontal .slds-checkbox--standalone, .slds-form_horizontal .slds-form-element .slds-checkbox_standalone, .slds-form--horizontal .slds-form-element .slds-checkbox--standalone, .slds-form_stacked .slds-form-element_horizontal .slds-checkbox_standalone, .slds-form--stacked .slds-form-element--horizontal .slds-checkbox--standalone { padding-block: var(--slds-g-spacing-1); padding-inline: 0; } .slds-form-element_horizontal .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label, .slds-form-element--horizontal .slds-checkbox:not(.slds-checkbox--stacked) .slds-form-element__label, .slds-form-element_horizontal .slds-radio .slds-form-element__label, .slds-form-element--horizontal .slds-radio .slds-form-element__label, .slds-form_horizontal .slds-form-element .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label, .slds-form--horizontal .slds-form-element .slds-checkbox:not(.slds-checkbox--stacked) .slds-form-element__label, .slds-form_horizontal .slds-form-element .slds-radio .slds-form-element__label, .slds-form--horizontal .slds-form-element .slds-radio .slds-form-element__label, .slds-form_stacked .slds-form-element_horizontal .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label, .slds-form--stacked .slds-form-element--horizontal .slds-checkbox:not(.slds-checkbox--stacked) .slds-form-element__label, .slds-form_stacked .slds-form-element_horizontal .slds-radio .slds-form-element__label, .slds-form--stacked .slds-form-element--horizontal .slds-radio .slds-form-element__label { position: relative; float: none; max-width: 100%; width: auto; } .slds-form-element_horizontal .slds-form-element__row .slds-form-element__label, .slds-form-element--horizontal .slds-form-element__row .slds-form-element__label, .slds-form-element_horizontal .slds-form-element__row .slds-form-element__control, .slds-form-element--horizontal .slds-form-element__row .slds-form-element__control, .slds-form-element_horizontal .slds-dueling-list__column .slds-form-element__label, .slds-form-element--horizontal .slds-dueling-list__column .slds-form-element__label, .slds-form_horizontal .slds-form-element .slds-form-element__row .slds-form-element__label, .slds-form--horizontal .slds-form-element .slds-form-element__row .slds-form-element__label, .slds-form_horizontal .slds-form-element .slds-form-element__row .slds-form-element__control, .slds-form--horizontal .slds-form-element .slds-form-element__row .slds-form-element__control, .slds-form_horizontal .slds-form-element .slds-dueling-list__column .slds-form-element__label, .slds-form--horizontal .slds-form-element .slds-dueling-list__column .slds-form-element__label, .slds-form_stacked .slds-form-element_horizontal .slds-form-element__row .slds-form-element__label, .slds-form--stacked .slds-form-element--horizontal .slds-form-element__row .slds-form-element__label, .slds-form_stacked .slds-form-element_horizontal .slds-form-element__row .slds-form-element__control, .slds-form--stacked .slds-form-element--horizontal .slds-form-element__row .slds-form-element__control, .slds-form_stacked .slds-form-element_horizontal .slds-dueling-list__column .slds-form-element__label, .slds-form--stacked .slds-form-element--horizontal .slds-dueling-list__column .slds-form-element__label { width: auto; max-width: 100%; flex-basis: auto; float: none; position: relative; padding-inline-start: 0; margin-block-end: 0; } .slds-form-element_horizontal .slds-dueling-list, .slds-form-element--horizontal .slds-dueling-list, .slds-form_horizontal .slds-form-element .slds-dueling-list, .slds-form--horizontal .slds-form-element .slds-dueling-list, .slds-form_stacked .slds-form-element_horizontal .slds-dueling-list, .slds-form--stacked .slds-form-element--horizontal .slds-dueling-list { clear: none; } .slds-form-element_horizontal .slds-input-has-icon_left .slds-input__icon, .slds-form-element--horizontal .slds-input-has-icon--left .slds-input__icon, .slds-form_horizontal .slds-form-element .slds-input-has-icon_left .slds-input__icon, .slds-form--horizontal .slds-form-element .slds-input-has-icon--left .slds-input__icon, .slds-form_stacked .slds-form-element_horizontal .slds-input-has-icon_left .slds-input__icon, .slds-form--stacked .slds-form-element--horizontal .slds-input-has-icon--left .slds-input__icon { inset-inline-start: calc(33% + 0.75rem); } .slds-form-element_horizontal .slds-input-has-icon_left-right .slds-input__icon_left, .slds-form-element--horizontal .slds-input-has-icon--left-right .slds-input__icon--left, .slds-form_horizontal .slds-form-element .slds-input-has-icon_left-right .slds-input__icon_left, .slds-form--horizontal .slds-form-element .slds-input-has-icon--left-right .slds-input__icon--left, .slds-form_stacked .slds-form-element_horizontal .slds-input-has-icon_left-right .slds-input__icon_left, .slds-form--stacked .slds-form-element--horizontal .slds-input-has-icon--left-right .slds-input__icon--left { inset-inline-start: calc(33% + 0.75rem); } } .slds-form-element_horizontal .slds-form-element__help, .slds-form-element--horizontal .slds-form-element__help, .slds-form_horizontal .slds-form-element .slds-form-element__help, .slds-form--horizontal .slds-form-element .slds-form-element__help, .slds-form_stacked .slds-form-element_horizontal .slds-form-element__help, .slds-form--stacked .slds-form-element--horizontal .slds-form-element__help { margin-inline-start: 33%; } @media (min-width: 48em) { .slds-form-element_horizontal.slds-form-element::after, .slds-form-element--horizontal.slds-form-element::after, .slds-form_horizontal .slds-form-element::after, .slds-form--horizontal .slds-form-element::after, .slds-form_stacked .slds-form-element_horizontal.slds-form-element::after, .slds-form--stacked .slds-form-element--horizontal.slds-form-element::after { content: ''; display: table; clear: both; } } .slds-form-element_compound .slds-form-element__row, .slds-form-element--compound .slds-form-element__row { display: flex; margin-block-end: var(--slds-g-spacing-1); margin-inline-start: calc(var(--slds-g-spacing-1) * -1); margin-inline-end: calc(var(--slds-g-spacing-1) * -1); } .slds-form-element_compound .slds-form-element__row .slds-form-element__label, .slds-form-element--compound .slds-form-element__row .slds-form-element__label { padding-block-start: 0; } .slds-form-element_compound .slds-form-element, .slds-form-element--compound .slds-form-element { padding-inline-start: var(--slds-g-spacing-1); padding-inline-end: var(--slds-g-spacing-1); } .slds-form_compound, .slds-form--compound { width: 100%; } .slds-form_compound > .slds-form-element, .slds-form--compound > .slds-form-element { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .slds-form_compound .slds-form-element__row, .slds-form--compound .slds-form-element__row { display: flex; margin-block-start: 0; margin-block-end: var(--slds-g-spacing-1); margin-inline-start: 0; margin-inline-end: 0; } .slds-form_compound .slds-form-element__row + .slds-form-element__row, .slds-form--compound .slds-form-element__row + .slds-form-element__row { clear: both; } .slds-form_compound .slds-form-element__row .slds-form-element, .slds-form--compound .slds-form-element__row .slds-form-element { margin-block-end: 0; } .slds-form_compound .slds-form-element__row .slds-form-element + .slds-form-element, .slds-form--compound .slds-form-element__row .slds-form-element + .slds-form-element { padding-inline-start: var(--slds-g-spacing-2); margin-block-start: 0; } .slds-form_compound .slds-form-element__row .slds-form-element__label, .slds-form--compound .slds-form-element__row .slds-form-element__label { padding-block-start: 0; } .slds-form__row { display: flex; flex-wrap: wrap; margin-inline-start: calc(var(--slds-g-spacing-3) * -1); margin-inline-end: calc(var(--slds-g-spacing-3) * -1); } .slds-form__item { display: flex; flex: 1 1 0%; min-width: 280px; padding-inline-start: var(--slds-g-spacing-3); padding-inline-end: var(--slds-g-spacing-3); } .slds-is-edited { background: var(--slds-g-color-palette-yellow-90); } .slds-is-edited .slds-form-element__undo { inset-block-start: -1.25rem; inset-inline-end: var(--slds-g-spacing-1); } .slds-form-element__undo { position: absolute; inset-block-start: 0; inset-inline-end: 0; } .slds-input { display: inline-block; padding-block-start: 0; padding-inline-end: var(--slds-c-input-spacing-inlineend, var(--slds-s-input-spacing)); padding-block-end: 0; padding-inline-start: var(--slds-c-input-spacing-inlinestart, var(--slds-s-input-spacing)); width: 100%; line-height: 1.875rem; border: 1px solid var(--slds-c-input-color-border, var(--slds-s-input-color-border)); border-radius: var(--slds-c-input-radius-border, var(--slds-s-input-radius-border)); background-color: var(--slds-c-input-color-background, var(--slds-g-color-surface-container-1)); color: var(--slds-c-input-text-color, var(--slds-s-input-color, var(--slds-g-color-on-surface-3))); box-shadow: var(--slds-c-input-shadow); } .slds-input:focus { --slds-c-input-color-border: var(--slds-c-input-color-border-focus, var(--slds-s-input-color-border-focus)); --slds-c-input-background-color: var(--slds-c-input-color-background-focus, revert); --slds-c-input-text-color: var(--slds-c-input-text-color-focus, revert); outline: 0; } .slds-input:focus-visible { --slds-c-input-shadow: var(--slds-c-input-shadow-focus, var(--slds-g-shadow-outline-focus-1)); border-color: transparent; outline: 0; } .slds-input:focus:valid { background-color: revert; color: revert; } .slds-input[disabled], .slds-input.slds-is-disabled { background-color: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1)); border-color: var(--slds-s-input-color-border-disabled, var(--slds-g-color-border-disabled-1)); color: var(--slds-s-input-color-disabled, var(--slds-g-color-on-disabled-2)); cursor: not-allowed; user-select: none; } .slds-input[disabled]:focus, .slds-input[disabled]:active, .slds-input.slds-is-disabled:focus, .slds-input.slds-is-disabled:active { box-shadow: none; } .slds-input[disabled]::placeholder, .slds-input.slds-is-disabled::placeholder { color: var(--slds-s-input-color-disabled, var(--slds-g-color-on-surface-1)); } .slds-input[readonly] { --slds-c-input-spacing-inlinestart: 0; --slds-c-input-color-border: transparent; --slds-c-input-color-background: transparent; outline: 0; } .slds-input[type='search']::-ms-clear { display: none; width: 0; height: 0; } .slds-input[type='search']::-webkit-search-decoration, .slds-input[type='search']::-webkit-search-cancel-button, .slds-input[type='search']::-webkit-search-results-button, .slds-input[type='search']::-webkit-search-results-decoration { display: none; } .slds-input[type='url'], .slds-input[type='tel'], .slds-input[type='email'] { direction: ltr; text-align: left; } .slds-input_bare, .slds-input--bare { --slds-c-input-color-background: transparent; --slds-c-input-spacing-inlineend: 0; --slds-c-input-spacing-inlinestart: var(--slds-s-input-spacing); border: 0; } .slds-input_bare:focus, .slds-input--bare:focus, .slds-input_bare:active, .slds-input--bare:active { --slds-c-input-shadow-focus: none; } .slds-input_bare:focus-visible, .slds-input--bare:focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); outline: 0; } .slds-input_height, .slds-input--height { min-height: calc(1.875rem + 2px); } .slds-input_faux, .slds-input--faux { padding-block-start: 0; padding-inline-end: var(--slds-c-input-spacing-inlineend, var(--slds-s-input-spacing)); padding-block-end: 0; padding-inline-start: var(--slds-c-input-spacing-inlinestart, var(--slds-s-input-spacing)); width: 100%; line-height: 1.875rem; border: 1px solid var(--slds-c-input-color-border, var(--slds-s-input-color-border)); border-radius: var(--slds-c-input-radius-border, var(--slds-s-input-radius-border)); background-color: var(--slds-c-input-color-background, var(--slds-g-color-surface-container-1)); color: var(--slds-c-input-text-color, var(--slds-s-input-color, var(--slds-g-color-on-surface-3))); box-shadow: var(--slds-c-input-shadow); display: inline-flex; flex: 1 1 auto; text-align: left; } .slds-input_faux.slds-is-disabled, .slds-input--faux.slds-is-disabled { background-color: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1)); border-color: var(--slds-s-input-color-border-disabled, var(--slds-g-color-border-disabled-1)); color: var(--slds-s-input-color-disabled, var(--slds-g-color-on-disabled-2)); cursor: not-allowed; user-select: none; } .slds-input_faux.slds-is-disabled:focus, .slds-input--faux.slds-is-disabled:focus, .slds-input_faux.slds-is-disabled:active, .slds-input--faux.slds-is-disabled:active { box-shadow: none; } .slds-input_faux > span::before, .slds-input--faux > span::before { content: ''; display: inline-block; } .slds-input_borders[readonly], .slds-input--borders[readonly] { --slds-c-input-spacing-inlinestart: var(--slds-s-input-spacing); --slds-c-input-color-border: var(--slds-s-input-color-border); } .slds-input-has-icon { position: relative; } .slds-input-has-icon .slds-input__icon { width: 0.875rem; height: 0.875rem; position: absolute; top: 50%; margin-top: calc((0.875rem * 0.5) * -1); line-height: 1; border: 0; z-index: 2; } .slds-input-has-icon_left .slds-input__icon, .slds-input-has-icon--left .slds-input__icon { left: var(--slds-g-spacing-2); } .slds-input-has-icon_left .slds-input, .slds-input-has-icon--left .slds-input, .slds-input-has-icon_left .slds-input_faux, .slds-input-has-icon--left .slds-input--faux, .slds-input-has-icon_left .slds-input_bare, .slds-input-has-icon--left .slds-input--bare { --slds-c-input-spacing-inlinestart: var(--slds-g-spacing-6); } .slds-input-has-icon_right .slds-input__icon, .slds-input-has-icon--right .slds-input__icon { inset-inline-end: var(--slds-g-spacing-2); } .slds-input-has-icon_right .slds-input, .slds-input-has-icon--right .slds-input, .slds-input-has-icon_right .slds-input_faux, .slds-input-has-icon--right .slds-input--faux, .slds-input-has-icon_right .slds-input_bare, .slds-input-has-icon--right .slds-input--bare { --slds-c-input-spacing-inlineend: var(--slds-g-spacing-6); } .slds-input-has-icon_left-right .slds-input__icon_left, .slds-input-has-icon--left-right .slds-input__icon--left { left: var(--slds-g-spacing-2); } .slds-input-has-icon_left-right .slds-input__icon_right, .slds-input-has-icon--left-right .slds-input__icon--right { inset-inline-end: var(--slds-g-spacing-2); } .slds-input-has-icon_left-right .slds-input, .slds-input-has-icon--left-right .slds-input, .slds-input-has-icon_left-right .slds-input_faux, .slds-input-has-icon--left-right .slds-input--faux, .slds-input-has-icon_left-right .slds-input_bare, .slds-input-has-icon--left-right .slds-input--bare { --slds-c-input-spacing-inlinestart: var(--slds-g-spacing-6); --slds-c-input-spacing-inlineend: var(--slds-g-spacing-6); } .slds-input-has-icon_group-right .slds-input, .slds-input-has-icon--group-right .slds-input, .slds-input-has-icon_group-right .slds-input_faux, .slds-input-has-icon--group-right .slds-input--faux, .slds-input-has-icon_group-right .slds-input_bare, .slds-input-has-icon--group-right .slds-input--bare { --slds-c-input-spacing-inlineend: calc(var(--slds-g-spacing-6) + var(--slds-g-spacing-2)); } .slds-input__icon-group { position: absolute; height: var(--slds-g-sizing-5); margin-top: calc(var(--slds-g-spacing-2) * -1); } .slds-input__icon-group_right, .slds-input__icon-group--right { inset-inline-end: 0; inset-block-start: 50%; } .slds-input__icon-group_right .slds-input__icon_right, .slds-input__icon-group--right .slds-input__icon--right { inset-inline-end: var(--slds-g-spacing-2); } .slds-input__icon-group_right .slds-input__spinner, .slds-input__icon-group--right .slds-input__spinner { inset-inline-end: var(--slds-g-spacing-5); inset-inline-start: auto; } .slds-input-has-fixed-addon { display: flex; } .slds-has-error .slds-input { --slds-c-input-color-background: var(--slds-s-input-color-background-invalid); --slds-c-input-color-border: var(--slds-g-color-border-error-1); --slds-c-input-text-color: var(--slds-s-input-color-invalid); background-clip: padding-box; } .slds-has-error .slds-input__icon { fill: var(--slds-g-color-error-1); color: var(--slds-g-color-error-1); } .slds-input_counter, .slds-input--counter { text-align: center; padding-block: 0; padding-inline: var(--slds-g-spacing-8); } .slds-input_counter[type='number'], .slds-input--counter[type='number'] { appearance: textfield; } .slds-input_counter::-webkit-inner-spin-button, .slds-input--counter::-webkit-inner-spin-button { appearance: none; margin: 0; } .slds-input__button_decrement, .slds-input__button--decrement { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 0.75rem; } .slds-input__button_increment, .slds-input__button--increment { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 0.75rem; } .slds-textarea { min-height: var(--slds-c-textarea-sizing-height-min); width: 100%; padding-block-start: var(--slds-c-textarea-spacing-blockstart, var(--slds-g-spacing-2)); padding-inline-end: var(--slds-c-textarea-spacing-inlineend, var(--slds-g-spacing-3)); padding-block-end: var(--slds-c-textarea-spacing-blockend, var(--slds-g-spacing-2)); padding-inline-start: var(--slds-c-textarea-spacing-inlinestart, var(--slds-g-spacing-3)); background-color: var(--slds-c-textarea-color-background, var(--slds-g-color-surface-container-1)); color: var(--slds-c-textarea-text-color, var(--slds-s-input-color, var(--slds-g-color-on-surface-3))); border: 1px solid var(--slds-c-textarea-color-border, var(--slds-s-input-color-border)); border-radius: var(--slds-c-textarea-radius-border, var(--slds-s-input-radius-border)); box-shadow: var(--slds-c-textarea-shadow, var(--slds-s-input-shadow)); font: inherit; resize: vertical; transition: background-color 0.1s linear; } .slds-textarea:required { --slds-c-textarea-shadow: none; } .slds-textarea:focus, .slds-textarea:active { outline: 0; --slds-c-textarea-color-border: var(--slds-s-input-color-border-focus); --slds-c-textarea-text-color: var(--slds-c-textarea-text-color-focus, revert); background-color: var(--slds-c-textarea-color-background-focus, var(--slds-g-color-surface-container-1)); } .slds-textarea:focus-visible { --slds-c-textarea-shadow: var(--slds-c-textarea-shadow-focus, var(--slds-g-shadow-inset-focus-1)); border-color: transparent; background-clip: padding-box; outline: 0; } .slds-textarea:focus:invalid { background-color: var(--slds-s-input-color-background-invalid); color: var(--slds-s-input-color-invalid); } .slds-textarea:focus:valid { background-color: revert; color: revert; } .slds-textarea[disabled], .slds-textarea.slds-is-disabled { background-color: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1)); border-color: var(--slds-s-input-color-border-disabled, var(--slds-g-color-border-disabled-1)); color: var(--slds-s-input-color-disabled, var(--slds-g-color-on-disabled-2)); cursor: not-allowed; user-select: none; } .slds-textarea[disabled]:focus, .slds-textarea[disabled]:active, .slds-textarea.slds-is-disabled:focus, .slds-textarea.slds-is-disabled:active { box-shadow: none; } .slds-has-error .slds-textarea { --slds-c-textarea-color-border: var(--slds-g-color-border-error-1); --slds-c-textarea-color-background: var(--slds-s-input-color-background-invalid); background-clip: padding-box; } .slds-has-error .slds-textarea:focus, .slds-has-error .slds-textarea:active { --slds-c-textarea-text-color-focus: var(--slds-c-textarea-text-color-error-focus); --slds-c-textarea-color-background-focus: var(--slds-c-textarea-color-background-error-focus, var(--slds-g-color-surface-container-1)); } .slds-radio { display: inline-block; } .slds-radio .slds-radio_faux, .slds-radio .slds-radio--faux { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); display: inline-block; position: relative; flex-shrink: 0; vertical-align: middle; border-radius: var(--slds-g-radius-border-circle); border-width: var(--slds-s-input-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-radio-color-border, var(--slds-s-input-color-border, var(--slds-g-color-border-2))); background: none; background-color: var(--slds-c-radio-color-background, var(--slds-g-color-surface-container-1)); box-shadow: var(--slds-c-radio-shadow, var(--slds-s-input-shadow)); transition: border 0.1s linear, background-color 0.1s linear; } .slds-radio .slds-form-element__label { display: inline; vertical-align: middle; font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2)); } .slds-radio [type='radio'] { width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; pointer-events: auto; } .slds-radio [type='radio']:checked + .slds-radio_faux, .slds-radio [type='radio']:checked + .slds-radio--faux, .slds-radio [type='radio']:checked ~ .slds-radio_faux, .slds-radio [type='radio']:checked ~ .slds-radio--faux, .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux, .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio--faux { --slds-c-radio-color-background: var( --slds-c-radio-color-background-checked, var(--slds-s-mark-color-background-checked, var(--slds-g-color-surface-container-1)) ); --slds-c-radio-shadow: var(--slds-s-mark-shadow-checked); } .slds-radio [type='radio']:checked + .slds-radio_faux::after, .slds-radio [type='radio']:checked + .slds-radio--faux::after, .slds-radio [type='radio']:checked ~ .slds-radio_faux::after, .slds-radio [type='radio']:checked ~ .slds-radio--faux::after, .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux::after, .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio--faux::after { width: var(--slds-g-sizing-3); height: var(--slds-g-sizing-3); content: ''; position: absolute; top: 50%; /*! @noflip */ left: 50%; transform: translate3d(-50%, -50%, 0); border-radius: var(--slds-g-radius-border-circle); background: none; background-color: var(--slds-c-radio-color-background-checked, var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-2))); } .slds-radio [type='radio']:focus-visible + .slds-radio_faux, .slds-radio [type='radio']:focus-visible + .slds-radio--faux, .slds-radio [type='radio']:focus-visible ~ .slds-radio_faux, .slds-radio [type='radio']:focus-visible ~ .slds-radio--faux, .slds-radio [type='radio']:focus-visible + .slds-radio__label .slds-radio_faux, .slds-radio [type='radio']:focus-visible + .slds-radio__label .slds-radio--faux { border-color: var(--slds-c-radio-color-border-focus, var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1))); --slds-c-radio-shadow: var(--slds-c-radio-shadow-focus, var(--slds-g-shadow-outset-focus-1, 0 0 3px var(--slds-g-color-accent-2))); } .slds-radio [type='radio'][disabled] { cursor: not-allowed; user-select: none; } .slds-radio [type='radio'][disabled] ~ .slds-radio_faux, .slds-radio [type='radio'][disabled] ~ .slds-radio--faux, .slds-radio [type='radio'][disabled] + .slds-radio__label .slds-radio_faux, .slds-radio [type='radio'][disabled] + .slds-radio__label .slds-radio--faux { border-color: var(--slds-g-color-border-disabled-1); background-color: var(--slds-g-color-disabled-container-2); } .slds-radio [type='radio'][disabled] ~ .slds-radio_faux::after, .slds-radio [type='radio'][disabled] ~ .slds-radio--faux::after, .slds-radio [type='radio'][disabled] + .slds-radio__label .slds-radio_faux::after, .slds-radio [type='radio'][disabled] + .slds-radio__label .slds-radio--faux::after { background-color: var(--slds-g-color-on-disabled-2); } .slds-radio [type='radio'][disabled]:checked + .slds-radio_faux, .slds-radio [type='radio'][disabled]:checked + .slds-radio--faux, .slds-radio [type='radio'][disabled]:checked ~ .slds-radio_faux, .slds-radio [type='radio'][disabled]:checked ~ .slds-radio--faux, .slds-radio [type='radio'][disabled]:checked + .slds-radio__label .slds-radio_faux, .slds-radio [type='radio'][disabled]:checked + .slds-radio__label .slds-radio--faux { border-color: var(--slds-g-color-border-disabled-1); background-color: var(--slds-g-color-disabled-container-2); } .slds-has-error .slds-radio [type='radio'] + .slds-radio_faux, .slds-has-error .slds-radio [type='radio'] + .slds-radio--faux, .slds-has-error .slds-radio [type='radio'] ~ .slds-radio_faux, .slds-has-error .slds-radio [type='radio'] ~ .slds-radio--faux, .slds-has-error .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux, .slds-has-error .slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux { border-color: var(--slds-s-input-color-border-invalid, var(--slds-g-color-border-error-1)); border-width: var(--slds-g-sizing-border-2); } .slds-has-error .slds-radio [type='radio']:checked + .slds-radio_faux, .slds-has-error .slds-radio [type='radio']:checked + .slds-radio--faux, .slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio_faux, .slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio--faux, .slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux, .slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio--faux { border-color: var(--slds-s-input-color-border-invalid, var(--slds-g-color-border-error-1)); background-color: var(--slds-s-mark-color-background-invalid); --slds-c-radio-shadow: var(--slds-s-mark-shadow-checked); } .slds-has-error .slds-radio [type='radio']:focus-visible:checked + .slds-radio_faux, .slds-has-error .slds-radio [type='radio']:focus-visible:checked + .slds-radio--faux, .slds-has-error .slds-radio [type='radio']:focus-visible:checked ~ .slds-radio_faux, .slds-has-error .slds-radio [type='radio']:focus-visible:checked ~ .slds-radio--faux, .slds-has-error .slds-radio [type='radio']:focus-visible:checked + .slds-radio__label .slds-radio_faux, .slds-has-error .slds-radio [type='radio']:focus-visible:checked + .slds-radio__label .slds-radio--faux { --slds-c-radio-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-has-error .slds-radio [type='radio']:checked + .slds-radio_faux::after, .slds-has-error .slds-radio [type='radio']:checked + .slds-radio--faux::after, .slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio_faux::after, .slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio--faux::after, .slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux::after, .slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio--faux::after { background-color: var(--slds-s-mark-color-foreground-invalid, var(--slds-g-color-error-1)); } .slds-form-element .slds-radio [type='radio'] + .slds-radio_faux, .slds-form-element .slds-radio [type='radio'] + .slds-radio--faux, .slds-form-element .slds-radio [type='radio'] ~ .slds-radio_faux, .slds-form-element .slds-radio [type='radio'] ~ .slds-radio--faux, .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux, .slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux { margin-inline-end: var(--slds-g-spacing-2); } [dir='rtl'] .slds-form-element .slds-radio [type='radio'] + .slds-radio_faux, [dir='rtl'] .slds-form-element .slds-radio [type='radio'] + .slds-radio--faux, [dir='rtl'] .slds-form-element .slds-radio [type='radio'] ~ .slds-radio_faux, [dir='rtl'] .slds-form-element .slds-radio [type='radio'] ~ .slds-radio--faux, [dir='rtl'] .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux, [dir='rtl'] .slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux { /*! @noflip */ margin-right: 0; margin-left: var(--slds-g-spacing-2); } .slds-radio_button-group, .slds-radio--button-group { display: inline-flex; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); } .slds-radio_button, .slds-radio--button { display: flex; border: 0; border-radius: 0; background-clip: padding-box; line-height: 1.875rem; --slds-c-button-spacing-inline: 0; } .slds-radio_button .slds-radio_faux, .slds-radio--button .slds-radio--faux { padding-inline-start: var(--slds-g-spacing-4); padding-inline-end: var(--slds-g-spacing-4); text-align: center; vertical-align: middle; } .slds-radio_button + .slds-radio_button, .slds-radio--button + .slds-radio--button { border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); margin: 0; } .slds-radio_button:first-child:hover, .slds-radio--button:first-child:hover, .slds-radio_button:first-child:focus, .slds-radio--button:first-child:focus { border-start-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); } .slds-radio_button:last-child:hover, .slds-radio--button:last-child:hover, .slds-radio_button:last-child:focus, .slds-radio--button:last-child:focus { border-start-start-radius: 0; border-start-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-end-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-end-start-radius: 0; } .slds-radio_button:first-child > .slds-radio_faux, .slds-radio--button:first-child > .slds-radio--faux, .slds-radio_button:first-child > .slds-radio_button__label, .slds-radio--button:first-child > .slds-radio--button__label { border-start-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); } .slds-radio_button:last-child > .slds-radio_faux, .slds-radio--button:last-child > .slds-radio--faux, .slds-radio_button .slds-button_last > .slds-radio_faux, .slds-radio--button .slds-button--last > .slds-radio--faux, .slds-radio_button:last-child > .slds-radio_button__label, .slds-radio--button:last-child > .slds-radio--button__label { border-start-start-radius: 0; border-start-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-end-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-end-start-radius: 0; } .slds-radio_button [type='radio'], .slds-radio--button [type='radio'] { width: var(--slds-g-sizing-border-1); height: var(--slds-g-sizing-border-1); border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; } .slds-radio_button [type='radio']:checked + .slds-radio_faux, .slds-radio--button [type='radio']:checked + .slds-radio--faux, .slds-radio_button [type='radio']:checked ~ .slds-radio_faux, .slds-radio--button [type='radio']:checked ~ .slds-radio--faux, .slds-radio_button [type='radio']:checked + .slds-radio_button__label, .slds-radio--button [type='radio']:checked + .slds-radio--button__label { background-color: var(--slds-g-color-accent-container-1); color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-s-button-shadow-active); } .slds-radio_button [type='radio']:checked + .slds-radio_faux:hover, .slds-radio--button [type='radio']:checked + .slds-radio--faux:hover, .slds-radio_button [type='radio']:checked ~ .slds-radio_faux:hover, .slds-radio--button [type='radio']:checked ~ .slds-radio--faux:hover, .slds-radio_button [type='radio']:checked + .slds-radio_button__label:hover, .slds-radio--button [type='radio']:checked + .slds-radio--button__label:hover, .slds-radio_button [type='radio']:checked + .slds-radio_faux:focus, .slds-radio--button [type='radio']:checked + .slds-radio--faux:focus, .slds-radio_button [type='radio']:checked ~ .slds-radio_faux:focus, .slds-radio--button [type='radio']:checked ~ .slds-radio--faux:focus, .slds-radio_button [type='radio']:checked + .slds-radio_button__label:focus, .slds-radio--button [type='radio']:checked + .slds-radio--button__label:focus { background-color: var(--slds-g-color-accent-container-2); } .slds-radio_button [type='radio']:focus-visible + .slds-radio_faux, .slds-radio--button [type='radio']:focus-visible + .slds-radio--faux, .slds-radio_button [type='radio']:focus-visible ~ .slds-radio_faux, .slds-radio--button [type='radio']:focus-visible ~ .slds-radio--faux, .slds-radio_button [type='radio']:focus-visible + .slds-radio_button__label, .slds-radio--button [type='radio']:focus-visible + .slds-radio--button__label { background-color: var(--slds-g-color-surface-container-2); z-index: 1; box-shadow: none; outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -1px; } .slds-radio_button [type='radio']:checked:focus-visible + .slds-radio_faux, .slds-radio--button [type='radio']:checked:focus-visible + .slds-radio--faux, .slds-radio_button [type='radio']:checked:focus-visible ~ .slds-radio_faux, .slds-radio--button [type='radio']:checked:focus-visible ~ .slds-radio--faux, .slds-radio_button [type='radio']:checked:focus-visible + .slds-radio_button__label, .slds-radio--button [type='radio']:checked:focus-visible + .slds-radio--button__label { background-color: var(--slds-g-color-accent-container-2); box-shadow: inset 0 0 0 3px var(--slds-g-color-neutral-base-100); } .slds-radio_button [type='radio'][disabled] + .slds-radio_faux, .slds-radio--button [type='radio'][disabled] + .slds-radio--faux, .slds-radio_button [type='radio'][disabled] ~ .slds-radio_faux, .slds-radio--button [type='radio'][disabled] ~ .slds-radio--faux, .slds-radio_button [type='radio'][disabled] + .slds-radio_button__label, .slds-radio--button [type='radio'][disabled] + .slds-radio--button__label { background-color: var(--slds-g-color-disabled-container-1); color: var(--slds-g-color-on-disabled-2); box-shadow: none; } .slds-radio_button [type='radio'][disabled]:checked + .slds-radio_faux, .slds-radio--button [type='radio'][disabled]:checked + .slds-radio--faux, .slds-radio_button [type='radio'][disabled]:checked ~ .slds-radio_faux, .slds-radio--button [type='radio'][disabled]:checked ~ .slds-radio--faux, .slds-radio_button [type='radio'][disabled]:checked + .slds-radio_button__label, .slds-radio--button [type='radio'][disabled]:checked + .slds-radio--button__label { background-color: var(--slds-g-color-disabled-container-2); color: var(--slds-g-color-on-disabled-2); } .slds-radio_button [type='radio'][disabled] + .slds-radio_button__label:hover, .slds-radio--button [type='radio'][disabled] + .slds-radio--button__label:hover, .slds-radio_button [type='radio'][disabled] + .slds-radio_button__label:focus, .slds-radio--button [type='radio'][disabled] + .slds-radio--button__label:focus { cursor: default; } .slds-radio_button__label, .slds-radio--button__label { background-color: var(--slds-g-color-surface-container-1); } .slds-radio_button__label:hover, .slds-radio--button__label:hover, .slds-radio_button__label:focus, .slds-radio--button__label:focus { cursor: pointer; background-color: var(--slds-g-color-surface-container-2); } .slds-checkbox { display: inline-block; position: relative; } .slds-checkbox .slds-checkbox_faux, .slds-checkbox .slds-checkbox--faux { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); display: inline-block; position: relative; flex-shrink: 0; vertical-align: middle; border-radius: var(--slds-c-checkbox-radius-border, var(--slds-g-radius-border-1)); border-width: var(--slds-s-mark-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-checkbox-color-border, var(--slds-s-mark-color-border, var(--slds-g-color-border-2))); background-color: var(--slds-c-checkbox-color-background, var(--slds-s-mark-color-background, var(--slds-g-color-surface-container-1))); box-shadow: var(--slds-c-checkbox-shadow); transition: border 0.1s linear, background-color 0.1s linear; } .slds-checkbox .slds-checkbox__label .slds-form-element__label { display: inline; vertical-align: middle; font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2)); } .slds-checkbox [type='checkbox'] { width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; pointer-events: auto; } .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux, .slds-checkbox [type='checkbox']:checked + .slds-checkbox--faux, .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox--faux { --slds-c-checkbox-color-background: var( --slds-c-checkbox-color-background-checked, var(--slds-s-mark-color-background-checked, var(--slds-g-color-surface-container-1)) ); } .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux::after, .slds-checkbox [type='checkbox']:checked + .slds-checkbox--faux::after, .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux::after, .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox--faux::after, .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux::after, .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox--faux::after { display: block; content: ''; height: var(--slds-g-sizing-2); width: var(--slds-g-sizing-3); position: absolute; inset-block-start: 50%; /*! @noflip */ left: 50%; transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-block-end: var(--slds-g-sizing-border-2) solid var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-2)); /*! @noflip */ border-left: var(--slds-g-sizing-border-2) solid var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-2)); } .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox_faux, .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox--faux, .slds-checkbox [type='checkbox']:focus-visible ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox']:focus-visible ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox__label .slds-checkbox--faux { --slds-c-checkbox-color-border: var( --slds-c-checkbox-color-border-focus, var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1)) ); --slds-c-checkbox-shadow: var(--slds-c-checkbox-shadow-focus, var(--slds-g-shadow-outset-focus-1, 0 0 3px var(--slds-g-color-accent-2))); } .slds-checkbox [type='checkbox']:checked > .slds-checkbox_faux, .slds-checkbox [type='checkbox']:checked > .slds-checkbox--faux, .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox--faux { --slds-c-checkbox-shadow: var(--slds-s-mark-shadow-checked); } .slds-checkbox [type='checkbox']:focus-visible:checked > .slds-checkbox_faux, .slds-checkbox [type='checkbox']:focus-visible:checked > .slds-checkbox--faux, .slds-checkbox [type='checkbox']:focus-visible:checked ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox']:focus-visible:checked ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox']:focus-visible:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox']:focus-visible:checked + .slds-checkbox__label .slds-checkbox--faux { --slds-c-checkbox-color-border: var( --slds-c-checkbox-color-border-focus, var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1)) ); --slds-c-checkbox-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox_faux, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox--faux, .slds-checkbox [type='checkbox']:indeterminate ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox']:indeterminate ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox--faux { --slds-c-checkbox-color-border: var(--slds-c-checkbox-color-border-checked, var(--slds-s-input-color-border-checked)); --slds-c-checkbox-color-background: var(--slds-c-checkbox-color-background-checked, var(--slds-s-mark-color-background-checked)); } .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox_faux::after, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox--faux::after, .slds-checkbox [type='checkbox']:indeterminate ~ .slds-checkbox_faux::after, .slds-checkbox [type='checkbox']:indeterminate ~ .slds-checkbox--faux::after, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox--faux::after { content: ''; display: block; position: absolute; inset-block-start: 50%; /*! @noflip */ left: 50%; width: var(--slds-g-sizing-3); height: 2px; border: 0; transform: translate3d(-50%, -50%, 0); background-color: var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-accent-container-1)); } .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox--faux { border-color: var(--slds-g-color-border-disabled-1); background-color: var(--slds-g-color-disabled-container-2); } .slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled]:checked ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox__label .slds-checkbox--faux { border-color: var(--slds-g-color-border-disabled-1); background-color: var(--slds-g-color-disabled-container-2); } .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox_faux::after, .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox--faux::after, .slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox_faux::after, .slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox--faux::after, .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux::after, .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox--faux::after { border-color: var(--slds-g-color-on-disabled-2); } .slds-has-error .slds-checkbox [type='checkbox'] + .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox'] + .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox'] ~ .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox'] ~ .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox--faux { border-color: var(--slds-g-color-border-error-1); border-width: var(--slds-g-sizing-border-2); } .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox--faux { border-color: var(--slds-g-color-border-error-1); background-color: var(--slds-s-mark-color-background-invalid); --slds-c-checkbox-shadow: var(--slds-s-mark-shadow-checked); } .slds-has-error .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible ~ .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible ~ .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox__label .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible + .slds-checkbox__label .slds-checkbox--faux { border-color: var(--slds-g-color-border-error-1); border-width: var(--slds-g-sizing-border-2); --slds-c-checkbox-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-has-error .slds-checkbox [type='checkbox']:focus-visible:checked + .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible:checked + .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible:checked ~ .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible:checked ~ .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:focus-visible:checked + .slds-checkbox__label .slds-checkbox--faux { border-color: var(--slds-g-color-border-error-1); border-width: var(--slds-g-sizing-border-2); --slds-c-checkbox-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux::after, .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox--faux::after, .slds-has-error .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux::after, .slds-has-error .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox--faux::after, .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux::after, .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox--faux::after { border-color: var(--slds-s-mark-color-foreground-invalid, var(--slds-g-color-border-error-1)); } .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox_faux, .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox--faux, .slds-form-element .slds-checkbox [type='checkbox'] ~ .slds-checkbox_faux, .slds-form-element .slds-checkbox [type='checkbox'] ~ .slds-checkbox--faux, .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox_faux, .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox--faux { margin-inline-end: var(--slds-g-sizing-3); } [dir='rtl'] .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox_faux, [dir='rtl'] .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox--faux, [dir='rtl'] [dir='rtl'] .slds-form-element .slds-checkbox [type='checkbox'] ~ .slds-checkbox_faux, [dir='rtl'] [dir='rtl'] .slds-form-element .slds-checkbox [type='checkbox'] ~ .slds-checkbox--faux, [dir='rtl'] [dir='rtl'] .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox_faux, [dir='rtl'] [dir='rtl'] .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox--faux, [dir='rtl'] .slds-form-element .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox--faux { /*! @noflip */ margin-right: 0; /*! @noflip */ margin-left: var(--slds-g-sizing-3); } .slds-checkbox_standalone, .slds-checkbox--standalone { pointer-events: none; } .slds-checkbox_standalone [type='checkbox'], .slds-checkbox--standalone [type='checkbox'] { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); margin: 0; clip: auto; opacity: 0; } .slds-checkbox_faux, .slds-checkbox--faux { display: block; } .slds-checkbox_toggle, .slds-checkbox--toggle { width: 100%; } .slds-checkbox_toggle .slds-checkbox_faux, .slds-checkbox--toggle .slds-checkbox--faux { display: block; position: relative; width: var(--slds-g-sizing-10); height: var(--slds-g-sizing-7); border-width: var(--slds-g-sizing-border-1); border-style: solid; border-color: var(--slds-c-checkbox-toggle-color-border, var(--slds-g-color-neutral-base-60)); padding: var(--slds-g-spacing-1); background-color: var(--slds-c-checkbox-toggle-color-background, var(--slds-g-color-neutral-base-60)); border-radius: var(--slds-c-checkbox-toggle-radius-border, var(--slds-g-radius-border-pill)); box-shadow: var(--slds-c-checkbox-toggle-shadow, var(--slds-s-mark-shadow-checked)); transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1); } .slds-checkbox_toggle .slds-checkbox_faux:hover, .slds-checkbox--toggle .slds-checkbox--faux:hover, .slds-checkbox_toggle .slds-checkbox_faux:focus, .slds-checkbox--toggle .slds-checkbox--faux:focus { --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-neutral-base-50)); --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover); cursor: pointer; } .slds-checkbox_toggle .slds-checkbox_faux::after, .slds-checkbox--toggle .slds-checkbox--faux::after { content: ''; position: absolute; top: 1px; left: 1px; width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); background-color: var(--slds-c-checkbox-toggle-switch-color-background, var(--slds-g-color-on-accent-1)); border-radius: var(--slds-c-checkbox-toggle-radius-border, var(--slds-g-radius-border-pill)); } .slds-checkbox_toggle [type='checkbox'], .slds-checkbox--toggle [type='checkbox'] { width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; } .slds-checkbox_toggle [type='checkbox'] + .slds-checkbox_faux_container, .slds-checkbox--toggle [type='checkbox'] + .slds-checkbox--faux_container { font-size: var(--slds-g-font-scale-neg-2); color: var(--slds-g-color-on-surface-1); } .slds-checkbox_toggle [type='checkbox'] + .slds-checkbox_faux_container .slds-checkbox_off, .slds-checkbox--toggle [type='checkbox'] + .slds-checkbox--faux_container .slds-checkbox--off { display: block; } .slds-checkbox_toggle [type='checkbox'] + .slds-checkbox_faux_container .slds-checkbox_on, .slds-checkbox--toggle [type='checkbox'] + .slds-checkbox--faux_container .slds-checkbox--on { display: none; } .slds-checkbox_toggle [type='checkbox']:focus-visible + .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:focus-visible + .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:focus-visible ~ .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:focus-visible ~ .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:focus-visible + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:focus-visible + .slds-checkbox--faux_container .slds-checkbox--faux { --slds-c-checkbox-toggle-color-background: var(--slds-g-color-neutral-base-50); --slds-c-checkbox-toggle-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--off { display: none; } .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--on { display: block; } .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--faux { --slds-c-checkbox-toggle-color-border: var(--slds-g-color-border-accent-1); --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-1); } .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux:hover, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux:hover, .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux:hover, .slds-checkbox--toggle [type='checkbox']:checked ~ .slds-checkbox--faux:hover, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux:hover, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--faux:hover, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux:focus, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux:focus, .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux:focus, .slds-checkbox--toggle [type='checkbox']:checked ~ .slds-checkbox--faux:focus, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux:focus, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--faux:focus { --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-2); } .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux::before, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux::before, .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux::before, .slds-checkbox--toggle [type='checkbox']:checked ~ .slds-checkbox--faux::before, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux::before, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--faux::before { content: ''; position: absolute; top: 1px; right: 1px; width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); background-color: var( --slds-c-checkbox-toggle-switch-color-background-checked, var(--slds-c-checkbox-toggle-switch-color-background, var(--slds-g-color-on-accent-1)) ); border-radius: var(--slds-c-checkbox-toggle-radius-border, var(--slds-g-radius-border-pill)); transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1); } .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux::after, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux::after, .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux::after, .slds-checkbox--toggle [type='checkbox']:checked ~ .slds-checkbox--faux::after, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux::after, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--faux::after { --slds-c-checkbox-toggle-switch-color-background: transparent; --slds-c-checkbox-toggle-radius-border: 0; content: ' '; position: absolute; top: 0.25rem; left: 0.6rem; height: 0.7rem; width: 0.45rem; border-bottom-width: var(--slds-g-sizing-border-2); border-bottom-style: solid; border-bottom-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-surface-container-1)); /*! @noflip */ border-right-width: var(--slds-g-sizing-border-2); border-right-style: solid; border-right-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-surface-container-1)); transform: rotate(45deg); } .slds-checkbox_toggle [type='checkbox']:checked:focus + .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked:focus + .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:checked:focus ~ .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked:focus ~ .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:checked:focus + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked:focus + .slds-checkbox--faux_container .slds-checkbox--faux { --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-checked-focus, var(--slds-g-color-accent-container-2)); } .slds-checkbox_toggle [type='checkbox'][disabled] + .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox'][disabled] + .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox'][disabled] ~ .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox'][disabled] ~ .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox'][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox'][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux { background-color: var(--slds-g-color-disabled-container-2); border-color: var(--slds-g-color-border-disabled-1); pointer-events: none; } .slds-checkbox_toggle [type='checkbox'][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux::before, .slds-checkbox--toggle [type='checkbox'][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux::before { background-color: var(--slds-g-color-on-disabled-2); } .slds-checkbox_toggle [type='checkbox'][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux::after, .slds-checkbox--toggle [type='checkbox'][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux::after { background-color: var(--slds-g-color-on-disabled-2); } .slds-checkbox_toggle [type='checkbox']:checked[disabled] + .slds-checkbox_faux_container .slds-checkbox_faux::after, .slds-checkbox--toggle [type='checkbox']:checked[disabled] + .slds-checkbox--faux_container .slds-checkbox--faux::after { background-color: transparent; border-color: var(--slds-g-color-on-disabled-2); } .slds-checkbox_add-button .slds-checkbox_faux, .slds-checkbox--add-button .slds-checkbox--faux { width: var(--slds-g-spacing-6); height: var(--slds-g-spacing-6); position: relative; display: inline-block; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); background-color: var(--slds-g-color-surface-container-1); cursor: pointer; } .slds-checkbox_add-button .slds-checkbox_faux::before, .slds-checkbox--add-button .slds-checkbox--faux::before, .slds-checkbox_add-button .slds-checkbox_faux::after, .slds-checkbox--add-button .slds-checkbox--faux::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 14px; width: 2px; margin: auto; background-color: var(--slds-s-button-color, var(--slds-g-color-accent-3)); } .slds-checkbox_add-button .slds-checkbox_faux::after, .slds-checkbox--add-button .slds-checkbox--faux::after { width: 14px; height: 2px; } .slds-checkbox_add-button .slds-checkbox_faux:hover:not([disabled]), .slds-checkbox--add-button .slds-checkbox--faux:hover:not([disabled]), .slds-checkbox_add-button .slds-checkbox_faux:focus:not([disabled]), .slds-checkbox--add-button .slds-checkbox--faux:focus:not([disabled]), .slds-checkbox_add-button .slds-checkbox_faux:active:not([disabled]), .slds-checkbox--add-button .slds-checkbox--faux:active:not([disabled]) { background-color: var(--slds-g-color-surface-container-2); } .slds-checkbox_add-button .slds-checkbox_faux:active:not([disabled]), .slds-checkbox--add-button .slds-checkbox--faux:active:not([disabled]) { box-shadow: var(--slds-s-button-shadow-active); } .slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:checked + .slds-checkbox--faux { border-color: transparent; background-color: var(--slds-g-color-accent-container-1); box-shadow: var(--slds-s-mark-shadow-checked); } .slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux::before, .slds-checkbox--add-button [type='checkbox']:checked ~ .slds-checkbox--faux::before, .slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux::after, .slds-checkbox--add-button [type='checkbox']:checked ~ .slds-checkbox--faux::after, .slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux::before, .slds-checkbox--add-button [type='checkbox']:checked + .slds-checkbox--faux::before, .slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux::after, .slds-checkbox--add-button [type='checkbox']:checked + .slds-checkbox--faux::after { background-color: var(--slds-g-color-on-accent-1); } .slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux::before, .slds-checkbox--add-button [type='checkbox']:checked ~ .slds-checkbox--faux::before, .slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux::before, .slds-checkbox--add-button [type='checkbox']:checked + .slds-checkbox--faux::before { left: 5px; width: 2px; height: 16px; transform: rotate(40deg); } .slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux::after, .slds-checkbox--add-button [type='checkbox']:checked ~ .slds-checkbox--faux::after, .slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux::after, .slds-checkbox--add-button [type='checkbox']:checked + .slds-checkbox--faux::after { top: 5px; left: -10px; width: 9px; height: 2px; transform: rotate(40deg); } .slds-checkbox_add-button [type='checkbox']:checked:not([disabled]) ~ .slds-checkbox_faux:hover, .slds-checkbox--add-button [type='checkbox']:checked:not([disabled]) ~ .slds-checkbox--faux:hover, .slds-checkbox_add-button [type='checkbox']:checked:not([disabled]) + .slds-checkbox_faux:hover, .slds-checkbox--add-button [type='checkbox']:checked:not([disabled]) + .slds-checkbox--faux:hover, .slds-checkbox_add-button [type='checkbox']:checked:not([disabled]):focus-visible ~ .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:checked:not([disabled]):focus-visible ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox']:checked:not([disabled]):focus-visible + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:checked:not([disabled]):focus-visible + .slds-checkbox--faux { background-color: var(--slds-g-color-accent-container-2); } .slds-checkbox_add-button [type='checkbox']:focus-visible ~ .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:focus-visible ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox']:focus-visible + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:focus-visible + .slds-checkbox--faux { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); background-color: var(--slds-g-color-surface-container-2); border-width: 0; } .slds-checkbox_add-button [type='checkbox'][disabled] ~ .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox'][disabled] ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox'][disabled] + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox'][disabled] + .slds-checkbox--faux { background-color: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-1); cursor: default; } .slds-checkbox_add-button [type='checkbox'][disabled] ~ .slds-checkbox_faux::before, .slds-checkbox--add-button [type='checkbox'][disabled] ~ .slds-checkbox--faux::before, .slds-checkbox_add-button [type='checkbox'][disabled] + .slds-checkbox_faux::before, .slds-checkbox--add-button [type='checkbox'][disabled] + .slds-checkbox--faux::before, .slds-checkbox_add-button [type='checkbox'][disabled] ~ .slds-checkbox_faux::after, .slds-checkbox--add-button [type='checkbox'][disabled] ~ .slds-checkbox--faux::after, .slds-checkbox_add-button [type='checkbox'][disabled] + .slds-checkbox_faux::after, .slds-checkbox--add-button [type='checkbox'][disabled] + .slds-checkbox--faux::after { background-color: var(--slds-g-color-on-disabled-1); } .slds-checkbox_add-button [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox'][disabled]:checked ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox'][disabled]:checked + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox'][disabled]:checked + .slds-checkbox--faux { background-color: var(--slds-g-color-disabled-container-2); } .slds-checkbox_add-button [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux::before, .slds-checkbox--add-button [type='checkbox'][disabled]:checked ~ .slds-checkbox--faux::before, .slds-checkbox_add-button [type='checkbox'][disabled]:checked + .slds-checkbox_faux::before, .slds-checkbox--add-button [type='checkbox'][disabled]:checked + .slds-checkbox--faux::before, .slds-checkbox_add-button [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux::after, .slds-checkbox--add-button [type='checkbox'][disabled]:checked ~ .slds-checkbox--faux::after, .slds-checkbox_add-button [type='checkbox'][disabled]:checked + .slds-checkbox_faux::after, .slds-checkbox--add-button [type='checkbox'][disabled]:checked + .slds-checkbox--faux::after { background-color: var(--slds-g-color-on-disabled-2); } .slds-checkbox-button { width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); display: inline-flex; align-items: center; justify-content: center; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: var(--slds-s-button-radius-border); color: var(--slds-s-button-color); cursor: pointer; } .slds-checkbox-button .slds-icon { --slds-c-icon-color-foreground: currentColor; } .slds-checkbox-button_is-checked, .slds-checkbox-button--is-checked { background-color: var(--slds-g-color-accent-container-1); border-color: transparent; color: var(--slds-g-color-on-accent-1); box-shadow: var(--slds-s-mark-shadow-checked); } .slds-checkbox-button_is-disabled, .slds-checkbox-button--is-disabled { background-color: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-2); cursor: default; } .slds-checkbox-button_is-disabled.slds-checkbox-button_is-checked, .slds-checkbox-button--is-disabled.slds-checkbox-button--is-checked { background-color: var(--slds-g-color-disabled-container-2); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-2); box-shadow: var(--slds-s-mark-shadow-checked); } .slds-checkbox-button_is-focused, .slds-checkbox-button--is-focused { outline: 0; box-shadow: var(--slds-g-shadow-insetinverse-focus-1); } .slds-checkbox_button-group, .slds-checkbox--button-group { display: inline-flex; background-color: var(--slds-g-color-surface-container-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); } .slds-checkbox_button, .slds-checkbox--button { display: flex; border: 0; border-radius: 0; background-clip: padding-box; padding-inline: 0; line-height: 1.875rem; } .slds-checkbox_button .slds-checkbox_faux, .slds-checkbox--button .slds-checkbox--faux { padding-inline: var(--slds-g-spacing-4); text-align: center; vertical-align: middle; position: relative; background-color: var(--slds-g-color-surface-container-1); transition: border 0.1s linear, background-color 0.1s linear; } .slds-checkbox_button .slds-checkbox_button__label .slds-checkbox_faux, .slds-checkbox--button .slds-checkbox--button__label .slds-checkbox--faux, .slds-checkbox_button [type='checkbox']:checked + .slds-checkbox_button__label .slds-checkbox_faux, .slds-checkbox--button [type='checkbox']:checked + .slds-checkbox--button__label .slds-checkbox--faux { background-color: transparent; } .slds-checkbox_button + .slds-checkbox_button, .slds-checkbox--button + .slds-checkbox--button { border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: 0; margin: 0; } .slds-checkbox_button:first-child > .slds-checkbox_faux, .slds-checkbox--button:first-child > .slds-checkbox--faux, .slds-checkbox_button:first-child > .slds-checkbox_button__label, .slds-checkbox--button:first-child > .slds-checkbox--button__label { border-start-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); } .slds-checkbox_button:last-child > .slds-checkbox_faux, .slds-checkbox--button:last-child > .slds-checkbox--faux, .slds-checkbox_button .slds-button_last > .slds-checkbox_faux, .slds-checkbox--button .slds-button--last > .slds-checkbox--faux, .slds-checkbox_button:last-child > .slds-checkbox_button__label, .slds-checkbox--button:last-child > .slds-checkbox--button__label { border-start-start-radius: 0; border-start-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-end-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-end-start-radius: 0; } .slds-checkbox_button:first-child:hover, .slds-checkbox--button:first-child:hover { border-start-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); } .slds-checkbox_button:last-child:hover, .slds-checkbox--button:last-child:hover { border-start-start-radius: 0; border-start-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-end-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2)); border-end-start-radius: 0; } .slds-checkbox_button [type='checkbox'], .slds-checkbox--button [type='checkbox'] { width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; } .slds-checkbox_button [type='checkbox']:checked + .slds-checkbox_faux, .slds-checkbox--button [type='checkbox']:checked + .slds-checkbox--faux, .slds-checkbox_button [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-checkbox--button [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-checkbox_button [type='checkbox']:checked + .slds-checkbox_button__label, .slds-checkbox--button [type='checkbox']:checked + .slds-checkbox--button__label { background-color: var(--slds-g-color-accent-container-1); color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-s-button-shadow-active); } .slds-checkbox_button [type='checkbox']:checked + .slds-checkbox_faux:hover, .slds-checkbox--button [type='checkbox']:checked + .slds-checkbox--faux:hover, .slds-checkbox_button [type='checkbox']:checked ~ .slds-checkbox_faux:hover, .slds-checkbox--button [type='checkbox']:checked ~ .slds-checkbox--faux:hover, .slds-checkbox_button [type='checkbox']:checked + .slds-checkbox_button__label:hover, .slds-checkbox--button [type='checkbox']:checked + .slds-checkbox--button__label:hover, .slds-checkbox_button [type='checkbox']:checked + .slds-checkbox_faux:focus, .slds-checkbox--button [type='checkbox']:checked + .slds-checkbox--faux:focus, .slds-checkbox_button [type='checkbox']:checked ~ .slds-checkbox_faux:focus, .slds-checkbox--button [type='checkbox']:checked ~ .slds-checkbox--faux:focus, .slds-checkbox_button [type='checkbox']:checked + .slds-checkbox_button__label:focus, .slds-checkbox--button [type='checkbox']:checked + .slds-checkbox--button__label:focus { background-color: var(--slds-g-color-accent-container-2); } .slds-checkbox_button [type='checkbox']:focus-visible + .slds-checkbox_faux, .slds-checkbox--button [type='checkbox']:focus-visible + .slds-checkbox--faux, .slds-checkbox_button [type='checkbox']:focus-visible ~ .slds-checkbox_faux, .slds-checkbox--button [type='checkbox']:focus-visible ~ .slds-checkbox--faux, .slds-checkbox_button [type='checkbox']:focus-visible + .slds-checkbox_button__label, .slds-checkbox--button [type='checkbox']:focus-visible + .slds-checkbox--button__label { background-color: var(--slds-g-color-surface-container-2); z-index: 1; box-shadow: none; outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -1px; } .slds-checkbox_button [type='checkbox']:checked:focus-visible + .slds-checkbox_faux, .slds-checkbox--button [type='checkbox']:checked:focus-visible + .slds-checkbox--faux, .slds-checkbox_button [type='checkbox']:checked:focus-visible ~ .slds-checkbox_faux, .slds-checkbox--button [type='checkbox']:checked:focus-visible ~ .slds-checkbox--faux, .slds-checkbox_button [type='checkbox']:checked:focus-visible + .slds-checkbox_button__label, .slds-checkbox--button [type='checkbox']:checked:focus-visible + .slds-checkbox--button__label { background-color: var(--slds-g-color-accent-container-2); box-shadow: inset 0 0 0 3px var(--slds-g-color-neutral-base-100); } .slds-checkbox_button [type='checkbox'][disabled] + .slds-checkbox_faux, .slds-checkbox--button [type='checkbox'][disabled] + .slds-checkbox--faux, .slds-checkbox_button [type='checkbox'][disabled] ~ .slds-checkbox_faux, .slds-checkbox--button [type='checkbox'][disabled] ~ .slds-checkbox--faux, .slds-checkbox_button [type='checkbox'][disabled] + .slds-checkbox_button__label, .slds-checkbox--button [type='checkbox'][disabled] + .slds-checkbox--button__label { background-color: var(--slds-g-color-disabled-container-1); color: var(--slds-g-color-on-disabled-2); } .slds-checkbox_button [type='checkbox'][disabled]:checked + .slds-checkbox_faux, .slds-checkbox--button [type='checkbox'][disabled]:checked + .slds-checkbox--faux, .slds-checkbox_button [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux, .slds-checkbox--button [type='checkbox'][disabled]:checked ~ .slds-checkbox--faux, .slds-checkbox_button [type='checkbox'][disabled]:checked + .slds-checkbox_button__label, .slds-checkbox--button [type='checkbox'][disabled]:checked + .slds-checkbox--button__label { background-color: var(--slds-g-color-disabled-container-2); color: var(--slds-g-color-on-disabled-1); } .slds-checkbox_button [type='checkbox'][disabled] + .slds-checkbox_button__label:hover, .slds-checkbox--button [type='checkbox'][disabled] + .slds-checkbox--button__label:hover, .slds-checkbox_button [type='checkbox'][disabled] + .slds-checkbox_button__label:focus, .slds-checkbox--button [type='checkbox'][disabled] + .slds-checkbox--button__label:focus { cursor: default; } .slds-checkbox_button__label, .slds-checkbox--button__label { background-color: var(--slds-g-color-surface-container-1); } .slds-checkbox_button__label:hover, .slds-checkbox--button__label:hover, .slds-checkbox_button__label:focus, .slds-checkbox--button__label:focus { cursor: pointer; background-color: var(--slds-g-color-surface-container-2); } /*! Lightning Design System 2.23.0-alpha.1 */ .slds-select { height: calc(1.875rem + (1px * 2)); width: 100%; border: var(--slds-s-input-sizing-border, var(--slds-g-sizing-border-1)) solid var(--slds-c-select-color-border, var(--slds-s-input-color-border, var(--slds-g-color-border-1))); border-radius: var(--slds-c-select-radius-border, var(--slds-s-input-radius-border, var(--slds-g-radius-border-2))); background-color: var(--slds-c-select-color-background, var(--slds-s-input-color-background, var(--slds-g-color-surface-container-1))); color: var(--slds-c-select-text-color, var(--slds-s-input-color)); box-shadow: var(--slds-c-select-shadow, var(--slds-s-input-shadow)); transition: background-color 0.1s linear; } .slds-select:required { box-shadow: none; } .slds-select:focus-visible { border-color: var(--slds-c-select-color-border-focus, transparent); background-color: var(--slds-c-select-color-background-focus, var(--slds-g-color-surface-container-1)); color: var(--slds-s-input-color-focus, var(--slds-c-select-text-color-focus)); outline: 0; box-shadow: var(--slds-g-shadow-outline-focus-1); } .slds-select[disabled], .slds-select.slds-is-disabled { background-color: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-on-1); cursor: not-allowed; user-select: none; opacity: 1; } .slds-select[disabled]:focus, .slds-select[disabled]:active, .slds-select.slds-is-disabled:focus, .slds-select.slds-is-disabled:active { box-shadow: none; } .slds-select[size], .slds-select[multiple] { min-height: calc(1.875rem + (1px * 2)); height: inherit; } .slds-select[size] option, .slds-select[multiple] option { padding: var(--slds-g-spacing-2); } .slds-select_container, .slds-select--container { position: relative; color: var(--slds-c-select-text-color, var(--slds-s-input-color)); } .slds-select_container .slds-select, .slds-select--container .slds-select { appearance: none; padding-inline-start: var(--slds-s-input-spacing, var(--slds-g-spacing-2)); padding-inline-end: var(--slds-s-input-spacing, var(--slds-g-spacing-5)); } .slds-select_container::before, .slds-select--container::before, .slds-select_container::after, .slds-select--container::after { position: absolute; content: ''; display: block; inset-inline-end: var(--slds-g-spacing-2); width: 0; height: 0; border-inline-start: var(--slds-g-sizing-border-3) solid transparent; border-inline-end: var(--slds-g-sizing-border-3) solid transparent; pointer-events: none; } .slds-select_container::before, .slds-select--container::before { border-block-end: 5px solid currentColor; inset-block-start: calc((var(--slds-g-sizing-8) / 2) - 6px); } .slds-select_container::after, .slds-select--container::after { border-block-start: 5px solid currentColor; inset-block-end: calc((var(--slds-g-sizing-8) / 2) - 6px); } .slds-has-error .slds-select { border-color: var(--slds-s-input-color-border-invalid, var(--slds-g-color-error-1)); box-shadow: var(--slds-s-input-shadow-invalid, var(--slds-g-color-error-1) 0 0 0 1px inset); background-clip: padding-box; background-color: var(--slds-s-input-color-background-invalid); color: var(--slds-s-input-color-invalid); } .slds-has-error .slds-select:focus-visible, .slds-has-error .slds-select:active { box-shadow: var(--slds-g-color-error-1) 0 0 0 1px inset, 0 0 3px var(--slds-g-color-border-accent-2); box-shadow: var(--slds-g-shadow-outline-focus-1); border-color: transparent; } .slds-docked-form-footer { display: flex; justify-content: center; padding: var(--slds-g-spacing-2) 0; position: fixed; inset-block-end: 0; inset-inline-start: 0; width: 100%; background-color: var(--slds-s-container-footer-color-background, var(--slds-g-color-surface-container-2)); box-shadow: var(--slds-g-shadow-blockstart-2, 0 -2px 2px 0 rgba(0, 0, 0, 0.16)); z-index: 8000; } .slds-docked-form-footer:focus-within { align-items: center; } .slds-slider { display: flex; position: relative; } .slds-slider__range { appearance: none; width: 100%; background: none; background-color: transparent; border-radius: var(--slds-g-radius-border-1); } .slds-slider__range:focus { outline: 0; } .slds-slider__range::-webkit-slider-thumb { appearance: none; width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); border-radius: var(--slds-c-slider-thumb-radius-border, var(--slds-g-radius-border-circle)); background: none; background-color: var(--slds-c-slider-thumb-color-foreground, var(--slds-g-color-accent-container-1)); border: 0; box-shadow: var(--slds-c-slider-thumb-shadow, var(--slds-g-color-neutral-base-10, rgba(0, 0, 0, 0.16) 0 2px 3px)); cursor: pointer; transition: background 0.15s ease-in-out; } .slds-slider__range::-webkit-slider-thumb:hover { background-color: var(--slds-c-slider-thumb-color-foreground-hover, var(--slds-g-color-accent-container-2)); } .slds-slider__range::-webkit-slider-thumb { margin-top: calc(((var(--slds-g-sizing-5) / 2) - (var(--slds-g-sizing-2) / 2)) * -1); } .slds-slider__range::-webkit-slider-runnable-track { width: 100%; height: var(--slds-g-sizing-2); cursor: pointer; background: none; background-color: var(--slds-c-slider-track-color-background, var(--slds-g-color-border-1)); border-radius: var(--slds-c-slider-track-radius-border, var(--slds-g-radius-border-1)); } .slds-slider__range::-moz-range-thumb { appearance: none; width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); border-radius: var(--slds-c-slider-thumb-radius-border, var(--slds-g-radius-border-circle)); background: none; background-color: var(--slds-c-slider-thumb-color-foreground, var(--slds-g-color-accent-container-1)); border: 0; box-shadow: var(--slds-c-slider-thumb-shadow, var(--slds-g-color-neutral-base-10, rgba(0, 0, 0, 0.16) 0 2px 3px)); cursor: pointer; transition: background 0.15s ease-in-out; } .slds-slider__range::-moz-range-thumb:hover { background-color: var(--slds-c-slider-thumb-color-foreground-hover, var(--slds-g-color-accent-container-2)); } .slds-slider__range::-moz-range-track { width: 100%; height: var(--slds-g-sizing-2); cursor: pointer; background: none; background-color: var(--slds-c-slider-track-color-background, var(--slds-g-color-border-1)); border-radius: var(--slds-c-slider-track-radius-border, var(--slds-g-radius-border-1)); } .slds-slider__range::-ms-track { width: 100%; height: var(--slds-g-sizing-2); cursor: pointer; background: none; background-color: var(--slds-c-slider-track-color-background, var(--slds-g-color-neutral-base-95, var(--slds-g-color-surface-2))); border-radius: var(--slds-c-slider-track-radius-border, var(--slds-g-radius-border-1)); border-color: transparent; color: transparent; } .slds-slider__range::-ms-thumb { width: 100%; height: var(--slds-g-sizing-2); cursor: pointer; background: none; background-color: var(--slds-c-slider-track-color-background, var(--slds-g-color-neutral-base-95, var(--slds-g-color-surface-2))); border-radius: var(--slds-c-slider-track-radius-border, var(--slds-g-radius-border-1)); margin-block-start: calc(var(--slds-g-sizing-2) / 4); } .slds-slider__range:focus-visible::-webkit-slider-thumb { background-color: var(--slds-c-slider-thumb-color-foreground-focus, var(--slds-g-color-accent-container-2)); box-shadow: var(--slds-c-slider-thumb-shadow-focus, var(--slds-g-shadow-outset-focus-1)); } .slds-slider__range:active::-webkit-slider-thumb { background-color: var(--slds-c-slider-thumb-color-foreground-active, var(--slds-g-color-accent-container-2)); } .slds-slider__range:focus-visible::-moz-range-thumb { background-color: var(--slds-c-slider-thumb-color-foreground-focus, var(--slds-g-color-accent-container-2)); box-shadow: var(--slds-c-slider-thumb-shadow-focus, var(--slds-g-shadow-outset-focus-1)); } .slds-slider__range:active::-moz-range-thumb { background-color: var(--slds-c-slider-thumb-color-foreground-active, var(--slds-g-color-accent-container-2)); } .slds-slider__range[disabled]::-webkit-slider-thumb { background-color: var(--slds-g-color-on-disabled-1); cursor: default; } .slds-slider__range[disabled]::-webkit-slider-runnable-track { background-color: var(--slds-g-color-border-disabled-1); cursor: default; } .slds-slider__range[disabled]::-moz-range-thumb { background-color: var(--slds-g-color-on-disabled-1); cursor: default; } .slds-slider__range[disabled]::-moz-range-track { background-color: var(--slds-g-color-border-disabled-1); } .slds-slider__range[disabled]::-ms-thumb { background-color: var(--slds-g-color-on-disabled-1); cursor: default; } .slds-slider__range[disabled]::-ms-track { background-color: var(--slds-g-color-border-disabled-1); cursor: default; } .slds-slider__value { padding-block: 0; padding-inline: var(--slds-g-spacing-2); } .slds-slider-label__label { display: block; } .slds-slider_vertical, .slds-slider--vertical { height: calc(12rem + 1.875rem); } .slds-slider_vertical .slds-slider__range, .slds-slider--vertical .slds-slider__range { width: 12rem; height: var(--slds-g-sizing-5); transform: rotate(-90deg); transform-origin: calc(12rem * 0.5) calc(12rem * 0.5); } .slds-slider_vertical .slds-slider__value, .slds-slider--vertical .slds-slider__value { position: absolute; inset-inline-start: 0; inset-block-end: 0; padding: 0; } .slds-file-selector { display: inline-flex; } .slds-file-selector__dropzone { padding: var(--slds-g-spacing-1); border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-border-2); border-radius: var(--slds-g-radius-border-2); } .slds-file-selector__dropzone.slds-has-drag-over { outline: 0; border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-border-accent-2); } .slds-file-selector__input:focus-visible ~ .slds-file-selector__body > .slds-file-selector__button { box-shadow: var(--slds-g-shadow-outline-focus-1); border-color: transparent; } .slds-file-selector__input[disabled] ~ .slds-file-selector__body { color: var(--slds-g-color-on-surface-1); } .slds-file-selector__input[disabled] ~ .slds-file-selector__body > .slds-file-selector__button { background: var(--slds-g-color-surface-2); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-on-disabled-1); } .slds-file-selector__input[disabled] ~ .slds-file-selector__body > .slds-file-selector__body-icon { fill: currentColor; } .slds-file-selector__button { display: inline-flex; align-items: center; } .slds-file-selector__button .slds-icon-text-default { --slds-c-icon-color-foreground: currentColor; } .slds-file-selector_files .slds-file-selector__body, .slds-file-selector--files .slds-file-selector__body { display: flex; align-items: center; } .slds-file-selector_files .slds-file-selector__text, .slds-file-selector--files .slds-file-selector__text { margin-inline-start: var(--slds-g-spacing-2); margin-inline-end: var(--slds-g-spacing-3); } .slds-file-selector_images, .slds-file-selector--images { display: block; } .slds-file-selector_images .slds-file-selector__dropzone, .slds-file-selector--images .slds-file-selector__dropzone { display: flex; justify-content: center; align-content: center; padding: var(--slds-g-spacing-4); } .slds-file-selector_images .slds-file-selector__body, .slds-file-selector--images .slds-file-selector__body { text-align: center; } .slds-file-selector_images .slds-file-selector__text, .slds-file-selector--images .slds-file-selector__text { margin-block-start: var(--slds-g-spacing-var-block-3); } .slds-file-selector_integrated, .slds-file-selector--integrated { width: 100%; height: 100%; position: relative; display: block; } .slds-file-selector__dropzone_integrated, .slds-file-selector__dropzone--integrated { display: flex; justify-content: center; align-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0; opacity: 0; z-index: -1; } .slds-file-selector__dropzone_integrated.slds-has-drag, .slds-file-selector__dropzone--integrated.slds-has-drag { opacity: 1; z-index: 8000; } .slds-file-selector__dropzone_integrated.slds-has-drag ~ p, .slds-file-selector__dropzone--integrated.slds-has-drag ~ p { color: var(--slds-g-color-disabled-1); } .slds-file-selector__dropzone_integrated.slds-has-drag-over, .slds-file-selector__dropzone--integrated.slds-has-drag-over { background: var(--slds-g-color-brand-base-90, var(--slds-g-color-palette-neutral-95)); border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-border-accent-2); } .slds-file-selector__body_integrated, .slds-file-selector__body--integrated { width: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-9)); height: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-9)); display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; margin: auto; background: var(--slds-g-color-neutral-base-100); box-shadow: var(--slds-g-shadow-4); border: var(--slds-g-sizing-border-1) solid var(--slds-s-container-color-border); border-radius: var(--slds-g-radius-border-2); } .slds-file-selector__text_integrated, .slds-file-selector__text--integrated { margin-block-start: var(--slds-g-spacing-3); } .slds-page-header { padding-block: var(--slds-g-spacing-var-block-4); padding-inline: var(--slds-g-spacing-var-inline-4); border-radius: var(--slds-s-pageheader-radius-border, var(--slds-g-radius-border-2)); background: var(--slds-s-pageheader-color-background, var(--slds-g-color-surface-container-2)); background-clip: padding-box; box-shadow: var(--slds-s-pageheader-shadow, var(--slds-g-shadow-1)); border: var(--slds-s-pageheader-sizing-border, var(--slds-g-sizing-border-1)) solid var(--slds-s-pageheader-color-border, var(--slds-g-color-border-1)); } .slds-page-header .slds-media { align-items: center; } .slds-page-header__row { display: flex; } .slds-page-header__row .slds-media { align-items: center; } .slds-page-header__row_gutters, .slds-page-header__row--gutters { margin-inline-start: calc(var(--slds-g-spacing-4) * -1); margin-inline-end: calc(var(--slds-g-spacing-4) * -1); } .slds-page-header__col-title { flex: 1 1 0%; min-width: 0; } .slds-page-header__icon { width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); } .slds-page-header__col-actions { align-self: center; flex: none; vertical-align: top; } .slds-page-header__col-meta { align-self: center; flex: 1 1 auto; vertical-align: middle; } .slds-page-header__col-controls { flex: none; vertical-align: bottom; } .slds-page-header__col-details { flex: 1 1 auto; padding-inline-start: var(--slds-g-spacing-4); padding-inline-end: var(--slds-g-spacing-4); max-width: 100%; } .slds-page-header__name { display: inline-flex; padding-inline-end: var(--slds-g-spacing-3); max-width: 100%; } .slds-page-header__name h1 { line-height: 1; } .slds-page-header__name-title { min-width: 0; color: var(--slds-g-color-on-surface-1); } .slds-page-header__name-switcher { align-self: flex-end; margin-inline-start: var(--slds-g-spacing-2); margin-block-end: var(--slds-s-pageheader-action-bottom-spacing); } .slds-page-header__name-switcher .slds-button__icon { fill: var(--slds-g-color-on-surface-3); } .slds-page-header__name-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: var(--slds-g-spacing-3); color: var(--slds-g-color-on-surface-1); } .slds-page-header__meta-text { font-size: var(--slds-g-font-size-base); color: var(--slds-g-color-on-surface-1); } .slds-page-header__title { font-size: var(--slds-s-pageheader-title-font-size, var(--slds-g-font-scale-1)); font-weight: var(--slds-s-pageheader-title-font-weight, var(--slds-g-font-weight-7)); color: var(--slds-g-color-on-surface-3); line-height: var(--slds-g-font-lineheight-2); display: block; } .slds-page-header__title .slds-icon { fill: currentColor; } .slds-page-header__controls { display: flex; } .slds-page-header__control { margin-inline-start: var(--slds-g-spacing-2); } .slds-page-header__detail-row { display: flex; margin-block: var(--slds-g-spacing-var-block-4) calc(var(--slds-g-spacing-var-block-4) * -1); margin-inline: calc(var(--slds-g-spacing-var-inline-4) * -1); padding: var(--slds-g-spacing-var-inline-4); border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: var(--slds-s-pageheader-radius-border); border-end-start-radius: var(--slds-s-pageheader-radius-border); background-color: var(--slds-s-pageheader-row-color-background); position: relative; z-index: 2; } .slds-page-header__detail-block { padding-inline-end: var(--slds-g-spacing-6); padding-inline-start: var(--slds-g-spacing-6); max-width: 25%; } .slds-page-header__detail-block:first-child { padding-inline-start: 0; } .slds-page-header__detail-block:last-child { padding-inline-end: 0; } .slds-page-header_vertical, .slds-page-header--vertical { padding: var(--slds-g-spacing-3); background: var(--slds-g-color-surface-container-1); border-radius: var(--slds-s-container-radius-border, var(--slds-g-radius-border-2)); border-block-end: 0; } .slds-page-header_vertical .slds-page-header__controls, .slds-page-header--vertical .slds-page-header__controls { display: flex; gap: var(--slds-g-spacing-2); padding-block-start: var(--slds-g-spacing-2); margin-block-start: var(--slds-g-spacing-2); border-block-start: var(--slds-s-pageheader-sizing-border, var(--slds-g-sizing-border-1)) solid var(--slds-s-pageheader-color-border, var(--slds-g-color-border-1)); } .slds-page-header__detail-list { display: flex; flex-wrap: wrap; } .slds-page-header__detail-item { margin-block-start: var(--slds-g-spacing-var-2); width: 50%; } .slds-page-header_joined, .slds-page-header--joined, .slds-page-header.slds-has-bottom-magnet { border-radius: var(--slds-s-pageheader-radius-border) var(--slds-s-pageheader-radius-border) 0 0; } .slds-page-header_object-home, .slds-page-header--object-home { padding-block-end: var(--slds-g-spacing-3); } .slds-brand-band { --_slds-c-brandband-color-background-dark: var(--slds-g-color-surface-2); --_slds-c-brandband-color-background-light: var(--slds-g-color-surface-2); --_slds-c-brandband-asset-default-image: none; --_slds-c-brandband-asset-group-image: var(--lwc-bannerGroupDefaultImage); --_slds-c-brandband-asset-user-image: var(--lwc-bannerUserDefaultImage); display: flex; flex-direction: column; position: relative; height: 100%; width: 100%; } .slds-brand-band::before { content: ''; display: block; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background-image: var(--_slds-c-brandband-asset-default-image), linear-gradient( to top, color-mix(in srgb, var(--_slds-c-brandband-color-background-dark) 0%, transparent) 0, var(--_slds-c-brandband-color-background-dark) ); background-repeat: repeat-x; background-position: top left; } .slds-brand-band::after { content: none; display: block; position: absolute; z-index: -1; left: 0; right: 0; top: 0; width: 100%; height: var(--_slds-c-brandband-scrim-sizing-height, 3.125rem); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--_slds-c-brandband-color-background-light) 0%, transparent) 60%, var(--_slds-c-brandband-color-background-light) ); } .slds-brand-band.slds-brand-band_cover::before, .slds-brand-band.slds-brand-band--cover::before { background-repeat: no-repeat; background-size: cover; } .slds-brand-band.slds-brand-band_small::before, .slds-brand-band.slds-brand-band--small::before { height: var(--_slds-c-brandband-sizing-height-small, 6rem); } .slds-brand-band.slds-brand-band_small::after, .slds-brand-band.slds-brand-band--small::after { content: ''; top: calc(var(--_slds-c-brandband-sizing-height-small, 6rem) - var(--_slds-c-brandband-scrim-sizing-height, 3.125rem)); } .slds-brand-band.slds-brand-band_medium::before, .slds-brand-band.slds-brand-band--medium::before { height: var(--_slds-c-brandband-sizing-height-medium, 12.5rem); } .slds-brand-band.slds-brand-band_medium::after, .slds-brand-band.slds-brand-band--medium::after { content: ''; top: calc(var(--_slds-c-brandband-sizing-height-medium, 12.5rem) - var(--_slds-c-brandband-scrim-sizing-height, 3.125rem)); } .slds-brand-band.slds-brand-band_large::before, .slds-brand-band.slds-brand-band--large::before { height: var(--_slds-c-brandband-sizing-height-large, 18.75rem); } .slds-brand-band.slds-brand-band_large::after, .slds-brand-band.slds-brand-band--large::after { content: ''; top: calc(var(--_slds-c-brandband-sizing-height-large, 18.75rem) - var(--_slds-c-brandband-scrim-sizing-height, 3.125rem)); } .slds-brand-band.slds-brand-band_full::before, .slds-brand-band.slds-brand-band--full::before { height: 100%; } .slds-brand-band.slds-brand-band_bottom::before, .slds-brand-band.slds-brand-band--bottom::before { background-position: bottom; top: initial; } .slds-brand-band.slds-brand-band_none::before, .slds-brand-band.slds-brand-band--none::before { height: 0; } .slds-brand-band.slds-brand-band_group::before, .slds-brand-band.slds-brand-band--group::before { background-image: var(--_slds-c-brandband-asset-group-image); } .slds-brand-band.slds-brand-band_user::before, .slds-brand-band.slds-brand-band--user::before { background-image: var(--_slds-c-brandband-asset-user-image); } .slds-brand-band .slds-brand-band_blank, .slds-brand-band .slds-brand-band--blank { background: var(--slds-g-color-surface-color-2); } .slds-brand-band .slds-brand-band_blank::before, .slds-brand-band .slds-brand-band--blank::before, .slds-brand-band .slds-brand-band_blank::after, .slds-brand-band .slds-brand-band--blank::after { background: none; } .slds-panel { background: var(--slds-g-color-surface-1); border-radius: var(--slds-g-radius-border-1); overflow-y: auto; } .slds-panel.slds-is-editing { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); } .slds-panel .slds-panel__header-title { text-align: start; width: 100%; font-size: var(--slds-s-container-heading-font-size, var(--slds-g-font-scale-2)); } .slds-panel__section { padding: var(--slds-g-spacing-4); } .slds-panel__actions { padding: var(--slds-g-spacing-3); } .slds-panel__header { display: flex; position: relative; align-items: center; padding: var(--slds-g-spacing-3); border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-surface-3); } .slds-panel__header_custom, .slds-panel__header--custom { padding-block: var(--slds-g-spacing-3); padding-inline: var(--slds-g-spacing-4); } .slds-panel__close:first-child { margin-inline-end: var(--slds-g-spacing-2); } .slds-panel__close:last-child { margin-inline-start: var(--slds-g-spacing-2); } .slds-panel__back:first-child { margin-inline-end: var(--slds-g-spacing-2); } .slds-panel__back:last-child { margin-inline-start: var(--slds-g-spacing-2); } .slds-panel__close, .slds-panel__back { flex-shrink: 0; } .slds-panel__header_align-center, .slds-panel__header--align-center { padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-8); } .slds-panel__header_align-center .slds-panel__header-title, .slds-panel__header--align-center .slds-panel__header-title { text-align: center; } .slds-panel__header_align-center .slds-panel__close, .slds-panel__header--align-center .slds-panel__close { position: absolute; inset-inline-end: var(--slds-g-spacing-3); inset-inline-start: auto; inset-block-start: 50%; margin-block-start: calc(var(--slds-g-spacing-3) * -1); } .slds-panel__header_align-center .slds-panel__back, .slds-panel__header--align-center .slds-panel__back { position: absolute; inset-inline-start: var(--slds-g-spacing-3); inset-inline-end: auto; inset-block-start: 50%; margin-block-start: calc(var(--slds-g-spacing-3) * -1); } .slds-panel__header-actions { display: flex; align-items: flex-end; margin-inline-start: var(--slds-g-spacing-2); } .slds-panel__header-actions .slds-panel__close { margin-inline-start: 0; margin-inline-end: 0; } .slds-panel__body { padding: var(--slds-g-spacing-3); color: var(--slds-s-container-color); } .slds-panel_docked, .slds-panel--docked { position: relative; min-width: var(--slds-g-sizing-14); height: 100%; border-radius: 0; display: none; } .slds-panel_docked.slds-is-open, .slds-panel--docked.slds-is-open { display: block; } .slds-panel_docked-left, .slds-panel--docked-left { box-shadow: var(--slds-g-shadow-inlineend-3, 1px 0 3px rgba(0, 0, 0, 0.25)); } .slds-panel_docked-right, .slds-panel--docked-right { margin-inline-start: auto; box-shadow: var(--slds-g-shadow-inlinestart-3, -1px 0 3px 0 rgba(0, 0, 0, 0.25)); } .slds-panel_animated, .slds-panel--animated { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translate3d(120%, 0, 0); transition: transform 300ms ease; z-index: 9000; } .slds-tabs-mobile__container .slds-panel_animated, .slds-tabs-mobile__container .slds-panel--animated { position: fixed; } .slds-panel_animated.slds-is-open, .slds-panel--animated.slds-is-open { transform: translate3d(0, 0, 0); } .slds-panel_filters, .slds-panel--filters { margin-inline-start: var(--slds-g-spacing-4); box-shadow: var(--slds-g-shadow-1); border-radius: 0; } .slds-popover { position: relative; border-radius: var(--slds-g-radius-border-2); width: var(--slds-g-sizing-15); min-height: calc(1rem * 2); z-index: var(--slds-c-popover-position-zindex, 6000); background-color: var(--slds-g-color-surface-container-1); display: inline-block; box-shadow: var(--slds-g-shadow-2); border: 1px solid var(--slds-g-color-border-1); } .slds-popover__meta { margin-block-end: var(--slds-g-spacing-3); } .slds-popover__body { padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); color: var(--slds-s-container-color); } .slds-popover__body .slds-popover__header { padding-block: 0 var(--slds-g-spacing-2); padding-inline: 0; } .slds-popover__body:focus-visible { box-shadow: var(--slds-g-shadow-outline-focus-1); outline: 0; z-index: 1; } .slds-popover__body, .slds-popover__header, .slds-popover__footer { position: relative; padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); word-wrap: break-word; } .slds-popover__header { border-block-end: 0; color: var(--slds-s-container-heading-font-color); font-weight: var(--slds-s-container-heading-font-weight); } .slds-popover__footer { border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-s-container-color-border, var(--slds-g-color-neutral-base-90)); background-color: var(--slds-s-container-footer-color-background, var(--slds-g-color-surface-container-2)); border-end-start-radius: inherit; border-end-end-radius: inherit; padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); color: var(--slds-s-container-footer-font-color); } .slds-popover__footer_form, .slds-popover__footer--form { text-align: center; background: var(--slds-g-color-surface-container-2); border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-2); } .slds-popover__body_small, .slds-popover__body--small { max-height: var(--slds-g-sizing-14); overflow-y: auto; } .slds-popover__close { position: relative; margin: var(--slds-g-spacing-1); z-index: 6001; } .slds-popover__close.slds-button_icon-inverse:focus-visible, .slds-popover__close.slds-button--icon-inverse:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-popover_small, .slds-popover--small { max-width: var(--slds-g-sizing-14); } .slds-popover_medium, .slds-popover--medium { min-width: var(--slds-g-sizing-15); } .slds-popover_large, .slds-popover--large { min-width: calc(var(--slds-g-sizing-15) + var(--slds-g-sizing-12)); max-width: 512px; } .slds-popover[class*='theme_'], .slds-popover[class*='theme--'] { border: 0; } .slds-popover *:last-child { margin-block-end: 0; } .slds-popover_full-width, .slds-popover--full-width { width: 100%; } .slds-popover_hide, .slds-popover--hide { display: none; } .slds-popover_dark, .slds-popover--dark { background-color: var(--slds-g-color-surface-inverse-2); color: var(--slds-g-color-on-surface-inverse-1); } .slds-popover_dark .slds-badge, .slds-popover--dark .slds-badge { background-color: var(--slds-g-color-surface-container-1); } .slds-popover_dark .slds-popover__close, .slds-popover--dark .slds-popover__close { color: var(--slds-g-color-on-surface-inverse-1); } .slds-popover_dark .slds-text-title, .slds-popover--dark .slds-text-title { color: var(--slds-g-color-on-surface-inverse-1); } .slds-popover_dark a, .slds-popover--dark a { color: var(--slds-g-color-on-surface-inverse-1); text-decoration: underline; } .slds-popover_dark a:hover, .slds-popover--dark a:hover { text-decoration: none; } .slds-popover_dark .slds-icon-text-default, .slds-popover--dark .slds-icon-text-default { fill: var(--slds-g-color-on-accent-1); } .slds-popover_dark .slds-popover__header, .slds-popover--dark .slds-popover__header { color: var(--slds-g-color-on-surface-inverse-1); } .slds-popover_dark .slds-popover__body, .slds-popover--dark .slds-popover__body { color: var(--slds-g-color-on-surface-inverse-1); } .slds-popover_dark .slds-popover__footer, .slds-popover--dark .slds-popover__footer { border-block-start-color: var(--slds-g-color-brand-base-10); background-color: var(--slds-g-color-surface-inverse-1); } .slds-popover_dark .slds-popover__footer .slds-button_neutral:focus-visible, .slds-popover--dark .slds-popover__footer .slds-button--neutral:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); outline: 0; } .slds-popover_brand .slds-popover__footer, .slds-popover--brand .slds-popover__footer { background-color: transparent; border-color: transparent; } .slds-popover_brand .slds-popover__icon, .slds-popover--brand .slds-popover__icon { fill: var(--slds-g-color-accent-2); } .slds-popover_brand .slds-popover__body .slds-icon-text-default, .slds-popover--brand .slds-popover__body .slds-icon-text-default { --slds-c-icon-color-foreground: var(--slds-g-color-accent-2); } .slds-popover_brand.slds-popover_brand-dark .slds-popover__icon, .slds-popover--brand.slds-popover--brand-dark .slds-popover__icon { fill: var(--slds-g-color-brand-base-10); } .slds-popover_brand-top, .slds-popover--brand-top { border-block-start-width: 0.25rem; border-block-start-color: var(--slds-g-color-border-accent-1); } .slds-popover_brand-top.slds-nubbin_top::before, .slds-popover--brand-top.slds-nubbin--top::before, .slds-popover_brand-top.slds-nubbin_top-left::before, .slds-popover--brand-top.slds-nubbin--top-left::before, .slds-popover_brand-top.slds-nubbin_top-left-corner::before, .slds-popover--brand-top.slds-nubbin--top-left-corner::before, .slds-popover_brand-top.slds-nubbin_top-right::before, .slds-popover--brand-top.slds-nubbin--top-right::before, .slds-popover_brand-top.slds-nubbin_top-right-corner::before, .slds-popover--brand-top.slds-nubbin--top-right-corner::before { margin-block-start: -0.1875rem; background: linear-gradient(-45deg, transparent 50%, var(--slds-g-color-accent-container-1) 50%, var(--slds-g-color-accent-container-1)); } .slds-popover_brand-top.slds-nubbin_top::after, .slds-popover--brand-top.slds-nubbin--top::after, .slds-popover_brand-top.slds-nubbin_top-left::after, .slds-popover--brand-top.slds-nubbin--top-left::after, .slds-popover_brand-top.slds-nubbin_top-left-corner::after, .slds-popover--brand-top.slds-nubbin--top-left-corner::after, .slds-popover_brand-top.slds-nubbin_top-right::after, .slds-popover--brand-top.slds-nubbin--top-right::after, .slds-popover_brand-top.slds-nubbin_top-right-corner::after, .slds-popover--brand-top.slds-nubbin--top-right-corner::after { margin-block-start: -0.1875rem; background: linear-gradient(-45deg, transparent 50%, transparent 50%, transparent); } .slds-popover_brand-top.slds-popover_brand-dark, .slds-popover--brand-top.slds-popover--brand-dark { border-block-start-color: var(--slds-g-color-brand-base-10); } .slds-popover_brand-top.slds-popover_brand-dark.slds-nubbin_top::before, .slds-popover--brand-top.slds-popover--brand-dark.slds-nubbin--top::before, .slds-popover_brand-top.slds-popover_brand-dark.slds-nubbin_top-left::before, .slds-popover--brand-top.slds-popover--brand-dark.slds-nubbin--top-left::before, .slds-popover_brand-top.slds-popover_brand-dark.slds-nubbin_top-left-corner::before, .slds-popover--brand-top.slds-popover--brand-dark.slds-nubbin--top-left-corner::before, .slds-popover_brand-top.slds-popover_brand-dark.slds-nubbin_top-right::before, .slds-popover--brand-top.slds-popover--brand-dark.slds-nubbin--top-right::before, .slds-popover_brand-top.slds-popover_brand-dark.slds-nubbin_top-right-corner::before, .slds-popover--brand-top.slds-popover--brand-dark.slds-nubbin--top-right-corner::before { margin-block-start: -0.1875rem; background: linear-gradient(-45deg, transparent 50%, var(--slds-g-color-brand-base-10) 50%, var(--slds-g-color-brand-base-10)); } .slds-popover_brand-left, .slds-popover--brand-left { border-inline-start-width: 0.25rem; border-inline-start-color: var(--slds-g-color-border-accent-1); } .slds-popover_brand-left.slds-nubbin_left::before, .slds-popover--brand-left.slds-nubbin--left::before, .slds-popover_brand-left.slds-nubbin_left-top::before, .slds-popover--brand-left.slds-nubbin--left-top::before, .slds-popover_brand-left.slds-nubbin_left-top-corner::before, .slds-popover--brand-left.slds-nubbin--left-top-corner::before, .slds-popover_brand-left.slds-nubbin_left-bottom::before, .slds-popover--brand-left.slds-nubbin--left-bottom::before, .slds-popover_brand-left.slds-nubbin_left-bottom-corner::before, .slds-popover--brand-left.slds-nubbin--left-bottom-corner::before { margin-inline-start: -0.1875rem; background: linear-gradient(-135deg, transparent 50%, var(--slds-g-color-accent-container-1) 50%, var(--slds-g-color-accent-container-1)); } .slds-popover_brand-left.slds-nubbin_left::after, .slds-popover--brand-left.slds-nubbin--left::after, .slds-popover_brand-left.slds-nubbin_left-top::after, .slds-popover--brand-left.slds-nubbin--left-top::after, .slds-popover_brand-left.slds-nubbin_left-top-corner::after, .slds-popover--brand-left.slds-nubbin--left-top-corner::after, .slds-popover_brand-left.slds-nubbin_left-bottom::after, .slds-popover--brand-left.slds-nubbin--left-bottom::after, .slds-popover_brand-left.slds-nubbin_left-bottom-corner::after, .slds-popover--brand-left.slds-nubbin--left-bottom-corner::after { margin-inline-start: -0.1875rem; background: linear-gradient(-135deg, transparent 50%, transparent 50%, transparent); } .slds-popover_brand-left.slds-popover_brand-dark, .slds-popover--brand-left.slds-popover--brand-dark { border-inline-start-color: var(--slds-g-color-brand-base-10); } .slds-popover_brand-left.slds-popover_brand-dark.slds-nubbin_left::before, .slds-popover--brand-left.slds-popover--brand-dark.slds-nubbin--left::before, .slds-popover_brand-left.slds-popover_brand-dark.slds-nubbin_left-top::before, .slds-popover--brand-left.slds-popover--brand-dark.slds-nubbin--left-top::before, .slds-popover_brand-left.slds-popover_brand-dark.slds-nubbin_left-top-corner::before, .slds-popover--brand-left.slds-popover--brand-dark.slds-nubbin--left-top-corner::before, .slds-popover_brand-left.slds-popover_brand-dark.slds-nubbin_left-bottom::before, .slds-popover--brand-left.slds-popover--brand-dark.slds-nubbin--left-bottom::before, .slds-popover_brand-left.slds-popover_brand-dark.slds-nubbin_left-bottom-corner::before, .slds-popover--brand-left.slds-popover--brand-dark.slds-nubbin--left-bottom-corner::before { margin-inline-start: -0.1875rem; background: linear-gradient(-135deg, transparent 50%, var(--slds-g-color-brand-base-10) 50%, var(--slds-g-color-brand-base-10)); } .slds-popover_brand-bottom, .slds-popover--brand-bottom { border-block-end-width: 0.25rem; border-block-end-color: var(--slds-g-color-border-accent-1); } .slds-popover_brand-bottom.slds-nubbin_bottom::before, .slds-popover--brand-bottom.slds-nubbin--bottom::before, .slds-popover_brand-bottom.slds-nubbin_bottom-left::before, .slds-popover--brand-bottom.slds-nubbin--bottom-left::before, .slds-popover_brand-bottom.slds-nubbin_bottom-left-corner::before, .slds-popover--brand-bottom.slds-nubbin--bottom-left-corner::before, .slds-popover_brand-bottom.slds-nubbin_bottom-right::before, .slds-popover--brand-bottom.slds-nubbin--bottom-right::before, .slds-popover_brand-bottom.slds-nubbin_bottom-right-corner::before, .slds-popover--brand-bottom.slds-nubbin--bottom-right-corner::before { margin-block-end: -0.1875rem; background: linear-gradient(135deg, transparent 50%, var(--slds-g-color-accent-container-1) 50%, var(--slds-g-color-accent-container-1)); } .slds-popover_brand-bottom.slds-nubbin_bottom::after, .slds-popover--brand-bottom.slds-nubbin--bottom::after, .slds-popover_brand-bottom.slds-nubbin_bottom-left::after, .slds-popover--brand-bottom.slds-nubbin--bottom-left::after, .slds-popover_brand-bottom.slds-nubbin_bottom-left-corner::after, .slds-popover--brand-bottom.slds-nubbin--bottom-left-corner::after, .slds-popover_brand-bottom.slds-nubbin_bottom-right::after, .slds-popover--brand-bottom.slds-nubbin--bottom-right::after, .slds-popover_brand-bottom.slds-nubbin_bottom-right-corner::after, .slds-popover--brand-bottom.slds-nubbin--bottom-right-corner::after { margin-block-end: -0.1875rem; background: linear-gradient(135deg, transparent 50%, transparent 50%, transparent); } .slds-popover_brand-bottom.slds-popover_brand-dark, .slds-popover--brand-bottom.slds-popover--brand-dark { border-block-end-color: var(--slds-g-color-brand-base-10); } .slds-popover_brand-bottom.slds-popover_brand-dark.slds-nubbin_bottom::before, .slds-popover--brand-bottom.slds-popover--brand-dark.slds-nubbin--bottom::before, .slds-popover_brand-bottom.slds-popover_brand-dark.slds-nubbin_bottom-left::before, .slds-popover--brand-bottom.slds-popover--brand-dark.slds-nubbin--bottom-left::before, .slds-popover_brand-bottom.slds-popover_brand-dark.slds-nubbin_bottom-left-corner::before, .slds-popover--brand-bottom.slds-popover--brand-dark.slds-nubbin--bottom-left-corner::before, .slds-popover_brand-bottom.slds-popover_brand-dark.slds-nubbin_bottom-right::before, .slds-popover--brand-bottom.slds-popover--brand-dark.slds-nubbin--bottom-right::before, .slds-popover_brand-bottom.slds-popover_brand-dark.slds-nubbin_bottom-right-corner::before, .slds-popover--brand-bottom.slds-popover--brand-dark.slds-nubbin--bottom-right-corner::before { margin-block-end: -0.1875rem; background: linear-gradient(135deg, transparent 50%, var(--slds-g-color-brand-base-10) 50%, var(--slds-g-color-brand-base-10)); } .slds-popover_brand-right, .slds-popover--brand-right { border-inline-end-width: 0.25rem; border-inline-end-color: var(--slds-g-color-border-accent-1); } .slds-popover_brand-right.slds-nubbin_right::before, .slds-popover--brand-right.slds-nubbin--right::before, .slds-popover_brand-right.slds-nubbin_right-top::before, .slds-popover--brand-right.slds-nubbin--right-top::before, .slds-popover_brand-right.slds-nubbin_right-top-corner::before, .slds-popover--brand-right.slds-nubbin--right-top-corner::before, .slds-popover_brand-right.slds-nubbin_right-bottom::before, .slds-popover--brand-right.slds-nubbin--right-bottom::before, .slds-popover_brand-right.slds-nubbin_right-bottom-corner::before, .slds-popover--brand-right.slds-nubbin--right-bottom-corner::before { margin-inline-end: -0.1875rem; background: linear-gradient(45deg, transparent 50%, var(--slds-g-color-accent-container-1) 50%, var(--slds-g-color-accent-container-1)); } .slds-popover_brand-right.slds-nubbin_right::after, .slds-popover--brand-right.slds-nubbin--right::after, .slds-popover_brand-right.slds-nubbin_right-top::after, .slds-popover--brand-right.slds-nubbin--right-top::after, .slds-popover_brand-right.slds-nubbin_right-top-corner::after, .slds-popover--brand-right.slds-nubbin--right-top-corner::after, .slds-popover_brand-right.slds-nubbin_right-bottom::after, .slds-popover--brand-right.slds-nubbin--right-bottom::after, .slds-popover_brand-right.slds-nubbin_right-bottom-corner::after, .slds-popover--brand-right.slds-nubbin--right-bottom-corner::after { margin-inline-end: -0.1875rem; background: linear-gradient(45deg, transparent 50%, transparent 50%, transparent); } .slds-popover_brand-right.slds-popover_brand-dark, .slds-popover--brand-right.slds-popover--brand-dark { border-inline-end-color: var(--slds-g-color-brand-base-10); } .slds-popover_brand-right.slds-popover_brand-dark.slds-nubbin_right::before, .slds-popover--brand-right.slds-popover--brand-dark.slds-nubbin--right::before, .slds-popover_brand-right.slds-popover_brand-dark.slds-nubbin_right-top::before, .slds-popover--brand-right.slds-popover--brand-dark.slds-nubbin--right-top::before, .slds-popover_brand-right.slds-popover_brand-dark.slds-nubbin_right-top-corner::before, .slds-popover--brand-right.slds-popover--brand-dark.slds-nubbin--right-top-corner::before, .slds-popover_brand-right.slds-popover_brand-dark.slds-nubbin_right-bottom::before, .slds-popover--brand-right.slds-popover--brand-dark.slds-nubbin--right-bottom::before, .slds-popover_brand-right.slds-popover_brand-dark.slds-nubbin_right-bottom-corner::before, .slds-popover--brand-right.slds-popover--brand-dark.slds-nubbin--right-bottom-corner::before { margin-inline-end: -0.1875rem; background: linear-gradient(45deg, transparent 50%, var(--slds-g-color-brand-base-10) 50%, var(--slds-g-color-brand-base-10)); } .slds-popover_panel .slds-popover__header, .slds-popover--panel .slds-popover__header { background: var(--sds-g-color-surface-container-2); padding-block: var(--slds-g-spacing-5) var(--slds-g-spacing-3); padding-inline: var(--slds-g-spacing-5); border-start-start-radius: calc(var(--slds-g-radius-border-2) - 1px); border-start-end-radius: calc(var(--slds-g-radius-border-2) - 1px); border-block-end: 0; } .slds-popover_panel .slds-popover__body, .slds-popover--panel .slds-popover__body { padding: 0; } .slds-popover_panel .slds-popover__body-list, .slds-popover--panel .slds-popover__body-list { padding-block: var(--slds-g-spacing-4); padding-inline: var(--slds-g-spacing-5); border-block-start: 1px solid var(--slds-g-color-neutral-base-90); } .slds-popover_panel.slds-nubbin_left-top::before, .slds-popover--panel.slds-nubbin--left-top::before, .slds-popover_panel.slds-nubbin_left-top::after, .slds-popover--panel.slds-nubbin--left-top::after, .slds-popover_panel.slds-nubbin--left-top::before, .slds-popover--panel.slds-nubbin--left-top::before, .slds-popover_panel.slds-nubbin--left-top::after, .slds-popover--panel.slds-nubbin--left-top::after, .slds-popover_panel.slds-nubbin_right-top::before, .slds-popover--panel.slds-nubbin--right-top::before, .slds-popover_panel.slds-nubbin_right-top::after, .slds-popover--panel.slds-nubbin--right-top::after, .slds-popover_panel.slds-nubbin--right-top::before, .slds-popover--panel.slds-nubbin--right-top::before, .slds-popover_panel.slds-nubbin--right-top::after, .slds-popover--panel.slds-nubbin--right-top::after, .slds-popover_panel.slds-nubbin_top-left::before, .slds-popover--panel.slds-nubbin--top-left::before, .slds-popover_panel.slds-nubbin_top-left::after, .slds-popover--panel.slds-nubbin--top-left::after, .slds-popover_panel.slds-nubbin--top-left::before, .slds-popover--panel.slds-nubbin--top-left::before, .slds-popover_panel.slds-nubbin--top-left::after, .slds-popover--panel.slds-nubbin--top-left::after, .slds-popover_panel.slds-nubbin_top-right::before, .slds-popover--panel.slds-nubbin--top-right::before, .slds-popover_panel.slds-nubbin_top-right::after, .slds-popover--panel.slds-nubbin--top-right::after, .slds-popover_panel.slds-nubbin--top-right::before, .slds-popover--panel.slds-nubbin--top-right::before, .slds-popover_panel.slds-nubbin--top-right::after, .slds-popover--panel.slds-nubbin--top-right::after { background: var(--slds-g-color-surface-container-2); } .slds-popover_panel.slds-nubbin_left-top::before, .slds-popover--panel.slds-nubbin--left-top::before, .slds-popover_panel.slds-nubbin_left-top::after, .slds-popover--panel.slds-nubbin--left-top::after, .slds-popover_panel.slds-nubbin--left-top::before, .slds-popover--panel.slds-nubbin--left-top::before, .slds-popover_panel.slds-nubbin--left-top::after, .slds-popover--panel.slds-nubbin--left-top::after, .slds-popover_panel.slds-nubbin_right-top::before, .slds-popover--panel.slds-nubbin--right-top::before, .slds-popover_panel.slds-nubbin_right-top::after, .slds-popover--panel.slds-nubbin--right-top::after, .slds-popover_panel.slds-nubbin--right-top::before, .slds-popover--panel.slds-nubbin--right-top::before, .slds-popover_panel.slds-nubbin--right-top::after, .slds-popover--panel.slds-nubbin--right-top::after { inset-block-start: var(--slds-g-spacing-7); } .slds-popover_panel__label, .slds-popover--panel__label { font-size: var(--slds-g-font-scale-1); font-weight: var(--slds-g-font-weight-7); } .slds-nubbin_top::before, .slds-nubbin--top::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-start: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); } .slds-nubbin_top::after, .slds-nubbin--top::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-start: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_top-left::before, .slds-nubbin--top-left::before, .slds-nubbin_top-left-corner::before, .slds-nubbin--top-left-corner::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-start: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); } .slds-nubbin_top-left::after, .slds-nubbin--top-left::after, .slds-nubbin_top-left-corner::after, .slds-nubbin--top-left-corner::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-start: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_top-left::before, .slds-nubbin--top-left::before, .slds-nubbin_top-left::after, .slds-nubbin--top-left::after, .slds-nubbin_top-left-corner::before, .slds-nubbin--top-left-corner::before, .slds-nubbin_top-left-corner::after, .slds-nubbin--top-left-corner::after { inset-inline-start: var(--slds-g-spacing-5); inset-block-start: calc((1rem * 0.5) * -1); } .slds-nubbin_top-right::before, .slds-nubbin--top-right::before, .slds-nubbin_top-right-corner::before, .slds-nubbin--top-right-corner::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-start: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); } .slds-nubbin_top-right::after, .slds-nubbin--top-right::after, .slds-nubbin_top-right-corner::after, .slds-nubbin--top-right-corner::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-start: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_top-right::before, .slds-nubbin--top-right::before, .slds-nubbin_top-right::after, .slds-nubbin--top-right::after, .slds-nubbin_top-right-corner::before, .slds-nubbin--top-right-corner::before, .slds-nubbin_top-right-corner::after, .slds-nubbin--top-right-corner::after { inset-inline-start: auto; inset-inline-end: var(--slds-g-spacing-5); inset-block-start: calc((1rem * 0.5) * -1); margin-inline-end: calc((1rem * 0.5) * -1); } .slds-nubbin_bottom::before, .slds-nubbin--bottom::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-end: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); } .slds-nubbin_bottom::after, .slds-nubbin--bottom::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-end: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_bottom-left::before, .slds-nubbin--bottom-left::before, .slds-nubbin_bottom-left-corner::before, .slds-nubbin--bottom-left-corner::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-end: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); } .slds-nubbin_bottom-left::after, .slds-nubbin--bottom-left::after, .slds-nubbin_bottom-left-corner::after, .slds-nubbin--bottom-left-corner::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-end: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_bottom-left::before, .slds-nubbin--bottom-left::before, .slds-nubbin_bottom-left::after, .slds-nubbin--bottom-left::after, .slds-nubbin_bottom-left-corner::before, .slds-nubbin--bottom-left-corner::before, .slds-nubbin_bottom-left-corner::after, .slds-nubbin--bottom-left-corner::after { inset-inline-start: var(--slds-g-spacing-5); inset-block-start: 100%; margin-block-start: calc((1rem * 0.5) * -1); } .slds-nubbin_bottom-right::before, .slds-nubbin--bottom-right::before, .slds-nubbin_bottom-right-corner::before, .slds-nubbin--bottom-right-corner::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-end: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); } .slds-nubbin_bottom-right::after, .slds-nubbin--bottom-right::after, .slds-nubbin_bottom-right-corner::after, .slds-nubbin--bottom-right-corner::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-inline-start: 50%; inset-block-end: calc((1rem * 0.5) * -1); margin-inline-start: calc((1rem * 0.5) * -1); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_bottom-right::before, .slds-nubbin--bottom-right::before, .slds-nubbin_bottom-right::after, .slds-nubbin--bottom-right::after, .slds-nubbin_bottom-right-corner::before, .slds-nubbin--bottom-right-corner::before, .slds-nubbin_bottom-right-corner::after, .slds-nubbin--bottom-right-corner::after { inset-inline-start: auto; inset-inline-end: var(--slds-g-spacing-5); inset-block-start: 100%; margin-block-start: calc((1rem * 0.5) * -1); margin-inline-end: calc((1rem * 0.5) * -1); } .slds-nubbin_left::before, .slds-nubbin--left::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-start: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); } .slds-nubbin_left::after, .slds-nubbin--left::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-start: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_left-top::before, .slds-nubbin--left-top::before, .slds-nubbin_left-top-corner::before, .slds-nubbin--left-top-corner::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-start: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); } .slds-nubbin_left-top::after, .slds-nubbin--left-top::after, .slds-nubbin_left-top-corner::after, .slds-nubbin--left-top-corner::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-start: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_left-top::before, .slds-nubbin--left-top::before, .slds-nubbin_left-top::after, .slds-nubbin--left-top::after, .slds-nubbin_left-top-corner::before, .slds-nubbin--left-top-corner::before, .slds-nubbin_left-top-corner::after, .slds-nubbin--left-top-corner::after { inset-block-start: var(--slds-g-spacing-5); } .slds-nubbin_left-bottom::before, .slds-nubbin--left-bottom::before, .slds-nubbin_left-bottom-corner::before, .slds-nubbin--left-bottom-corner::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-start: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); margin-block-end: -1px; } .slds-nubbin_left-bottom::after, .slds-nubbin--left-bottom::after, .slds-nubbin_left-bottom-corner::after, .slds-nubbin--left-bottom-corner::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-start: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_left-bottom::before, .slds-nubbin--left-bottom::before, .slds-nubbin_left-bottom::after, .slds-nubbin--left-bottom::after, .slds-nubbin_left-bottom-corner::before, .slds-nubbin--left-bottom-corner::before, .slds-nubbin_left-bottom-corner::after, .slds-nubbin--left-bottom-corner::after { inset-block-start: auto; inset-block-end: var(--slds-g-spacing-4); } .slds-nubbin_right::before, .slds-nubbin--right::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-end: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); } .slds-nubbin_right::after, .slds-nubbin--right::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-end: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_right-top::before, .slds-nubbin--right-top::before, .slds-nubbin_right-top-corner::before, .slds-nubbin--right-top-corner::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-end: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); } .slds-nubbin_right-top::after, .slds-nubbin--right-top::after, .slds-nubbin_right-top-corner::after, .slds-nubbin--right-top-corner::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-end: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_right-top::before, .slds-nubbin--right-top::before, .slds-nubbin_right-top::after, .slds-nubbin--right-top::after, .slds-nubbin_right-top-corner::before, .slds-nubbin--right-top-corner::before, .slds-nubbin_right-top-corner::after, .slds-nubbin--right-top-corner::after { inset-block-start: var(--slds-g-spacing-5); } .slds-nubbin_right-bottom::before, .slds-nubbin--right-bottom::before, .slds-nubbin_right-bottom-corner::before, .slds-nubbin--right-bottom-corner::before { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-end: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); margin-bottom: -1px; } .slds-nubbin_right-bottom::after, .slds-nubbin--right-bottom::after, .slds-nubbin_right-bottom-corner::after, .slds-nubbin--right-bottom-corner::after { width: 1rem; height: 1rem; position: absolute; transform: rotate(45deg); content: ''; background-color: inherit; inset-block-start: 50%; inset-inline-end: calc((1rem * 0.5) * -1); margin-block-start: calc((1rem * 0.5) * -1); box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16); z-index: -1; } .slds-nubbin_right-bottom::before, .slds-nubbin--right-bottom::before, .slds-nubbin_right-bottom::after, .slds-nubbin--right-bottom::after, .slds-nubbin_right-bottom-corner::before, .slds-nubbin--right-bottom-corner::before, .slds-nubbin_right-bottom-corner::after, .slds-nubbin--right-bottom-corner::after { inset-block-start: auto; inset-block-end: 1rem; } .slds-nubbin_top-left-corner, .slds-nubbin--top-left-corner { border-radius: var(--slds-g-radius-border-1) var(--slds-g-radius-border-2) var(--slds-g-radius-border-2); } .slds-nubbin_top-left-corner::before, .slds-nubbin--top-left-corner::before, .slds-nubbin_top-left-corner::after, .slds-nubbin--top-left-corner::after { inset-inline-start: var(--slds-g-spacing-3); } .slds-nubbin_bottom-left-corner, .slds-nubbin--bottom-left-corner { border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-1); border-end-end-radius: var(--slds-g-radius-border-2); } .slds-nubbin_bottom-left-corner::before, .slds-nubbin--bottom-left-corner::before, .slds-nubbin_bottom-left-corner::after, .slds-nubbin--bottom-left-corner::after { inset-inline-start: var(--slds-g-spacing-3); } .slds-nubbin_top-right-corner, .slds-nubbin--top-right-corner { border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: var(--slds-g-radius-border-1); border-end-start-radius: var(--slds-g-radius-border-2); border-end-end-radius: var(--slds-g-radius-border-2); } .slds-nubbin_top-right-corner::before, .slds-nubbin--top-right-corner::before, .slds-nubbin_top-right-corner::after, .slds-nubbin--top-right-corner::after { inset-inline-end: var(--slds-g-spacing-3); } .slds-nubbin_bottom-right-corner, .slds-nubbin--bottom-right-corner { border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-2); border-end-end-radius: var(--slds-g-radius-border-1); } .slds-nubbin_bottom-right-corner::before, .slds-nubbin--bottom-right-corner::before, .slds-nubbin_bottom-right-corner::after, .slds-nubbin--bottom-right-corner::after { inset-inline-end: var(--slds-g-spacing-3); } .slds-nubbin_left-top-corner, .slds-nubbin--left-top-corner { border-start-start-radius: var(--slds-g-radius-border-1); border-start-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-2); border-end-end-radius: var(--slds-g-radius-border-2); } .slds-nubbin_left-top-corner::before, .slds-nubbin--left-top-corner::before, .slds-nubbin_left-top-corner::after, .slds-nubbin--left-top-corner::after { inset-block-start: var(--slds-g-spacing-3); } .slds-nubbin_right-top-corner, .slds-nubbin--right-top-corner { border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: var(--slds-g-radius-border-1); border-end-start-radius: var(--slds-g-radius-border-2); border-end-end-radius: var(--slds-g-radius-border-2); } .slds-nubbin_right-top-corner::before, .slds-nubbin--right-top-corner::before, .slds-nubbin_right-top-corner::after, .slds-nubbin--right-top-corner::after { inset-block-start: var(--slds-g-spacing-3); } .slds-nubbin_left-bottom-corner, .slds-nubbin--left-bottom-corner { border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-1); border-end-end-radius: var(--slds-g-radius-border-2); } .slds-nubbin_left-bottom-corner::before, .slds-nubbin--left-bottom-corner::before, .slds-nubbin_left-bottom-corner::after, .slds-nubbin--left-bottom-corner::after { inset-block-end: var(--slds-g-spacing-1); } .slds-nubbin_right-bottom-corner, .slds-nubbin--right-bottom-corner { border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-2); border-end-end-radius: var(--slds-g-radius-border-1); } .slds-nubbin_right-bottom-corner::before, .slds-nubbin--right-bottom-corner::before, .slds-nubbin_right-bottom-corner::after, .slds-nubbin--right-bottom-corner::after { inset-block-end: var(--slds-g-spacing-1); } .slds-popover_error .slds-popover__header, .slds-popover--error .slds-popover__header { background-color: var(--slds-g-color-error-container-1); color: var(--slds-g-color-on-error-1); padding-inline-start: var(--slds-g-spacing-3); } .slds-popover_error .slds-popover__header .slds-icon, .slds-popover--error .slds-popover__header .slds-icon { fill: currentColor; } .slds-popover_error .slds-popover__close, .slds-popover--error .slds-popover__close { --slds-c-icon-color-foreground: var(--slds-g-color-on-error-1); color: var(--slds-g-color-on-error-1); } .slds-popover_error .slds-button_icon:hover, .slds-popover--error .slds-button--icon:hover, .slds-popover_error .slds-button_icon:focus-visible, .slds-popover--error .slds-button--icon:focus-visible { color: var(--slds-s-alert-close-button-hover, color-mix(in oklab, currentColor, transparent 25%)); } .slds-popover_error .slds-popover__footer, .slds-popover--error .slds-popover__footer { background-color: transparent; } .slds-popover_error .slds-popover__footer .slds-button, .slds-popover--error .slds-popover__footer .slds-button { text-decoration: none; } .slds-popover_error .slds-popover__footer .slds-button.slds-button_neutral, .slds-popover--error .slds-popover__footer .slds-button.slds-button--neutral { color: var(--slds-g-color-accent-2); } .slds-popover_error.slds-nubbin_top::before, .slds-popover--error.slds-nubbin--top::before, .slds-popover_error.slds-nubbin_top-left::before, .slds-popover--error.slds-nubbin--top-left::before, .slds-popover_error.slds-nubbin_top-right::before, .slds-popover--error.slds-nubbin--top-right::before, .slds-popover_error.slds-nubbin_left-top::before, .slds-popover--error.slds-nubbin--left-top::before, .slds-popover_error.slds-nubbin_right-top::before, .slds-popover--error.slds-nubbin--right-top::before { background-color: var(--slds-g-color-error-container-1); } .slds-popover_error .slds-popover__body, .slds-popover--error .slds-popover__body { padding-inline-start: var(--slds-g-spacing-7); } .slds-popover_error .slds-popover__header, .slds-popover--error .slds-popover__header, .slds-popover_warning .slds-popover__header, .slds-popover--warning .slds-popover__header { border-start-start-radius: calc(var(--slds-g-radius-border-2) - 1px); border-start-end-radius: calc(var(--slds-g-radius-border-2) - 1px); border-end-start-radius: 0; border-end-end-radius: 0; } .slds-popover_error .slds-popover__body_scrollable, .slds-popover--error .slds-popover__body--scrollable, .slds-popover_warning .slds-popover__body_scrollable, .slds-popover--warning .slds-popover__body--scrollable { max-height: 150px; overflow-y: auto; border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-90); } .slds-popover_error .slds-popover__body_scrollable + .slds-popover__footer, .slds-popover--error .slds-popover__body--scrollable + .slds-popover__footer, .slds-popover_warning .slds-popover__body_scrollable + .slds-popover__footer, .slds-popover--warning .slds-popover__body--scrollable + .slds-popover__footer { border-block-start: 0; } .slds-popover_warning button, .slds-popover--warning button { color: var(--slds-g-color-neutral-base-30); text-decoration: underline; } .slds-popover_warning button:hover, .slds-popover--warning button:hover { color: var(--slds-g-color-neutral-base-50); } .slds-popover_warning button:focus, .slds-popover--warning button:focus { color: var(--slds-g-color-neutral-base-30); } .slds-popover_warning button:active, .slds-popover--warning button:active { color: var(--slds-g-color-neutral-base-50); } .slds-popover_warning .slds-popover__header, .slds-popover--warning .slds-popover__header { background-color: var(--slds-g-color-warning-container-1); color: var(--slds-g-color-on-warning-1); } .slds-popover_warning .slds-popover__header .slds-icon, .slds-popover--warning .slds-popover__header .slds-icon { fill: currentColor; } .slds-popover_warning .slds-button_icon, .slds-popover--warning .slds-button--icon { --slds-c-icon-color-foreground: var(--slds-g-color-on-warning-1); color: var(--slds-g-color-on-warning-1); } .slds-popover_warning .slds-button_icon:hover, .slds-popover--warning .slds-button--icon:hover, .slds-popover_warning .slds-button_icon:focus-visible, .slds-popover--warning .slds-button--icon:focus-visible { color: var(--slds-s-alert-close-button-hover, color-mix(in oklab, currentColor, transparent 25%)); } .slds-popover_warning.slds-nubbin_top::before, .slds-popover--warning.slds-nubbin--top::before, .slds-popover_warning.slds-nubbin_top-left::before, .slds-popover--warning.slds-nubbin--top-left::before, .slds-popover_warning.slds-nubbin_top-right::before, .slds-popover--warning.slds-nubbin--top-right::before, .slds-popover_warning.slds-nubbin_left-top::before, .slds-popover--warning.slds-nubbin--left-top::before, .slds-popover_warning.slds-nubbin_right-top::before, .slds-popover--warning.slds-nubbin--right-top::before { background-color: var(--slds-g-color-warning-container-1); } .slds-popover_warning .slds-popover__body, .slds-popover--warning .slds-popover__body { padding-inline-start: var(--slds-g-spacing-7); } .slds-popover_warning .slds-popover__footer, .slds-popover--warning .slds-popover__footer { background-color: transparent; } .slds-popover_warning .slds-popover__footer .slds-button, .slds-popover--warning .slds-popover__footer .slds-button { text-decoration: none; } .slds-popover_warning .slds-popover__footer .slds-button.slds-button_neutral, .slds-popover--warning .slds-popover__footer .slds-button.slds-button--neutral { color: var(--slds-g-color-accent-2); } .slds-popover_prompt, .slds-popover--prompt { width: calc(var(--slds-g-sizing-15) + var(--slds-g-sizing-12)); } .slds-popover_prompt .slds-popover__body, .slds-popover--prompt .slds-popover__body { padding: var(--slds-g-spacing-4); } .slds-popover_prompt .slds-popover__footer, .slds-popover--prompt .slds-popover__footer { border-block-start: inherit; } .slds-popover_prompt__heading, .slds-popover--prompt__heading { font-size: var(--slds-s-container-heading-font-size, var(--slds-g-font-scale-2)); line-height: var(--slds-g-font-lineheight-2); font-weight: var(--_slds-c-popover-prompt-heading-font-weight, var(--slds-g-font-weight-7)); } .slds-popover_prompt__action-link, .slds-popover--prompt__action-link { margin-inline-end: var(--slds-g-spacing-4); } .slds-popover_prompt_top, .slds-popover--prompt--top, .slds-popover_prompt_top-right, .slds-popover--prompt--top-right, .slds-popover_prompt_top-left, .slds-popover--prompt--top-left, .slds-popover_prompt_bottom, .slds-popover--prompt--bottom, .slds-popover_prompt_bottom-right, .slds-popover--prompt--bottom-right, .slds-popover_prompt_bottom-left, .slds-popover--prompt--bottom-left { position: absolute; } .slds-popover_prompt_top, .slds-popover--prompt--top, .slds-popover_prompt_top-right, .slds-popover--prompt--top-right, .slds-popover_prompt_top-left, .slds-popover--prompt--top-left { inset-block-start: var(--slds-g-spacing-2); } .slds-popover_prompt_bottom, .slds-popover--prompt--bottom, .slds-popover_prompt_bottom-right, .slds-popover--prompt--bottom-right, .slds-popover_prompt_bottom-left, .slds-popover--prompt--bottom-left { inset-block-end: var(--slds-g-spacing-2); } .slds-popover_prompt_top, .slds-popover--prompt--top, .slds-popover_prompt_bottom, .slds-popover--prompt--bottom { inset-inline-start: 50%; margin-inline-start: calc(((var(--slds-g-sizing-15) + var(--slds-g-sizing-12)) * 0.5) * -1); } .slds-popover_prompt_top-right, .slds-popover--prompt--top-right, .slds-popover_prompt_bottom-right, .slds-popover--prompt--bottom-right { inset-inline-end: var(--slds-g-spacing-2); } .slds-popover_prompt_top-left, .slds-popover--prompt--top-left, .slds-popover_prompt_bottom-left, .slds-popover--prompt--bottom-left { inset-inline-start: var(--slds-g-spacing-2); } .slds-tooltip { position: relative; border-radius: var(--slds-g-radius-border-2); width: var(--slds-g-sizing-15); min-height: calc(1rem * 2); z-index: var(--slds-c-popover-position-zindex, 6000); background-color: var(--slds-g-color-surface-inverse-1); display: inline-block; } .slds-tooltip__body { padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); font-size: var(--slds-g-font-scale-neg-1); color: var(--slds-g-color-on-surface-inverse-1); } .slds-popover_tooltip, .slds-popover--tooltip { --slds-c-tooltip-sizing-width-max: var(--slds-c-tooltip-sizing-width-max); width: auto; max-width: var(--slds-c-tooltip-sizing-width-max, var(--slds-g-sizing-15)); background-color: var(--slds-c-tooltip-color-background, var(--slds-g-color-surface-inverse-1)); border: 0; } .slds-popover_tooltip .slds-popover__body, .slds-popover--tooltip .slds-popover__body { font-size: var(--slds-c-tooltip-font-size, var(--slds-g-font-scale-neg-1)); color: var(--slds-c-tooltip-text-color, var(--slds-g-color-on-surface-inverse-1)); } .slds-popover_tooltip .slds-icon-text-default, .slds-popover--tooltip .slds-icon-text-default { --slds-c-icon-color-foreground: var(--slds-g-color-on-accent-1); } .slds-rise-from-ground { visibility: visible; opacity: 1; transform: translate(0%, 0%); transition: opacity 0.1s linear, visibility 0.1s linear, transform 0.1s linear; will-change: transform; } .slds-fall-into-ground { visibility: hidden; opacity: 0; transform: translate(0%, 0%); transition: opacity 0.1s linear, visibility 0.1s linear, transform 0.1s linear; will-change: transform; } .slds-slide-from-bottom-to-top { transform: translateY(10%); will-change: transform; } .slds-slide-from-top-to-bottom { transform: translateY(-10%); will-change: transform; } .slds-slide-from-right-to-left { transform: translateX(5%); will-change: transform; } .slds-slide-from-left-to-right { transform: translateX(-5%); will-change: transform; } a [icon-name='utility:info'] .slds-icon-text-default { --slds-c-icon-color-foreground-default: var(--slds-s-button-color, var(--slds-g-color-on-surface-1)); } a:hover [icon-name='utility:info'] .slds-icon-text-default, a:focus [icon-name='utility:info'] .slds-icon-text-default { --slds-c-icon-color-foreground-default: var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)); } .slds-dropdown-trigger { position: relative; display: inline-block; } .slds-dropdown-trigger .slds-dropdown { inset-block-start: 100%; } .slds-dropdown-trigger .slds-dropdown_bottom, .slds-dropdown-trigger .slds-dropdown--bottom { inset-block-start: auto; } .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'], .slds-dropdown-trigger > [class*='slds-button--icon'] ~ .slds-dropdown--left[class*='slds-nubbin'] { inset-inline-start: calc(var(--slds-g-spacing-2) * -1); } .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'], .slds-dropdown-trigger > [class*='slds-button--icon'] ~ .slds-dropdown--right[class*='slds-nubbin'] { inset-inline-end: calc(var(--slds-g-spacing-2) * -1); } .slds-dropdown-trigger_hover .slds-dropdown, .slds-dropdown-trigger--hover .slds-dropdown { visibility: hidden; opacity: 0; transition: opacity var(0.1s) linear, visibility var(0.1s) linear; } .slds-dropdown-trigger_hover:hover, .slds-dropdown-trigger--hover:hover, .slds-dropdown-trigger_hover:focus, .slds-dropdown-trigger--hover:focus { outline: 0; } .slds-dropdown-trigger_hover:hover .slds-dropdown, .slds-dropdown-trigger--hover:hover .slds-dropdown, .slds-dropdown-trigger_hover:focus .slds-dropdown, .slds-dropdown-trigger--hover:focus .slds-dropdown { visibility: visible; opacity: 1; transition: opacity var(0.1s) linear, visibility var(0.1s) linear; } .slds-dropdown-trigger_click .slds-dropdown, .slds-dropdown-trigger--click .slds-dropdown, .slds-dropdown-trigger_click:hover .slds-dropdown, .slds-dropdown-trigger--click:hover .slds-dropdown { display: none; } .slds-dropdown-trigger_click.slds-is-open .slds-dropdown, .slds-dropdown-trigger--click.slds-is-open .slds-dropdown { display: block; visibility: visible; opacity: 1; } .slds-dropdown { position: absolute; z-index: 7000; left: 50%; transform: translateX(-50%); float: inline-start; min-width: calc(var(--slds-g-sizing-5) * 6); max-width: var(--slds-g-sizing-15); margin-block-start: calc(var(--slds-g-spacing-1) / 2); margin-block-end: calc(var(--slds-g-spacing-1)) / 2; border-radius: var(--slds-g-radius-border-2); padding-block: var(--slds-g-spacing-1); padding-inline: 0; font-size: var(--slds-g-font-scale-neg-1); background-color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-g-shadow-2); color: var(--slds-g-color-on-surface-2); } .slds-dropdown mark { font-weight: var(--slds-g-font-weight-7); background-color: transparent; color: inherit; } .slds-dropdown[class*='slds-nubbin_top'], .slds-dropdown[class*='slds-nubbin--top'] { margin-block-start: var(--slds-g-spacing-2); } .slds-dropdown[class*='slds-nubbin_bottom'], .slds-dropdown[class*='slds-nubbin--bottom'] { margin-block-end: var(--slds-g-spacing-2); } .slds-dropdown:focus-visible { outline: 0; box-shadow: var(--slds-g-shadow-outline-focus-1); } .slds-dropdown_inverse, .slds-dropdown--inverse { background: var(--slds-g-color-surface-inverse-2); border-color: var(--slds-g-color-brand-base-10); color: var(--slds-g-color-surface-container-1); } .slds-dropdown_inverse .slds-dropdown__item > a, .slds-dropdown--inverse .slds-dropdown__item > a { color: var(--slds-g-color-surface-container-1); } .slds-dropdown_inverse .slds-dropdown__item > a:hover, .slds-dropdown--inverse .slds-dropdown__item > a:hover, .slds-dropdown_inverse .slds-dropdown__item > a:focus, .slds-dropdown--inverse .slds-dropdown__item > a:focus { color: var(--slds-g-color-on-surface-inverse-2); background-color: transparent; } .slds-dropdown_inverse .slds-dropdown__item > a:active, .slds-dropdown--inverse .slds-dropdown__item > a:active { color: var(--slds-g-color-neutral-base-80); background-color: transparent; } .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled='true'], .slds-dropdown--inverse .slds-dropdown__item > a[aria-disabled='true'] { color: var(--slds-g-color-palette-blue-20); cursor: default; } .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled='true']:hover, .slds-dropdown--inverse .slds-dropdown__item > a[aria-disabled='true']:hover { background-color: transparent; } .slds-dropdown__header { font-size: var(--slds-g-font-scale-neg-1); font-weight: var(--slds-g-font-weight-6); padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); } .slds-dropdown__header:focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); outline: 0; border-radius: 6px; } .slds-dropdown__item { line-height: var(--slds-g-font-lineheight-base); font-weight: var(--slds-g-font-weight-4); } .slds-dropdown__item > a { position: relative; display: flex; justify-content: space-between; align-items: center; padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); color: var(--slds-g-color-on-surface-2); white-space: nowrap; cursor: pointer; } .slds-dropdown__item > a:hover, .slds-dropdown__item > a:focus { outline: 0; text-decoration: none; background-color: var(--slds-s-menu-item-color-background-active, var(--slds-g-color-surface-container-2)); box-shadow: none; } .slds-dropdown__item > a:not([aria-disabled='true']):focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); outline: 0; border-radius: 6px; } .slds-dropdown__item > a:active { text-decoration: none; background-color: var(--slds-s-menu-item-color-background-active, var(--slds-g-color-surface-container-2)); } .slds-dropdown__item > a[aria-disabled='true'] { color: var(--slds-g-color-disabled-2); cursor: default; } .slds-dropdown__item > a[aria-disabled='true']:hover { background-color: transparent; } .slds-dropdown__item > a[aria-disabled='true'] .slds-icon { fill: var(--slds-g-color-disabled-2); } .slds-dropdown__item > a.slds-has-error { --slds-c-icon-color-foreground: var(--slds-g-color-on-error-1); color: var(--slds-g-color-on-error-1); background: var(--slds-g-color-error-container-1); } .slds-dropdown__item > a.slds-has-success { --slds-c-icon-color-foreground: var(--slds-g-color-on-success-1); color: var(--slds-g-color-on-success-1); background: var(--slds-g-color-success-container-1); } .slds-dropdown__item > a.slds-has-warning { color: var(--slds-g-color-on-warning-1); background: var(--slds-g-color-warning-container-1); } .slds-dropdown__item > a.slds-has-warning .slds-indicator_unread, .slds-dropdown__item > a.slds-has-warning .slds-indicator--unread { background-color: currentColor; } .slds-dropdown__item > a.slds-has-warning .slds-indicator_unsaved, .slds-dropdown__item > a.slds-has-warning .slds-indicator--unsaved { color: currentColor; } .slds-dropdown__item > a.slds-has-error:hover, .slds-dropdown__item > a.slds-has-error:focus, .slds-dropdown__item > a.slds-has-success:hover, .slds-dropdown__item > a.slds-has-success:focus, .slds-dropdown__item > a.slds-has-warning:hover, .slds-dropdown__item > a.slds-has-warning:focus { text-decoration: underline; } .slds-dropdown__item > a.slds-has-error:focus-visible, .slds-dropdown__item > a.slds-has-success:focus-visible, .slds-dropdown__item > a.slds-has-warning:focus-visible { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); } .slds-dropdown__item .slds-icon_selected, .slds-dropdown__item .slds-icon--selected { --slds-c-icon-color-foreground: var(--slds-g-color-accent-2); opacity: 0; transition: opacity 0.05s ease; } .slds-dropdown__item.slds-is-selected .slds-icon_selected, .slds-dropdown__item.slds-is-selected .slds-icon--selected, .slds-dropdown__item.slds-is-selected .slds-icon--selected { opacity: 1; } .slds-dropdown__item.slds-has-notification .slds-indicator_unsaved, .slds-dropdown__item.slds-has-notification .slds-indicator--unsaved { inset-block-start: -0.375rem; } .slds-dropdown_left, .slds-dropdown--left { inset-inline-start: 0; inset-inline-end: auto; transform: translateX(0); } .slds-dropdown_right, .slds-dropdown--right { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(0); } .slds-dropdown_bottom, .slds-dropdown--bottom { inset-block-end: 100%; } .slds-dropdown_xx-small, .slds-dropdown--xx-small { min-width: calc(var(--slds-g-sizing-5) * 6); } .slds-dropdown_x-small, .slds-dropdown--x-small { min-width: calc(var(--slds-g-sizing-9) * 6); } .slds-dropdown_small, .slds-dropdown--small { min-width: var(--slds-g-sizing-14); } .slds-dropdown_medium, .slds-dropdown--medium { min-width: var(--slds-g-sizing-15); } .slds-dropdown_large, .slds-dropdown--large { min-width: calc(var(--slds-g-sizing-12) * 5); } .slds-dropdown_fluid, .slds-dropdown--fluid { min-width: calc(var(--slds-g-sizing-5) * 12); max-width: 100%; width: 100%; } .slds-dropdown_length-5, .slds-dropdown--length-5 { max-height: calc((var(--slds-g-sizing-5) * var(--slds-g-font-lineheight-base) + var(--slds-g-spacing-4)) * 5); overflow-y: auto; } .slds-dropdown_length-7, .slds-dropdown--length-7 { max-height: calc((var(--slds-g-sizing-5) * var(--slds-g-font-lineheight-base) + var(--slds-g-spacing-4)) * 7); overflow-y: auto; } .slds-dropdown_length-10, .slds-dropdown--length-10 { max-height: calc((var(--slds-g-sizing-5) * var(--slds-g-font-lineheight-base) + var(--slds-g-spacing-4)) * 10); overflow-y: auto; } .slds-dropdown_length-with-icon-5, .slds-dropdown--length-with-icon-5 { max-height: calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 5); overflow-y: auto; } .slds-dropdown_length-with-icon-7, .slds-dropdown--length-with-icon-7 { max-height: calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 7); overflow-y: auto; } .slds-dropdown_length-with-icon-10, .slds-dropdown--length-with-icon-10 { max-height: calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 10); overflow-y: auto; } [dir='rtl'] .slds-dropdown_center, [dir='rtl'] .slds-dropdown--center { inset-inline-start: auto; inset-inline-end: auto; transform: translateX(calc(50% - (0.875rem / 2))); } .slds-has-submenu { position: relative; } .slds-has-submenu .slds-dropdown_submenu, .slds-has-submenu .slds-dropdown--submenu { inset-block-start: 0; transform: none; } .slds-has-submenu .slds-dropdown_submenu-left, .slds-has-submenu .slds-dropdown--submenu-left { inset-inline-start: auto; inset-inline-end: 100%; margin-inline-end: var(--slds-g-spacing-1); } .slds-has-submenu .slds-dropdown_submenu-right, .slds-has-submenu .slds-dropdown--submenu-right { inset-inline-start: 100%; margin-inline-start: var(--slds-g-spacing-1); } .slds-has-submenu .slds-dropdown_submenu-bottom, .slds-has-submenu .slds-dropdown--submenu-bottom { inset-block-start: auto; inset-block-end: 0; margin-block-end: calc(var(--slds-g-spacing-1) * -1); } .slds-has-submenu.slds-dropdown__item .slds-dropdown_submenu, .slds-has-submenu.slds-dropdown__item .slds-dropdown--submenu { display: none; } .slds-has-submenu [role='menuitem'][aria-expanded='true'] + .slds-dropdown_submenu, .slds-has-submenu [role='menuitem'][aria-expanded='true'] + .slds-dropdown--submenu { display: block; } .slds-dropdown_actions a, .slds-dropdown--actions a { color: var(--slds-g-color-neutral-base-10); } .slds-picklist { position: relative; } .slds-picklist .slds-dropdown { width: var(--slds-g-sizing-14); } .slds-picklist li .slds-icon_selected, .slds-picklist li .slds-icon--selected { opacity: 0; transition: opacity 0.05s ease; } .slds-picklist li.slds-is-selected .slds-icon_selected, .slds-picklist li.slds-is-selected .slds-icon--selected { fill: var(--slds-g-color-accent-2); opacity: 1; } .slds-picklist input[readonly] { padding-left: var(--slds-g-spacing-3); border-color: var(--slds-s-input-color-border, var(--slds-g-color-border-2)); background-color: var(--slds-s-input-color-background, var(--slds-g-color-surface-container-1)); font-size: inherit; font-weight: var(--slds-g-font-weight-4); } .slds-picklist input[readonly]:focus-visible, .slds-picklist input[readonly].slds-has-focus { box-shadow: var(--slds-g-shadow-outline-focus-1); } .slds-picklist input[readonly][disabled] { background-color: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1)); border-color: var(--slds-s-input-color-border-disabled, var(--slds-g-color-border-disabled-1)); } .slds-picklist_fluid .slds-picklist__input, .slds-picklist--fluid .slds-picklist__input, .slds-picklist_fluid .slds-picklist__label, .slds-picklist--fluid .slds-picklist__label, .slds-picklist_fluid .slds-dropdown, .slds-picklist--fluid .slds-dropdown, .slds-picklist_fluid .slds-lookup, .slds-picklist--fluid .slds-lookup { width: auto; min-width: 0; max-width: var(--slds-g-sizing-14); } .slds-picklist__input { width: var(--slds-g-sizing-14); } .slds-picklist__input .slds-button { line-height: 0; } .slds-picklist__label { padding-right: var(--slds-g-spacing-6); width: var(--slds-g-sizing-14); color: var(--slds-g-color-on-surface-3); text-align: left; } .slds-picklist__label .slds-icon { width: var(--slds-g-sizing-4); height: var(--slds-g-sizing-4); position: absolute; right: var(--slds-g-spacing-4); top: 50%; margin-top: -0.375rem; fill: var(--slds-g-color-on-surface-1); } .slds-picklist__label .slds-truncate { display: block; } .slds-combobox_container, .slds-combobox--container { display: flex; flex-direction: column; position: relative; } .slds-combobox_container.slds-is-open .slds-dropdown, .slds-combobox--container.slds-is-open .slds-dropdown { display: block; } .slds-combobox_container.slds-has-selection .slds-combobox__input-value, .slds-combobox--container.slds-has-selection .slds-combobox__input-value, .slds-combobox_container.slds-has-selection .slds-combobox__input-value:focus, .slds-combobox--container.slds-has-selection .slds-combobox__input-value:focus { box-shadow: var(--slds-g-shadow-outline-focus-1); border-color: transparent; } .slds-combobox_container[invalid], .slds-combobox--container[invalid] { --slds-c-input-color-background: var(--slds-s-input-color-background-invalid); --slds-c-input-text-color: var(--slds-s-input-color-invalid); --slds-c-input-color-border: var(--slds-g-color-border-error-1); --slds-c-input-shadow: var(--slds-s-input-shadow-invalid); } .slds-combobox_container.slds-has-icon-only .slds-combobox__input, .slds-combobox--container.slds-has-icon-only .slds-combobox__input, .slds-combobox_container.slds-has-icon-only .slds-combobox__input:focus, .slds-combobox--container.slds-has-icon-only .slds-combobox__input:focus, .slds-combobox_container.slds-has-icon-only .slds-combobox__input.slds-has-focus, .slds-combobox--container.slds-has-icon-only .slds-combobox__input.slds-has-focus { width: 0; pointer-events: auto; } .slds-combobox_container.slds-has-icon-only .slds-input__icon, .slds-combobox--container.slds-has-icon-only .slds-input__icon { z-index: 2; pointer-events: none; } .slds-combobox { position: static; display: flex; flex-direction: column; flex: 1 1 auto; } .slds-combobox__form-element { flex: 1 1 auto; } [role='combobox'] input[readonly], input[readonly][role='combobox'] { padding-inline-start: var(--slds-g-spacing-3); border-color: var(--slds-g-color-border-2); background-color: var(--slds-g-color-surface-container-1); font-size: inherit; } [role='combobox'] input[readonly]:focus-visible, [role='combobox'] input[readonly].slds-has-focus, input[readonly][role='combobox']:focus-visible, input[readonly][role='combobox'].slds-has-focus { border-color: var(--slds-s-input-color-border-focus); box-shadow: var(--slds-g-shadow-outline-focus-1); } [role='combobox'] input[readonly][disabled], input[readonly][role='combobox'][disabled] { background-color: var(--slds-s-input-color-background-disabled); border-color: var(--slds-s-input-color-border-disabled); } .slds-listbox_inline, .slds-listbox--inline { display: inline-flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; margin-inline-start: 0.125rem; margin-inline-end: 0.125rem; } .slds-listbox_inline li, .slds-listbox--inline li { display: flex; } .slds-listbox_inline li + li, .slds-listbox--inline li + li { padding-inline-start: 0.125rem; } .slds-listbox_horizontal, .slds-listbox--horizontal { display: inline-flex; flex-wrap: wrap; align-items: center; } .slds-listbox_horizontal li, .slds-listbox--horizontal li { display: flex; } .slds-listbox_horizontal li + li, .slds-listbox--horizontal li + li { padding-inline-start: 0.125rem; } .slds-listbox__option:hover { cursor: pointer; } .slds-listbox__option:focus { outline: 0; } .slds-listbox__option.slds-has-focus:not(:hover), .slds-listbox__option:focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); outline: 0; border-radius: 6px; } .slds-listbox__option .slds-truncate { display: inline-block; vertical-align: middle; } .slds-listbox__option[aria-disabled='true'] { color: var(--slds-g-color-disabled-1); } .slds-listbox__option-header { font-size: var(--slds-g-font-scale-neg-1); font-weight: var(--slds-g-font-weight-6); } .slds-listbox__option-icon { width: var(--slds-g-sizing-7); display: inline-flex; align-content: center; align-items: center; justify-content: center; color: var(--slds-g-color-on-surface-1); } .slds-listbox__option[aria-disabled='true'] .slds-listbox__option-icon { color: currentColor; } .slds-listbox_vertical .slds-listbox__option:focus, .slds-listbox--vertical .slds-listbox__option:focus, .slds-listbox_vertical .slds-listbox__option:hover, .slds-listbox--vertical .slds-listbox__option:hover, .slds-listbox_vertical .slds-listbox__option.slds-has-focus, .slds-listbox--vertical .slds-listbox__option.slds-has-focus { background-color: var(--slds-s-menu-item-color-background-active, var(--slds-g-color-surface-container-2)); text-decoration: none; } .slds-listbox_vertical .slds-listbox__option[aria-disabled='true'], .slds-listbox--vertical .slds-listbox__option[aria-disabled='true'], .slds-listbox_vertical .slds-listbox__option[role='presentation']:hover, .slds-listbox--vertical .slds-listbox__option[role='presentation']:hover { background-color: transparent; cursor: default; } .slds-listbox_vertical .slds-listbox__option_entity, .slds-listbox--vertical .slds-listbox__option--entity { padding-block: var(--slds-g-spacing-1); padding-inline: var(--slds-g-spacing-3); } .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure, .slds-listbox--vertical .slds-listbox__option--entity .slds-media__figure { margin-inline-end: var(--slds-g-spacing-2); } .slds-listbox_vertical .slds-listbox__option_plain, .slds-listbox--vertical .slds-listbox__option--plain { padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); } .slds-listbox_vertical .slds-listbox__option_term, .slds-listbox--vertical .slds-listbox__option--term { padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); } .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure, .slds-listbox--vertical .slds-listbox__option--has-meta .slds-media__figure { margin-block-start: var(--slds-g-spacing-1); } .slds-input-has-icon_left .slds-combobox__input[value], .slds-input-has-icon--left .slds-combobox__input[value], .slds-input-has-icon_left .slds-combobox__input.slds-combobox__input-value, .slds-input-has-icon--left .slds-combobox__input.slds-combobox__input-value, .slds-input-has-icon_left-right .slds-combobox__input[value], .slds-input-has-icon--left-right .slds-combobox__input[value], .slds-input-has-icon_left-right .slds-combobox__input.slds-combobox__input-value, .slds-input-has-icon--left-right .slds-combobox__input.slds-combobox__input-value { padding-inline-start: calc(var(--slds-g-sizing-7) + var(--slds-g-spacing-3)); } .slds-combobox__input-entity-icon { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); position: absolute; top: 50%; inset-inline-start: calc(var(--slds-g-spacing-1) + 1px); transform: translateY(-50%); z-index: 2; } .slds-combobox__input-entity-icon .slds-icon { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); } .slds-combobox_container__icon, .slds-combobox--container__icon { color: var(--slds-g-color-on-surface-3); } .slds-listbox__icon-selected { opacity: 0; fill: var(--slds-g-color-accent-1); } .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected { opacity: 1; } .slds-listbox__option.slds-is-selected .slds-listbox__option-icon { color: var(--slds-s-menu-item-color-active, var(--slds-g-color-accent-1)); } .slds-listbox__option[aria-checked='true'] .slds-icon { --slds-c-icon-color-foreground: var(--slds-g-color-accent-2); } .slds-listbox__option-text_entity, .slds-listbox__option-text--entity { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-block-end: 0.125rem; } .slds-listbox__option-meta { display: block; margin-block-start: calc(var(--slds-g-spacing-1) * -1); color: var(--slds-g-color-on-surface-1); } .slds-listbox__option[aria-disabled='true'] .slds-listbox__option-meta { color: currentColor; } .slds-listbox_object-switcher, .slds-listbox--object-switcher { flex-shrink: 0; padding: 0.125rem; } .slds-combobox_object-switcher, .slds-combobox--object-switcher { flex-shrink: 0; } .slds-combobox_object-switcher .slds-combobox__input, .slds-combobox--object-switcher .slds-combobox__input { width: 7.5rem; transition: width 80ms linear; font-size: var(--slds-g-font-scale-neg-1); color: var(--slds-s-input-color); } .slds-combobox_object-switcher .slds-combobox__input:focus, .slds-combobox--object-switcher .slds-combobox__input:focus, .slds-combobox_object-switcher .slds-combobox__input.slds-has-focus, .slds-combobox--object-switcher .slds-combobox__input.slds-has-focus { width: var(--slds-g-sizing-13); } .slds-combobox__input:focus-visible, .slds-combobox__input.slds-has-focus { box-shadow: var(--slds-g-shadow-outline-focus-1); border-color: transparent; background-clip: padding-box; outline: 0; } .slds-combobox-group { display: flex; flex-direction: row; } .slds-combobox-group .slds-combobox_container, .slds-combobox-group .slds-combobox--container { flex: 1 1 auto; } .slds-combobox-group .slds-combobox__input, .slds-combobox-group .slds-combobox_object-switcher__button, .slds-combobox-group .slds-combobox--object-switcher__button { border-radius: 0; margin-inline-start: -1px; margin-inline-end: -1px; position: relative; } .slds-combobox-group .slds-combobox__input:focus, .slds-combobox-group .slds-combobox__input.slds-has-focus, .slds-combobox-group .slds-combobox_object-switcher__button:focus, .slds-combobox-group .slds-combobox--object-switcher__button:focus, .slds-combobox-group .slds-combobox_object-switcher__button.slds-has-focus, .slds-combobox-group .slds-combobox--object-switcher__button.slds-has-focus { z-index: 1; } .slds-combobox-group.slds-has-selection .slds-combobox-addon_start .slds-combobox__input, .slds-combobox-group.slds-has-selection .slds-combobox-addon--start .slds-combobox__input { border-end-start-radius: 0; } .slds-combobox-group.slds-has-selection .slds-combobox-addon_end .slds-combobox__input, .slds-combobox-group.slds-has-selection .slds-combobox-addon--end .slds-combobox__input { border-end-end-radius: 0; } .slds-combobox-group.slds-has-selection ~ .slds-listbox_selection-group, .slds-combobox-group.slds-has-selection ~ .slds-listbox--selection-group { display: flex; position: relative; background: var(--slds-g-color-surface-container-1); border: 1px solid var(--slds-s-input-color-border, var(--slds-g-color-border-1)); border-block-start: 0; border-end-start-radius: var(--slds-s-input-radius-border); border-end-end-radius: var(--slds-s-input-radius-border); inset-inline-start: -1px; } .slds-combobox-group .slds-listbox_horizontal li + li, .slds-combobox-group .slds-listbox--horizontal li + li { padding: 0.125rem; } .slds-listbox_selection-group, .slds-listbox--selection-group { position: relative; padding: 0; padding-inline-end: 3.75rem; height: 1.875rem; overflow: hidden; } .slds-listbox_selection-group.slds-is-expanded, .slds-listbox--selection-group.slds-is-expanded { height: auto; padding: 0; } .slds-listbox_selection-group .slds-listbox, .slds-listbox--selection-group .slds-listbox { padding-block: 0 0.125rem; padding-inline: 0; } .slds-listbox_selection-group .slds-listbox-item, .slds-listbox--selection-group .slds-listbox-item { padding-block: 0.125rem 0; padding-inline: 0.125rem; } .slds-listbox_selection-group .slds-listbox-toggle, .slds-listbox--selection-group .slds-listbox-toggle { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: var(--slds-g-spacing-2); } .slds-listbox_selection-group .slds-listbox-toggle .slds-button, .slds-listbox--selection-group .slds-listbox-toggle .slds-button { line-height: 1; } .slds-combobox-addon_start .slds-combobox__input, .slds-combobox-addon--start .slds-combobox__input { border-start-end-radius: 0; border-end-end-radius: 0; border-start-start-radius: var(--slds-s-input-radius-border); border-end-start-radius: var(--slds-s-input-radius-border); } .slds-combobox-addon_end .slds-combobox__input, .slds-combobox-addon--end .slds-combobox__input { border-start-end-radius: var(--slds-s-input-radius-border); border-end-end-radius: var(--slds-s-input-radius-border); border-start-start-radius: 0; border-end-start-radius: 0; } .slds-has-inline-listbox, .slds-has-object-switcher { flex-direction: row; background: var(--slds-s-input-color-background); border: var(--slds-g-sizing-border-1) solid var(--slds-s-input-color-border); border-radius: var(--slds-s-input-radius-border); } .slds-has-inline-listbox .slds-combobox, .slds-has-object-switcher .slds-combobox { flex-basis: 50%; flex-shrink: 0; } .slds-has-inline-listbox .slds-combobox__input, .slds-has-object-switcher .slds-combobox__input { min-height: 100%; line-height: calc(var(--slds-g-sizing-9) - 4px); border: 0; padding-block-start: 0.125rem; padding-block-end: 0.125rem; } .slds-has-inline-listbox .slds-combobox__input:active, .slds-has-object-switcher .slds-combobox__input:active { outline: 0; box-shadow: none; } .slds-has-inline-listbox .slds-listbox_object-switcher ~ .slds-listbox_inline, .slds-has-inline-listbox .slds-listbox--object-switcher ~ .slds-listbox--inline, .slds-has-inline-listbox .slds-combobox_container__icon ~ .slds-listbox_inline, .slds-has-inline-listbox .slds-combobox--container__icon ~ .slds-listbox--inline, .slds-has-object-switcher .slds-listbox_object-switcher ~ .slds-listbox_inline, .slds-has-object-switcher .slds-listbox--object-switcher ~ .slds-listbox--inline, .slds-has-object-switcher .slds-combobox_container__icon ~ .slds-listbox_inline, .slds-has-object-switcher .slds-combobox--container__icon ~ .slds-listbox--inline { margin-inline-start: var(--slds-g-spacing-2); } .slds-has-inline-listbox.slds-has-icon_left, .slds-has-inline-listbox.slds-has-icon--left, .slds-has-object-switcher.slds-has-icon_left, .slds-has-object-switcher.slds-has-icon--left { padding-inline-start: calc(var(--slds-g-spacing-6) + var(--slds-g-spacing-1)); } .slds-has-inline-listbox.slds-has-icon_left .slds-combobox_container__icon, .slds-has-inline-listbox.slds-has-icon--left .slds-combobox--container__icon, .slds-has-object-switcher.slds-has-icon_left .slds-combobox_container__icon, .slds-has-object-switcher.slds-has-icon--left .slds-combobox--container__icon { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); position: absolute; inset-inline-start: calc(var(--slds-g-spacing-4) + 0.125rem); inset-block-start: 50%; margin-block-start: calc(var(--slds-g-spacing-2) * -1); } .slds-has-inline-listbox [role='listbox'] { display: inline-flex; padding-block: 0; padding-inline: 0.125rem; } .slds-has-inline-listbox .slds-combobox__input-value { box-shadow: var(--slds-g-shadow-outline-focus-1); border-color: transparent; } .slds-picklist_draggable, .slds-picklist--draggable { display: flex; } .slds-picklist_draggable .slds-button, .slds-picklist--draggable .slds-button, .slds-picklist--draggable .slds-button { margin: var(--slds-g-spacing-1); } .slds-picklist_draggable .slds-button:first-of-type, .slds-picklist--draggable .slds-button:first-of-type, .slds-picklist--draggable .slds-button:first-of-type { margin-block-start: var(--slds-g-spacing-5); } .slds-picklist__item { position: relative; line-height: var(--slds-g-font-lineheight-4); } .slds-picklist__item > a, .slds-picklist__item > span { display: block; padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3); } .slds-picklist__item > a:hover, .slds-picklist__item > span:hover { background-color: var(--slds-s-menu-item-color-background-active, var(--slds-g-color-surface-container-2)); cursor: pointer; } .slds-picklist__item > a:active, .slds-picklist__item > span:active { background-color: var(--slds-s-menu-item-color-background-active, var(--slds-g-color-surface-container-2)); } .slds-picklist__item[aria-selected='true'] { background-color: var(--slds-s-menu-item-color-background-active, var(--slds-g-color-surface-container-2)); } .slds-dueling-list { display: flex; clear: left; } .slds-dueling-list__column { display: inline-flex; flex-direction: column; } .slds-dueling-list__column .slds-button { margin: var(--slds-g-spacing-1); } .slds-dueling-list__column .slds-button:first-of-type { margin-top: var(--slds-g-spacing-5); } .slds-dueling-list__column_responsive, .slds-dueling-list__column--responsive { flex: 1 1 var(--slds-g-sizing-14); flex-wrap: wrap; overflow: hidden; min-width: 6rem; } .slds-dueling-list__column_responsive .slds-dueling-list__options, .slds-dueling-list__column--responsive .slds-dueling-list__options { width: auto; max-width: 100%; } .slds-dueling-list__options, .slds-picklist__options { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: var(--slds-g-radius-border-2); padding: var(--slds-g-spacing-1) 0; width: var(--slds-g-sizing-14); height: var(--slds-g-sizing-14); background-color: var(--slds-g-color-surface-container-1); overflow: auto; } .slds-dueling-list__options .slds-is-grabbed, .slds-picklist__options .slds-is-grabbed { transform: rotate(3deg); } .slds-dueling-list__options [aria-selected='true'], .slds-picklist__options [aria-selected='true'] { background-color: var(--slds-g-color-accent-container-1); color: var(--slds-g-color-on-surface-inverse-1); } .slds-dueling-list__options [aria-selected='true']:focus-visible, .slds-picklist__options [aria-selected='true']:focus-visible { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); } .slds-dueling-list__options [aria-selected='true']:hover, .slds-picklist__options [aria-selected='true']:hover, .slds-dueling-list__options [aria-selected='true']:focus, .slds-picklist__options [aria-selected='true']:focus { background: var(--slds-g-color-accent-container-3); color: var(--slds-g-color-on-surface-inverse-1); } .slds-dueling-list__options.slds-is-disabled, .slds-picklist__options.slds-is-disabled { background-color: var(--slds-g-color-disabled-container-1, var(--slds-g-color-neutral-base-95)); border-color: var(--slds-g-color-border-disabled-1); color: var(--slds-g-color-disabled-2); } .slds-dueling-list__options.slds-is-disabled:hover, .slds-picklist__options.slds-is-disabled:hover { cursor: not-allowed; } .slds-dueling-list__options.slds-is-disabled .slds-listbox__option:hover, .slds-picklist__options.slds-is-disabled .slds-listbox__option:hover { cursor: not-allowed; background-color: transparent; } .slds-dueling-list__options.slds-is-disabled .slds-listbox__option:focus, .slds-picklist__options.slds-is-disabled .slds-listbox__option:focus { background-color: transparent; } .slds-disabled-text { color: var(--slds-g-color-disabled-1); } .slds-datepicker td:hover:not(.slds-disabled-text) > .slds-day, .slds-datepicker td:focus:not(.slds-disabled-text) > .slds-day, .slds-datepicker td.slds-is-today > .slds-day { cursor: pointer; } .slds-datepicker { padding: 0; font-size: var(--slds-g-font-scale-neg-1); } .slds-datepicker thead > tr > th, .slds-datepicker tbody > tr > td { text-align: center; } .slds-datepicker thead > tr > th { padding: var(--slds-g-spacing-2); font-weight: var(--slds-g-font-weight-4); color: var(--slds-g-color-on-surface-3); font-size: var(--slds-g-font-scale-neg-1); } .slds-datepicker tbody > tr > td { padding: var(--slds-g-spacing-1); font-size: var(--slds-g-font-scale-neg-1); } .slds-datepicker tbody > tr > td > .slds-day { width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); display: block; position: relative; min-width: var(--slds-g-sizing-9); line-height: 2rem; border-radius: var(--slds-g-radius-border-circle); margin: auto; color: var(--slds-g-color-on-surface-2); } .slds-datepicker tbody > tr > .slds-day_adjacent-month > .slds-day, .slds-datepicker tbody > tr > .slds-day--adjacent-month > .slds-day { color: var(--slds-g-color-on-surface-1); } .slds-datepicker tbody > tr > td:hover > .slds-day, .slds-datepicker tbody > tr > td:focus > .slds-day, .slds-datepicker tbody > tr > td.slds-is-today > .slds-day { cursor: pointer; } .slds-datepicker tbody > tr > td.slds-is-today > .slds-day { background-color: var(--slds-g-color-brand-base-90); color: var(--slds-g-color-accent-2); } .slds-datepicker tbody > tr > td:focus { outline: 0; } .slds-datepicker tbody > tr > td:focus > .slds-day { box-shadow: var(--slds-g-shadow-inset-focus-1); } .slds-datepicker tbody > tr > td:hover > .slds-day { background-color: var(--slds-g-color-brand-base-90); } .slds-datepicker tbody > tr > td.slds-is-selected > .slds-day { background: var(--slds-g-color-accent-container-1); color: var(--slds-g-color-on-accent-1); } .slds-datepicker tbody > tr > td.slds-is-selected:focus > .slds-day { background: var(--slds-g-color-accent-container-2); box-shadow: var(--slds-g-shadow-insetinverse-focus-1); color: var(--slds-g-color-on-accent-1); } .slds-datepicker .slds-has-multi-selection .slds-is-selected-multi:last-child > .slds-day::after { left: auto; right: 0; transform: translateX(var(--slds-g-spacing-1)); } .slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:first-child > .slds-day::before, .slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:last-child > .slds-day::after { content: ''; position: absolute; background: var(--slds-g-color-accent-container-1); top: 0; left: -50%; height: 100%; width: calc(var(--slds-g-sizing-9) + var(--slds-g-spacing-2)); transform: translateX(calc(var(--slds-g-spacing-2) * -1)); z-index: -1; } .slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:first-child > .slds-day::before { left: 0; transform: translateX(calc(var(--slds-g-spacing-1) * -1)); } .slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:last-child > .slds-day::after { left: auto; right: 0; transform: translateX(var(--slds-g-spacing-1)); } .slds-datepicker td.slds-is-selected-multi > .slds-day { overflow: visible; } .slds-datepicker td.slds-is-selected-multi.slds-is-today > .slds-day { box-shadow: var(--slds-g-color-on-accent-1) 0 0 0 1px inset; } .slds-datepicker td.slds-is-selected-multi + .slds-is-selected-multi > .slds-day::before { content: ''; position: absolute; background: var(--slds-g-color-accent-container-1); top: 0; left: -50%; height: 100%; width: calc(var(--slds-g-sizing-9) + var(--slds-g-spacing-2)); transform: translateX(calc(var(--slds-g-spacing-2) * -1)); z-index: -1; } .slds-datepicker__filter { padding: var(--slds-g-spacing-1); } .slds-datepicker__filter .slds-select { min-width: var(--slds-g-sizing-11); } .slds-datepicker__filter_month, .slds-datepicker__filter--month { padding: 0 var(--slds-g-spacing-1) 0 0; color: var(--slds-g-color-on-surface-2); } .slds-datepicker__month { font-size: var(--slds-g-font-scale-neg-1); } .slds-has-error .slds-datepicker__filter .slds-select { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); box-shadow: none; } .slds-has-error .slds-datepicker__filter .slds-select:focus-visible { box-shadow: var(--slds-g-shadow-outline-focus-1); border-color: transparent; } .slds-day_adjacent-month, .slds-day--adjacent-month { color: var(--slds-g-color-neutral-base-50); } .slds-table .slds-datepicker .slds-datepicker__month tbody > tr:hover > td { background-color: unset; } .slds-input-has-icon lightning-button-icon.slds-input__icon { line-height: normal; width: auto; height: auto; transform: translateY(-50%); margin-block-start: 0; } .slds-docked-composer_overflow__pill, .slds-docked-composer--overflow__pill { display: flex; padding: 0 var(--slds-g-spacing-3); height: inherit; white-space: nowrap; border-bottom-left-radius: var(--slds-g-radius-border-2); border-bottom-right-radius: var(--slds-g-radius-border-2); } .slds-docked-composer_overflow__pill:hover, .slds-docked-composer--overflow__pill:hover, .slds-docked-composer_overflow__pill:focus, .slds-docked-composer--overflow__pill:focus { color: var(--slds-g-color-on-surface-inverse-1); text-decoration: none; } .slds-docked-composer_overflow__pill .slds-text-body_small, .slds-docked-composer--overflow__pill .slds-text-body--small { color: var(--slds-g-color-on-surface-inverse-1); margin-inline-start: var(--slds-g-spacing-2); } .slds-docked_container, .slds-docked--container { display: flex; align-items: flex-end; position: fixed; inset-block-end: 0; inset-inline-end: 0; padding: 0 var(--slds-g-spacing-7); height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3)); font-weight: var(--slds-s-container-heading-font-weight); } .slds-docked-composer { position: relative; border-radius: var(--slds-s-container-radius-border, var(--slds-g-radius-border-2)) var(--slds-s-container-radius-border, var(--slds-g-radius-border-2)) 0 0; width: 480px; height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3)); float: left; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 -4px 5px 0 rgba(0, 0, 0, 0.09), 0 0 5px 0 rgba(0, 0, 0, 0.08); border: var(--slds-s-container-sizing-border, var(--slds-g-sizing-border-1)) solid var(--slds-s-container-color-border, var(--slds-g-color-border-1)); border-bottom: none; font-weight: var(--slds-s-container-heading-font-weight); background-color: var(--slds-g-color-surface-container-1); } .slds-docked-composer.slds-has-focus { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-docked-composer.slds-is-open { height: 480px; } .slds-docked-composer.slds-is-closed { height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3)); } .slds-docked-composer.slds-is-closed .slds-docked-composer__body, .slds-docked-composer.slds-is-closed .slds-docked-composer__footer { display: none; } .slds-docked-composer + .slds-docked-composer { margin-inline-start: var(--slds-g-spacing-7); } .slds-docked-composer__header { background: var(--slds-g-color-surface-container-1); border-bottom: var(--slds-g-sizing-border-2) solid var(--slds-g-color-accent-container-1); border-radius: var(--slds-s-container-radius-border) var(--slds-s-container-radius-border) 0 0; padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3); font-size: var(--slds-s-container-heading-font-size, var(--slds-g-font-size-base)); color: var(--slds-g-color-on-surface-3); } .slds-docked-composer__actions .slds-button { margin-inline-start: var(--slds-g-spacing-3); } .slds-docked-composer__body { display: flex; flex: 1 0 auto; flex-direction: column; overflow: auto; } .slds-docked-composer__body_form, .slds-docked-composer__body--form { justify-content: flex-start; padding: var(--slds-g-spacing-4); } .slds-docked-composer__lead { display: flex; background: var(--slds-g-color-surface-container-1); padding: var(--slds-g-spacing-4) var(--slds-g-spacing-2); } .slds-docked-composer__toolbar { background: var(--slds-g-color-surface-container-2); padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2); max-height: 60px; overflow-y: auto; border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-docked-composer__input { background: var(--slds-g-color-surface-container-1); padding: var(--slds-g-spacing-4); min-height: calc(var(--slds-g-sizing-10) + var(--slds-g-sizing-9)); resize: none; line-height: var(--slds-g-font-lineheight-base); overflow: hidden; overflow-y: auto; font-family: inherit; } .slds-docked-composer__footer { display: flex; background: var(--slds-s-container-footer-color-background, var(--slds-g-color-surface-container-2)); padding: var(--slds-g-spacing-3) var(--slds-g-spacing-2); border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-docked-composer__footer .slds-button { justify-content: center; } .slds-docked-composer_overflow, .slds-docked-composer--overflow { width: auto; } .slds-docked-composer_overflow__button, .slds-docked-composer--overflow__button { display: flex; background: var(--slds-g-color-surface-container-1); padding: 0 var(--slds-g-spacing-3); height: inherit; white-space: nowrap; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .slds-docked-composer_overflow__button:focus-visible, .slds-docked-composer--overflow__button:focus-visible { outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -2px; box-shadow: none; border-top-left-radius: inherit; border-top-right-radius: inherit; } .slds-docked-composer-modal .slds-modal__content { border-radius: var(--slds-s-container-radius-border, var(--slds-g-radius-border-2)); } .slds-docked-composer-modal .slds-docked-composer { width: 100%; height: 100%; border: 0; } .slds-email-composer { position: relative; flex: 1 1 auto; } .slds-email-composer .slds-rich-text-editor { border: 0; border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: 0; } .slds-email-composer__combobox { padding-inline-start: var(--slds-g-spacing-8); border: 0; border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: 0; } .slds-email-composer__combobox .slds-form-element__label { position: absolute; inset-inline-start: var(--slds-g-spacing-3); inset-block-start: 50%; transform: translateY(-50%); } .slds-email-composer__combobox .slds-combobox_container, .slds-email-composer__combobox .slds-combobox--container, .slds-email-composer__combobox .slds-input[value] { border: 0; box-shadow: none; } .slds-email-composer__recipient { position: absolute; inset-block-start: 0; inset-inline-end: var(--slds-g-spacing-3); } .slds-utility-bar_container, .slds-utility-bar--container { position: relative; } .slds-utility-bar { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: 2.5rem; background: var(--slds-g-color-surface-1); box-shadow: var(--slds-g-shadow-blockstart-2, 0 -2px 2px 0 rgba(0, 0, 0, 0.16)); z-index: 4; } .slds-utility-bar .slds-indicator_unread, .slds-utility-bar .slds-indicator--unread { width: 8px; height: 8px; top: var(--slds-g-spacing-2); position: absolute; left: var(--slds-g-spacing-2); display: block; border-radius: var(--slds-g-radius-border-circle); background: var(--slds-g-color-error-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-surface-1); } .slds-utility-bar__item { display: flex; margin-inline-end: 1px; } .slds-utility-bar__item_pop-out, .slds-utility-bar__item--pop-out { position: relative; } .slds-utility-bar__item_pop-out::before, .slds-utility-bar__item--pop-out::before { content: ''; position: absolute; top: 4px; right: 4px; height: 4px; width: 4px; border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-surface-3); border-right: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-surface-3); z-index: 1; } .slds-utility-bar__item_pop-out::after, .slds-utility-bar__item--pop-out::after { content: ''; position: absolute; top: 2px; right: 6px; height: 7px; width: 7px; border-right: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-surface-3); transform: rotate(45deg); } [dir='rtl'] .slds-utility-bar__item_pop-out::before, [dir='rtl'] .slds-utility-bar__item--pop-out::before { /*! @noflip */ right: auto; /*! @noflip */ left: 4px; /*! @noflip */ border-right-width: 0; /*! @noflip */ border-left: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-surface-3); } [dir='rtl'] .slds-utility-bar__item_pop-out::after, [dir='rtl'] .slds-utility-bar__item--pop-out::after { /*! @noflip */ right: auto; /*! @noflip */ left: 6px; /*! @noflip */ border-right-width: 0; /*! @noflip */ border-left: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-surface-3); transform: rotate(-45deg); } .slds-utility-bar__action { position: relative; display: inline-flex; gap: var(--slds-g-spacing-1); align-items: center; padding: 0 var(--slds-g-spacing-3); border-radius: 0; border: 0; color: var(--_slds-c-utilitybar-color, var(--slds-g-color-on-surface-3)); font-weight: var(--_slds-c-utilitybar-font-weight); } .slds-utility-bar__action .slds-icon { fill: currentColor; } .slds-utility-bar__action::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: transparent; } .slds-utility-bar__action:focus, .slds-utility-bar__action:hover { box-shadow: none; background: var(--_slds-c-utilitybar-color-background-hover); color: var(--_slds-c-utilitybar-color-hover, inherit); } .slds-utility-bar__action:hover::after { background: var(--_slds-c-utilitybar-color-border-hover); height: var(--_slds-c-utilitybar-sizing-border-hover); } .slds-utility-bar__action:focus::after { background: var(--_slds-c-utilitybar-color-border-hover); height: var(--_slds-c-utilitybar-sizing-border-active); } .slds-utility-bar__action.slds-is-active { background: var(--_slds-c-globalnavigation-item-color-background-active); color: var(--_slds-c-utilitybar-color-active, inherit); } .slds-utility-bar__action.slds-is-active::after { background: var(--_slds-c-utilitybar-color-border-active); height: var(--_slds-c-utilitybar-sizing-border-active); } .slds-utility-bar__action:focus-visible { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); outline: 0; } .slds-utility-bar__text { display: flex; flex-direction: column; line-height: 1; text-align: left; } .slds-utility-bar__item.slds-has-notification .slds-utility-bar__action { background: var(--slds-g-color-info-container-1); color: var(--slds-g-color-on-info-1); } .slds-utility-bar__item.slds-has-notification .slds-utility-bar__action .slds-icon { fill: var(--slds-g-color-on-info-1); } .slds-utility-bar__item.slds-has-notification .slds-utility-bar__action:hover, .slds-utility-bar__item.slds-has-notification .slds-utility-bar__action:focus { background: var(--slds-g-color-surface-container-inverse-2); color: var(--slds-g-color-on-surface-inverse-1); } .slds-utility-bar__item.slds-has-notification .slds-utility-bar__action:hover .slds-icon, .slds-utility-bar__item.slds-has-notification .slds-utility-bar__action:focus .slds-icon { fill: var(--slds-g-color-on-surface-inverse-1); } .slds-utility-panel { position: fixed; bottom: 1.875rem; width: 21.25rem; height: 30rem; border-radius: var(--slds-s-container-radius-border) var(--slds-s-container-radius-border) 0 0; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-bottom: none; background: var(--slds-g-color-surface-container-1); transform: translateY(100%); } .slds-utility-panel.slds-is-open { box-shadow: var(--slds-g-shadow-blockstart-2, 0 -2px 2px 0 rgba(0, 0, 0, 0.16)); transform: translateY(0); } .slds-utility-panel__header { background: var(--slds-g-color-surface-container-1); border-bottom: var(--slds-g-sizing-border-2) solid var(--slds-g-color-accent-1); border-radius: var(--slds-s-container-radius-border) var(--slds-s-container-radius-border) 0 0; padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3); font-size: var(--slds-s-container-heading-font-size, var(--slds-g-font-scale-1)); font-weight: var(--slds-s-container-heading-font-weight); color: var(--slds-g-color-on-surface-3); } .slds-utility-panel__header .slds-icon { fill: currentColor; } .slds-utility-panel__header .slds-button_icon:focus-visible, .slds-utility-panel__header .slds-button--icon:focus-visible { box-shadow: var(--slds-g-shadow-outline-focus-1); } .slds-utility-panel__body { display: flex; flex: 1 1 0%; flex-direction: column; overflow: auto; } .slds-drop-zone { position: relative; } .slds-drop-zone::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: var(--slds-g-sizing-border-1) dotted var(--slds-g-color-border-1); outline: var(--slds-g-sizing-border-1) dotted var(--slds-g-color-surface-container-1); } .slds-drop-zone.slds-drop-zone_drag::after, .slds-drop-zone.slds-drop-zone--drag::after { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-success-1); outline: 0; } .slds-drop-zone__label { color: var(--slds-g-color-on-accent-1); background: var(--slds-g-color-border-success-1); border-radius: var(--slds-g-radius-border-2) var(--slds-g-radius-border-2) 0 0; padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2); position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); } .slds-drop-zone__label.slds-drop-zone__label_container, .slds-drop-zone__label.slds-drop-zone__label--container { opacity: 0; background: var(--slds-g-color-accent-container-1); } .slds-drop-zone__label .slds-media__body { flex-basis: auto; } .slds-drop-zone__label_button, .slds-drop-zone__label--button { border-radius: 0; } .slds-drop-zone__label_button:hover, .slds-drop-zone__label--button:hover, .slds-drop-zone__label_button:focus, .slds-drop-zone__label--button:focus { text-decoration: underline; outline: none; } .slds-drop-zone_drag__slot, .slds-drop-zone--drag__slot { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-neutral-base-100); border-left-width: var(--slds-g-sizing-border-2); border-right-width: var(--slds-g-sizing-border-2); background: var(--slds-g-color-success-1); width: 100%; height: var(--slds-g-sizing-2); } .slds-drop-zone__container { position: relative; z-index: 8000; } .slds-drop-zone__container::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .slds-drop-zone__container.slds-is-hovered .slds-drop-zone__label_container, .slds-drop-zone__container.slds-is-hovered .slds-drop-zone__label--container, .slds-drop-zone__container.slds-is-hovered .slds-drop-zone__actions, .slds-drop-zone__container:hover .slds-drop-zone__label_container, .slds-drop-zone__container:hover .slds-drop-zone__label--container, .slds-drop-zone__container:hover .slds-drop-zone__actions { opacity: 1; z-index: 8000; } .slds-drop-zone__container.slds-is-hovered::after, .slds-drop-zone__container:hover::after { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-accent-1); } .slds-drop-zone__container:active::after { border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-surface-inverse-1); } .slds-drop-zone__container:active .slds-drop-zone__label { background-color: var(--slds-g-color-surface-inverse-1); } .slds-drop-zone__container:focus-within { outline: none; } .slds-drop-zone__container:focus-within .slds-drop-zone__label_container, .slds-drop-zone__container:focus-within .slds-drop-zone__label--container, .slds-drop-zone__container:focus-within .slds-drop-zone__actions { opacity: 1; z-index: 8000; } .slds-drop-zone__container:focus-within::after { box-shadow: var(--slds-g-shadow-inset-focus-1); border-color: transparent; } .slds-drop-zone__container:focus-within .slds-drop-zone__label { background-color: var(--slds-g-color-accent-container-3); } .slds-drop-zone__actions { opacity: 0; background: var(--slds-g-color-accent-container-1); position: absolute; right: 0; top: 0; } .slds-global-header_container, .slds-global-header--container { --_slds-c-globalheader-logo: var(--lwc-brandLogoImage); --_slds-c-globalheader-color-background: var(--lwc-brandHeader, var(--slds-g-color-surface-container-1, #ffffff)); --_slds-c-globalheader-buttonicon-color-active: var(--lwc-brandHeaderContrast, var(--slds-g-color-neutral-base-30, #5e5e5e)); --_slds-c-globalheader-task-color-background-active: var(--lwc-brandHeaderContrast, var(--slds-g-color-neutral-base-30, #5e5e5e)); --_slds-c-globalheader-favorites-color-border-hover: var(--lwc-brandHeaderContrast, var(--slds-g-color-neutral-base-30, #5e5e5e)); --_slds-c-globalheader-buttonicon-color: var(--lwc-brandHeaderContrastWeak, var(--slds-g-color-neutral-base-40, #919191)); --_slds-c-globalheader-task-color-background: var(--lwc-brandHeaderContrastWeak, var(--slds-g-color-neutral-base-40, #919191)); --_slds-c-globalheader-favorites-color-border: var(--lwc-brandHeaderContrastWeak, var(--slds-g-color-neutral-base-40, #919191)); --_slds-c-globalheader-buttonicon-color-hover: var(--lwc-brandHeaderContrastWeakActive, var(--slds-g-color-neutral-base-30, #818181)); --_slds-c-globalheader-task-color-background-hover: var(--lwc-brandHeaderContrastWeakActive, var(--slds-g-color-neutral-base-30, #818181)); --_slds-c-globalheader-notificationbadge-color-background: var(--lwc-brandHeaderContrastWarm, var(--slds-g-color-palette-red-50, #ba0517)); --_slds-c-globalheader-favorites-color-background-selected: var(--lwc-brandHeaderContrastCool, var(--slds-g-color-accent-container-2, #014486)); --_slds-c-globalheader-favorites-color-border-selected: var(--lwc-brandHeaderContrastCool, var(--slds-g-color-border-accent-2, #014486)); --_slds-c-globalheader-favorites-color-background-selected-hover: var( --lwc-brandHeaderContrastCoolActive, var(--slds-g-color-accent-container-3, #014486) ); --_slds-c-globalheader-favorites-color-border-selected-hover: var( --lwc-brandHeaderContrastCoolActive, var(--slds-g-color-border-accent-3, #014486) ); --_slds-c-globalheader-favorites-color-text-disabled: var(--lwc-brandHeaderContrastWeakDisabled, var(--slds-g-color-on-disabled-1, #c9c9c9)); --_slds-c-globalheader-favorites-color-border-disabled: var(--lwc-brandHeaderContrastWeakDisabled, var(--slds-g-color-border-disabled-1, #c9c9c9)); position: fixed; width: 100%; top: 0; left: 0; z-index: 100; } .slds-global-header_container .slds-assistive-text_focus, .slds-global-header--container .slds-assistive-text--focus { top: 0; color: var(--slds-g-color-on-surface-1); background: var(--_slds-c-globalheader-color-background); } .slds-global-header { background: var(--_slds-c-globalheader-color-background); box-shadow: var(--slds-g-shadow-1); padding: var(--slds-g-spacing-2) 0; height: var(--slds-s-header-sizing-height, 3.125rem); align-items: center; } .slds-global-header__item { padding: 0 var(--slds-g-spacing-4); } .slds-global-header__item_search, .slds-global-header__item--search { flex: 0 1 33.5rem; min-width: 27.5rem; padding: 0; } .slds-global-header__item_search .slds-global-header_search-button, .slds-global-header__item--search .slds-global-header--search-button { width: 100%; cursor: text; justify-content: flex-start; border-radius: var(--slds-g-radius-border-2); --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-1); --slds-c-button-color-background-active: var(--slds-g-color-surface-container-1); --slds-c-button-text-color: var(--slds-g-color-neutral-base-60); --slds-c-button-text-color-hover: var(--slds-g-color-neutral-base-60); --slds-c-button-text-color-active: var(--slds-g-color-neutral-base-60); } .slds-global-header__logo { width: 12.5rem; height: 2.5rem; background-image: var(--_slds-c-globalheader-logo); background-size: contain; background-repeat: no-repeat; background-position: left center; } .slds-global-header__notification { border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); padding: var(--slds-g-spacing-1); } .slds-global-header__notification:hover { background-color: var(--slds-g-color-surface-container-2); } .slds-global-header__notification:last-child { border-block-end: 0; } .slds-global-header__notification_unread, .slds-global-header__notification--unread { background-color: var(--slds-g-color-surface-container-2); } .slds-global-actions { display: flex; align-items: center; } .slds-global-actions__item { margin-inline-start: var(--slds-g-spacing-2); margin-inline-end: var(--slds-g-spacing-2); } .slds-global-actions__item .slds-button__icon { fill: var(--_slds-c-globalheader-buttonicon-color); color: var(--_slds-c-globalheader-buttonicon-color); width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); } .slds-global-actions__item-action { transition: color 200ms linear; } .slds-global-actions__item-action .slds-icon { fill: var(--_slds-c-globalheader-buttonicon-color); width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); } .slds-global-actions__item-action:hover:not(:disabled) .slds-icon, .slds-global-actions__item-action:focus .slds-icon { fill: var(--_slds-c-globalheader-buttonicon-color-hover); } .slds-global-actions__item-action:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-global-actions__item-action:active { box-shadow: none; } .slds-global-actions__item-action:active .slds-icon { animation: click-icon 120ms cubic-bezier(1, 1.9, 0.94, 0.98); } .slds-global-actions__item-action:active:not(:disabled) .slds-icon { fill: var(--_slds-c-globalheader-buttonicon-color-active); } .slds-global-actions__item_help, .slds-global-actions__item--help, .slds-global-actions__item_notification, .slds-global-actions__item--notification { margin-inline: var(--slds-g-spacing-1); } .slds-global-actions__item_notification .slds-icon, .slds-global-actions__item--notification .slds-icon { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); } @keyframes click-icon { 25% { transform: scale(0.94, 0.94); } 100% { transform: scale(0.98, 0.98); } } .slds-global-actions__avatar { box-shadow: var(--_slds-c-globalheader-buttonicon-color) 0 0 0 0; border-radius: var(--slds-g-radius-border-circle); border: 0; margin-inline-start: var(--slds-g-spacing-2); padding: 0; overflow: hidden; transition: transform 80ms ease-out, box-shadow 0.1s linear; } .slds-global-actions__avatar:hover, .slds-global-actions__avatar:focus { box-shadow: var(--_slds-c-globalheader-buttonicon-color) 0 0 0 2px; } .slds-global-actions__avatar:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-global-actions__favorites { display: inline-flex; } .slds-global-actions__favorites-action { border-color: var(--_slds-c-globalheader-favorites-color-border); width: auto; padding-inline-end: var(--slds-g-spacing-1); padding-inline-start: var(--slds-g-spacing-1); } .slds-global-actions__favorites-action:hover { border-color: var(--_slds-c-globalheader-favorites-color-border-hover); } .slds-global-actions__favorites-action .slds-button__icon { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); transition: transform 200ms ease-out; } .slds-global-actions__favorites-action:hover:not(:disabled) .slds-button__icon { transform: scale(1.1, 1.1); transform-origin: 60% 40%; } .slds-global-actions__favorites-action.slds-is-selected { background-color: var(--_slds-c-globalheader-favorites-color-background-selected); border-color: var(--_slds-c-globalheader-favorites-color-border-selected); } .slds-global-actions__favorites-action.slds-is-selected:hover, .slds-global-actions__favorites-action.slds-is-selected:focus { background-color: var(--_slds-c-globalheader-favorites-color-background-selected-hover); border-color: var(--_slds-c-globalheader-favorites-color-border-selected-hover); } .slds-global-actions__favorites-action.slds-is-selected .slds-button__icon { animation: click-favorites-icon 600ms cubic-bezier(0.46, 0.32, 0, 0.98); } .slds-global-actions__favorites-action:disabled, .slds-global-actions__favorites-action.slds-is-disabled { color: var(--_slds-c-globalheader-favorites-color-text-disabled); border-color: var(--_slds-c-globalheader-favorites-color-border-disabled); } .slds-global-actions__favorites-more { width: auto; padding-inline-start: var(--slds-g-spacing-1); padding-inline-end: var(--slds-g-spacing-1); border-color: var(--_slds-c-globalheader-favorites-color-border); } .slds-global-actions__favorites-more .slds-icon { width: var(--slds-g-sizing-4); height: var(--slds-g-sizing-4); } .slds-global-actions__favorites-more:hover { border-color: var(--_slds-c-globalheader-favorites-color-border-hover); } @keyframes click-favorites-icon { 25% { transform: scale(0.85, 0.85) rotate(15deg); } 75% { transform: scale(1.2, 1.2) rotate(0deg); } 100% { transform: scale(1, 1) rotate(0deg); } } .slds-global-actions__task { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); background: var(--_slds-c-globalheader-task-color-background); position: relative; top: -1px; } .slds-global-actions__task:hover { background: var(--_slds-c-globalheader-task-color-background-hover); } .slds-global-actions__task:active { background: var(--_slds-c-globalheader-task-color-background-active); } .slds-global-actions__task:not(:disabled) .slds-icon, .slds-global-actions__task:not(:disabled):hover .slds-icon, .slds-global-actions__task:not(:disabled):active .slds-icon { fill: var(--_slds-c-globalheader-color-background); } .slds-global-actions__task .slds-button__icon, .slds-global-actions__task .slds-icon { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); } .slds-global-actions__notifications { position: relative; } .slds-global-actions__notifications.slds-incoming-notification { animation: bell 0.8s ease-in-out; } .slds-notification-badge { display: inline-flex; justify-content: center; align-content: center; align-items: center; position: absolute; top: calc(6px * -1); right: calc(4px * -1); background: var(--_slds-c-globalheader-notificationbadge-color-background); color: var(--slds-g-color-neutral-base-100); border-radius: var(--slds-g-radius-border-circle); min-width: var(--slds-g-sizing-5); min-height: var(--slds-g-sizing-5); text-align: center; font-size: var(--slds-g-font-scale-neg-2); padding: 0 0.125rem; opacity: 0; pointer-events: none; } .slds-notification-badge.slds-show-notification { animation: ding 0.8s ease-out; opacity: 1; transition-delay: 0.5s; transform-origin: 1.1875rem 0; } @keyframes ding { 75% { transform: scale(0.5, 0.5); } 85% { transform: scale(1.5, 1.5); } 100% { transform: scale(1, 1); } } @keyframes bell { 45% { transform: rotate(15deg); } 57% { transform: rotate(-15deg); } 70% { transform: rotate(7deg); } 77% { transform: rotate(-5deg); } } .slds-context-bar { display: flex; height: var(--slds-s-navigation-sizing-height, 2.5rem); background-color: var(--slds-g-color-surface-container-1); border-bottom: var(--_slds-c-globalnavigation-sizing-border, 3px) solid var(--slds-g-color-accent-2); color: var(--slds-g-color-on-surface-3); position: relative; padding-block-start: var(--_slds-c-globalnavigation-spacing-block, 0); padding-block-end: var(--_slds-c-globalnavigation-spacing-block, 0); } .slds-context-bar .slds-context-bar__button { color: inherit; } .slds-context-bar .slds-context-bar__icon-action { margin-left: auto; } .slds-context-bar .slds-is-unsaved .slds-context-bar__label-action { position: relative; font-style: italic; line-height: normal; } .slds-context-bar .slds-is-unsaved .slds-indicator_unread, .slds-context-bar .slds-is-unsaved .slds-indicator--unread { margin-left: -0.35rem; } .slds-context-bar .slds-has-notification .slds-indicator_unread, .slds-context-bar .slds-has-notification .slds-indicator--unread { display: inline-block; flex-shrink: 0; height: 6px; width: 6px; left: auto; position: relative; top: auto; } .slds-context-bar .slds-has-notification .slds-indicator_unsaved, .slds-context-bar .slds-has-notification .slds-indicator--unsaved { top: rem(-4px); } .slds-context-bar__primary, .slds-context-bar__secondary, .slds-context-bar__tertiary { display: flex; flex-shrink: 0; } .slds-context-bar__primary { padding-inline-start: var(--slds-g-spacing-4); } .slds-context-bar__secondary { flex: 1 1 0%; min-width: 0; gap: var(--_slds-c-globalnavigation-spacing-gap, 0); } .slds-context-bar__secondary .slds-grid { gap: inherit; } .slds-context-bar__vertical-divider { width: 0; overflow: hidden; border-left: 1px solid var(--slds-g-color-border-1); } .slds-context-bar__item { display: flex; align-content: center; align-items: stretch; white-space: nowrap; position: relative; border-radius: var(--_slds-c-globalnavigation-item-radius-border, 0); max-width: var(--_slds-c-globalnavigation-item-sizing-width-max, var(--slds-g-sizing-14)); transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } .slds-context-bar__item:not(.slds-no-hover):has(:focus-visible):not(:has(.slds-button:focus-visible)) { outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -6px; } .slds-context-bar__item .slds-button__icon, .slds-context-bar__item .slds-icon { fill: var(--slds-g-color-on-surface-1); } .slds-context-bar__item:not(.slds-no-hover):hover { outline: 0; background-color: var(--_slds-c-globalnavigation-item-color-background-hover, var(--slds-g-color-accent-light-1)) !important; text-decoration: none; cursor: pointer; } .slds-context-bar__item:not(.slds-no-hover):hover::after { opacity: 1; } .slds-context-bar__item::before { bottom: 0; content: ''; height: auto; left: 0; position: absolute; right: 0; top: 0; transition-property: top, background-color; } .slds-context-bar__item::after { content: ''; width: 100%; height: var(--_slds-c-globalnavigation-item-sizing-border-hover, 3px); display: block; background: var(--_slds-c-globalnavigation-item-color-border-hover, color-mix(in oklab, var(--slds-g-color-accent-2) 80%, black)); position: absolute; bottom: calc(var(--_slds-c-globalnavigation-item-sizing-border-hover, 3px) * -1); border-radius: var(--_slds-c-globalnavigation-item-radius-border, 0); left: 0; right: 0; opacity: 0; } .slds-context-bar__item.slds-is-active { background-color: var(--_slds-c-globalnavigation-item-color-background-active, var(--slds-g-color-accent-light-1)) !important; color: var(--_slds-c-globalnavigation-item-color-active, var(--slds-g-color-on-surface-3)); text-decoration: none; cursor: pointer; animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both; } .slds-context-bar__item.slds-is-active::before { content: ''; height: var(--_slds-c-globalnavigation-item-sizing-border-active, 3px); display: block; background: var(--slds-g-color-accent-2); position: absolute; top: 0; left: 0; right: 0; animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both; } .slds-context-bar__item.slds-is-active::after { opacity: 1; background: var(--_slds-c-globalnavigation-item-color-border-active, var(--slds-g-color-accent-2)); } .slds-context-bar__item.slds-is-active .slds-button__icon, .slds-context-bar__item.slds-is-active .slds-icon { fill: var(--_slds-c-globalnavigation-item-color-active, var(--slds-g-color-on-surface-1)); } .slds-context-bar__item.slds-has-notification { background: var(--slds-g-color-accent-container-1); } @keyframes error-pulse { 0% { background-color: var(--slds-g-color-error-container-1); } 40% { background-color: var(--slds-g-color-error-container-2); } 100% { background-color: var(--slds-g-color-error-container-1); } } @keyframes success-pulse { 0% { background-color: var(--slds-g-color-success-container-1); } 40% { background-color: var(--slds-g-color-success-container-2); } 100% { background-color: var(--slds-g-color-success-container-1); } } @keyframes warning-pulse { 0% { background-color: var(--slds-g-color-warning-container-1); } 40% { background-color: var(--slds-g-color-warning-base-80); } 100% { background-color: var(--slds-g-color-warning-container-1); } } .slds-context-bar__item.slds-has-success .slds-context-bar__label-action { color: var(--slds-g-color-on-success-1); } .slds-context-bar__item.slds-has-success .slds-button__icon, .slds-context-bar__item.slds-has-success .slds-icon { fill: var(--slds-g-color-on-success-1, var(--slds-g-color-on-surface-1)); } .slds-context-bar__item.slds-has-success::before { animation: none; animation-duration: 1s; animation-iteration-count: 3; animation-delay: 150ms; animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1); background-color: var(--slds-g-color-success-container-1); bottom: 0; content: ''; height: auto; left: 0; position: absolute; right: 0; top: 0; transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); animation-name: success-pulse; } .slds-context-bar__item.slds-has-success:hover::before { background-color: var(--slds-g-color-success-container-2); height: auto; } .slds-context-bar__item.slds-has-success::after { background-color: var(--_slds-c-globalnavigation-item-color-border-success); } .slds-context-bar__item.slds-has-success .slds-indicator_unread, .slds-context-bar__item.slds-has-success .slds-indicator--unread { background-color: var(--slds-g-color-neutral-base-100); } .slds-context-bar__item.slds-has-success .slds-indicator_unsaved, .slds-context-bar__item.slds-has-success .slds-indicator--unsaved { color: var(--slds-g-color-neutral-base-100); } .slds-context-bar__item.slds-has-error .slds-context-bar__label-action { color: var(--slds-g-color-on-error-1); } .slds-context-bar__item.slds-has-error .slds-button__icon, .slds-context-bar__item.slds-has-error .slds-icon { fill: var(--slds-g-color-on-error-1, var(--slds-g-color-on-surface-1)); } .slds-context-bar__item.slds-has-error::before { animation: none; animation-duration: 1s; animation-iteration-count: 3; animation-delay: 150ms; animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1); background-color: var(--slds-g-color-error-container-1); bottom: 0; content: ''; height: auto; left: 0; position: absolute; right: 0; top: 0; transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); animation-name: error-pulse; } .slds-context-bar__item.slds-has-error:hover::before { background-color: var(--slds-g-color-error-container-2); height: auto; } .slds-context-bar__item.slds-has-error::after { background-color: var(--_slds-c-globalnavigation-item-color-border-error); } .slds-context-bar__item.slds-has-error .slds-indicator_unread, .slds-context-bar__item.slds-has-error .slds-indicator--unread { background-color: var(--slds-g-color-neutral-base-100); } .slds-context-bar__item.slds-has-error .slds-indicator_unsaved, .slds-context-bar__item.slds-has-error .slds-indicator--unsaved { color: var(--slds-g-color-neutral-base-100); } .slds-context-bar__item.slds-has-warning .slds-context-bar__label-action { color: var(--slds-g-color-on-warning-1); } .slds-context-bar__item.slds-has-warning .slds-button__icon, .slds-context-bar__item.slds-has-warning .slds-icon { fill: var(--slds-g-color-on-warning-1); } .slds-context-bar__item.slds-has-warning::before { animation: none; animation-duration: 1s; animation-iteration-count: 3; animation-delay: 150ms; animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1); background-color: var(--slds-g-color-warning-container-1); bottom: 0; content: ''; height: auto; left: 0; position: absolute; right: 0; top: 0; transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); animation-name: warning-pulse; } .slds-context-bar__item.slds-has-warning:hover::before { background-color: var(--slds-g-color-warning-base-80); height: auto; } .slds-context-bar__item.slds-has-warning::after { background-color: var(--_slds-c-globalnavigation-item-color-border-warning); } .slds-context-bar__item.slds-has-warning .slds-indicator_unread, .slds-context-bar__item.slds-has-warning .slds-indicator--unread { background-color: currentColor; } .slds-context-bar__item.slds-has-warning .slds-indicator_unsaved, .slds-context-bar__item.slds-has-warning .slds-indicator--unsaved { color: currentColor; } .slds-context-bar__item.slds-has-success.slds-is-active::after, .slds-context-bar__item.slds-has-warning.slds-is-active::after, .slds-context-bar__item.slds-has-error.slds-is-active::after { content: ''; background: var(--slds-g-color-neutral-base-30); position: absolute; height: 4px; opacity: 0.4; top: 0; right: 0; left: 0; } .slds-context-bar__item.slds-has-success.slds-has-focus::after, .slds-context-bar__item.slds-has-warning.slds-has-focus::after, .slds-context-bar__item.slds-has-error.slds-has-focus::after { height: 4px; } .slds-context-bar__item.slds-has-success:not(.slds-no-hover):has(:focus-visible):not(:has(.slds-button:focus-visible))::before, .slds-context-bar__item.slds-has-warning:not(.slds-no-hover):has(:focus-visible):not(:has(.slds-button:focus-visible))::before, .slds-context-bar__item.slds-has-error:not(.slds-no-hover):has(:focus-visible):not(:has(.slds-button:focus-visible))::before { box-shadow: var(--slds-g-shadow-inset-focus-1); } @keyframes bkAnim { 50% { background-color: var(--slds-g-color-neutral-base-100); } 100% { background-color: var(--_slds-c-globalnavigation-item-color-background-active, var(--slds-g-color-accent-light-1)); } } @keyframes navBounceIn { 0% { transform: translate3d(0, 20px, 0); opacity: 0; } 20% { opacity: 0; } 90% { transform: translate3d(0, 1px, 0); } 100% { transform: translate3d(0, 0, 0); } } .slds-context-bar__item_divider-left, .slds-context-bar__item--divider-left { border-left: 1px solid var(--slds-g-color-border-1); } .slds-context-bar__item_divider-right, .slds-context-bar__item--divider-right { border-right: 1px solid var(--slds-g-color-border-1); } .slds-context-bar__label-action { display: flex; align-content: center; align-items: center; flex-grow: 1; padding: 0 var(--slds-g-spacing-3); min-width: 0%; color: inherit; font-weight: var(--_slds-c-globalnavigation-font-weight, normal); z-index: 1; } .slds-context-bar__label-action:focus-visible, .slds-context-bar__label-action:focus-visible:hover { outline: 0; text-decoration: var(--_slds-c-globalnavigation-font-decoration-focus, underline); } .slds-context-bar__label-action:hover { text-decoration: none; } .slds-context-bar__label-action:hover, .slds-context-bar__label-action:focus { color: inherit; } .slds-context-bar__label-action:active { color: inherit; text-decoration: none; } .slds-context-bar__icon-action { display: flex; align-items: center; align-content: center; margin-left: calc(var(--slds-g-spacing-1) * -1); padding: 0 var(--slds-g-spacing-2); color: var(--slds-g-color-on-surface-1); border-radius: 0; flex-shrink: 0; } .slds-context-bar__icon-action:focus-visible { outline: 0; } .slds-context-bar__icon-action:focus-visible .slds-context-bar__button { outline: 0; box-shadow: var(--slds-g-shadow-outline-focus-1); } .slds-context-bar__icon-action:focus-visible ~ .slds-dropdown { visibility: visible; opacity: 1; } .slds-context-bar__icon-action:hover, .slds-context-bar__icon-action:focus { color: var(--slds-g-color-on-surface-1); } .slds-context-bar__icon-action:active { color: var(--slds-g-color-on-surface-1); } .slds-context-bar__icon-action .slds-icon-waffle_container, .slds-context-bar__icon-action .slds-icon-waffle--container { width: 2rem; height: 2rem; margin-inline-end: var(--slds-g-spacing-1); margin-inline-start: calc(var(--slds-g-spacing-2) * -1); } .slds-context-bar__icon-action .slds-icon-waffle { margin-right: auto; margin-left: auto; } .slds-context-bar__dropdown-trigger .slds-dropdown { margin-top: 3px; } .slds-context-bar__dropdown-trigger .slds-dropdown::before { content: ''; position: absolute; bottom: 100%; width: 100%; height: 3px; } .slds-context-bar__app-name { padding-block: 0; padding-inline: 0 var(--slds-g-spacing-5); font-size: var(--slds-g-font-scale-3); font-weight: var(--_slds-c-globalnavigation-app-font-weight, normal); line-height: var(--slds-g-font-lineheight-2); } .slds-context-bar__object-switcher { min-width: 9rem; max-width: var(--slds-g-sizing-14); border-left: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-right: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: 0; } .slds-context-bar_tabs, .slds-context-bar--tabs { border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-context-bar_tabs .slds-context-bar__secondary, .slds-context-bar--tabs .slds-context-bar__secondary { gap: 0; } .slds-context-bar__item_tab, .slds-context-bar__item--tab { width: 12.5rem; border-right: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: 0; } .slds-context-bar__item_tab .slds-context-bar__label-action, .slds-context-bar__item--tab .slds-context-bar__label-action { padding: 0 var(--slds-g-spacing-2); } .slds-context-bar__item_tab .slds-icon_container, .slds-context-bar__item--tab .slds-icon--container { --slds-c-icon-color-background: transparent; --slds-c-icon-color-foreground: var(--slds-g-color-on-surface-1); } .slds-context-bar__item_tab.slds-is-pinned, .slds-context-bar__item--tab.slds-is-pinned { width: auto; padding-right: var(--slds-g-spacing-2); } .slds-context-bar__item_tab.slds-is-pinned .slds-context-bar__label-action, .slds-context-bar__item--tab.slds-is-pinned .slds-context-bar__label-action { padding: 0 var(--slds-g-spacing-2); } .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active, .slds-context-bar__item--tab.slds-has-sub-tabs.slds-is-active, .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover, .slds-context-bar__item--tab.slds-has-sub-tabs.slds-is-active:hover { animation: none; background-color: transparent !important; } .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active .slds-context-bar__label-action::after, .slds-context-bar__item--tab.slds-has-sub-tabs.slds-is-active .slds-context-bar__label-action::after, .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover .slds-context-bar__label-action::after, .slds-context-bar__item--tab.slds-has-sub-tabs.slds-is-active:hover .slds-context-bar__label-action::after { content: ''; display: block; position: absolute; left: 0; bottom: calc(var(--_slds-c-globalnavigation-item-sizing-border-active, 3px) * -1); height: var(--_slds-c-globalnavigation-item-sizing-border-active, 3px); width: 100%; background-color: var(--slds-g-color-surface-container-1); border: 0; mix-blend-mode: unset; } .slds-indicator_unsaved, .slds-indicator--unsaved { color: var(--slds-g-color-accent-2); align-self: center; position: relative; } .slds-indicator-container { display: inline; margin-inline-end: var(--slds-g-spacing-1); } .slds-indicator-container:empty { margin-inline-end: 0; } .slds-icon-waffle_container, .slds-icon-waffle--container { border: 0; outline: 0; padding: 0; } .slds-icon-waffle_container:hover .slds-r1, .slds-icon-waffle--container:hover .slds-r1, .slds-icon-waffle_container:hover .slds-r2, .slds-icon-waffle--container:hover .slds-r2, .slds-icon-waffle_container:hover .slds-r3, .slds-icon-waffle--container:hover .slds-r3, .slds-icon-waffle_container:hover .slds-r4, .slds-icon-waffle--container:hover .slds-r4, .slds-icon-waffle_container:hover .slds-r5, .slds-icon-waffle--container:hover .slds-r5, .slds-icon-waffle_container:hover .slds-r6, .slds-icon-waffle--container:hover .slds-r6, .slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle--container:hover .slds-r7, .slds-icon-waffle_container:hover .slds-r8, .slds-icon-waffle--container:hover .slds-r8, .slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle--container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r1, .slds-icon-waffle--container:focus .slds-r1, .slds-icon-waffle_container:focus .slds-r2, .slds-icon-waffle--container:focus .slds-r2, .slds-icon-waffle_container:focus .slds-r3, .slds-icon-waffle--container:focus .slds-r3, .slds-icon-waffle_container:focus .slds-r4, .slds-icon-waffle--container:focus .slds-r4, .slds-icon-waffle_container:focus .slds-r5, .slds-icon-waffle--container:focus .slds-r5, .slds-icon-waffle_container:focus .slds-r6, .slds-icon-waffle--container:focus .slds-r6, .slds-icon-waffle_container:focus .slds-r7, .slds-icon-waffle--container:focus .slds-r7, .slds-icon-waffle_container:focus .slds-r8, .slds-icon-waffle--container:focus .slds-r8, .slds-icon-waffle_container:focus .slds-r9, .slds-icon-waffle--container:focus .slds-r9 { animation: slds-icon-waffle-throb 2 200ms alternate; } .slds-icon-waffle_container:hover .slds-r1, .slds-icon-waffle--container:hover .slds-r1, .slds-icon-waffle_container:hover .slds-r2, .slds-icon-waffle--container:hover .slds-r2, .slds-icon-waffle_container:hover .slds-r3, .slds-icon-waffle--container:hover .slds-r3, .slds-icon-waffle_container:focus .slds-r1, .slds-icon-waffle--container:focus .slds-r1, .slds-icon-waffle_container:focus .slds-r2, .slds-icon-waffle--container:focus .slds-r2, .slds-icon-waffle_container:focus .slds-r3, .slds-icon-waffle--container:focus .slds-r3 { background-color: var(--slds-g-color-brand-base-50, #418fde); } .slds-icon-waffle_container:hover .slds-r4, .slds-icon-waffle--container:hover .slds-r4, .slds-icon-waffle_container:hover .slds-r5, .slds-icon-waffle--container:hover .slds-r5, .slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle--container:hover .slds-r7, .slds-icon-waffle_container:focus .slds-r4, .slds-icon-waffle--container:focus .slds-r4, .slds-icon-waffle_container:focus .slds-r5, .slds-icon-waffle--container:focus .slds-r5, .slds-icon-waffle_container:focus .slds-r7, .slds-icon-waffle--container:focus .slds-r7 { background-color: var(--slds-g-color-warning-base-70, #ed8b00); } .slds-icon-waffle_container:hover .slds-r6, .slds-icon-waffle--container:hover .slds-r6, .slds-icon-waffle_container:hover .slds-r8, .slds-icon-waffle--container:hover .slds-r8, .slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle--container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r6, .slds-icon-waffle--container:focus .slds-r6, .slds-icon-waffle_container:focus .slds-r8, .slds-icon-waffle--container:focus .slds-r8, .slds-icon-waffle_container:focus .slds-r9, .slds-icon-waffle--container:focus .slds-r9 { background-color: var(--slds-g-color-palette-yellow-80, #ffb60f); } .slds-icon-waffle_container:hover .slds-r2, .slds-icon-waffle--container:hover .slds-r2, .slds-icon-waffle_container:hover .slds-r4, .slds-icon-waffle--container:hover .slds-r4, .slds-icon-waffle_container:focus .slds-r2, .slds-icon-waffle--container:focus .slds-r2, .slds-icon-waffle_container:focus .slds-r4, .slds-icon-waffle--container:focus .slds-r4 { transition-delay: 50ms; animation-delay: 50ms; } .slds-icon-waffle_container:hover .slds-r3, .slds-icon-waffle--container:hover .slds-r3, .slds-icon-waffle_container:hover .slds-r5, .slds-icon-waffle--container:hover .slds-r5, .slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle--container:hover .slds-r7, .slds-icon-waffle_container:focus .slds-r3, .slds-icon-waffle--container:focus .slds-r3, .slds-icon-waffle_container:focus .slds-r5, .slds-icon-waffle--container:focus .slds-r5, .slds-icon-waffle_container:focus .slds-r7, .slds-icon-waffle--container:focus .slds-r7 { transition-delay: 100ms; animation-delay: 100ms; } .slds-icon-waffle_container:hover .slds-r6, .slds-icon-waffle--container:hover .slds-r6, .slds-icon-waffle_container:hover .slds-r8, .slds-icon-waffle--container:hover .slds-r8, .slds-icon-waffle_container:focus .slds-r6, .slds-icon-waffle--container:focus .slds-r6, .slds-icon-waffle_container:focus .slds-r8, .slds-icon-waffle--container:focus .slds-r8 { transition-delay: 150ms; animation-delay: 150ms; } .slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle--container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r9, .slds-icon-waffle--container:focus .slds-r9 { transition-delay: 200ms; animation-delay: 200ms; } .slds-icon-waffle { width: 1.3125rem; height: 1.3125rem; position: relative; display: block; cursor: pointer; } .slds-icon-waffle .slds-r1, .slds-icon-waffle .slds-r2, .slds-icon-waffle .slds-r3, .slds-icon-waffle .slds-r4, .slds-icon-waffle .slds-r5, .slds-icon-waffle .slds-r6, .slds-icon-waffle .slds-r7, .slds-icon-waffle .slds-r8, .slds-icon-waffle .slds-r9 { width: 0.3125rem; height: 0.3125rem; background-color: var(--slds-g-color-neutral-base-50, #747474); display: inline-block; position: absolute; border-radius: 50%; transition: background-color 100ms; transform-origin: 50% 50%; will-change: scale, background-color; } .slds-icon-waffle .slds-r1 { top: 0; left: 0; transition-delay: 200ms; } .slds-icon-waffle .slds-r2 { top: 0; left: 0.5rem; } .slds-icon-waffle .slds-r3 { top: 0; right: 0; } .slds-icon-waffle .slds-r4 { top: 0.5rem; left: 0; } .slds-icon-waffle .slds-r5 { top: 0.5rem; left: 0.5rem; } .slds-icon-waffle .slds-r6 { top: 0.5rem; right: 0; } .slds-icon-waffle .slds-r7 { bottom: 0; left: 0; } .slds-icon-waffle .slds-r8 { bottom: 0; left: 0.5rem; } .slds-icon-waffle .slds-r9 { bottom: 0; right: 0; } .slds-icon-waffle .slds-r2, .slds-icon-waffle .slds-r4 { transition-delay: 150ms; } .slds-icon-waffle .slds-r3, .slds-icon-waffle .slds-r5, .slds-icon-waffle .slds-r7 { transition-delay: 100ms; } .slds-icon-waffle .slds-r6, .slds-icon-waffle .slds-r8 { transition-delay: 50ms; } @keyframes slds-icon-waffle-throb { to { transform: scale(1.5); } } .slds-expression__options { width: var(--slds-g-sizing-14); } .slds-expression__options .slds-form-element__control { clear: none; } .slds-expression__legend { float: left; width: var(--slds-g-sizing-10); padding-top: calc((var(--slds-g-font-lineheight-base) * var(--slds-g-font-scale-neg-1)) + (1.875rem / 4)); font-weight: var(--slds-g-font-weight-7); } .slds-expression__legend.slds-expression__legend_group, .slds-expression__legend.slds-expression__legend--group { margin-top: 0; } .slds-expression__row { margin-top: var(--slds-g-spacing-3); } .slds-expression__row.slds-expression__row_group, .slds-expression__row.slds-expression__row--group { padding-left: var(--slds-g-spacing-8); } .slds-expression__row .slds-form-element__label { line-height: 1.5; } .slds-expression__buttons { margin-top: var(--slds-g-spacing-3); } .slds-expression__group { background: var(--slds-g-color-surface-2); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); padding: var(--slds-g-spacing-3); margin-top: var(--slds-g-spacing-3); } .slds-expression__title { font-size: var(--slds-g-font-scale-3); font-weight: bold; margin-bottom: var(--slds-g-spacing-2); } .slds-expression__custom-logic { margin-top: var(--slds-g-spacing-3); } .slds-filters { position: relative; } .slds-filters__header { padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3); } .slds-filters__body { padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3); } .slds-filters__footer { padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4); } .slds-filters__item { padding: var(--slds-g-spacing-3); background: var(--slds-g-color-surface-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); } .slds-filters__item.slds-is-new { background: var(--slds-g-color-palette-yellow-90); color: var(--slds-g-color-neutral-base-10, var(--slds-g-color-on-surface-2)); } .slds-filters__item.slds-has-error { border-color: var(--slds-g-color-border-error-1); } .slds-filters__item.slds-is-locked { background: var(--slds-g-color-surface-2); } .slds-filters__item + .slds-filters__item { margin-top: var(--slds-g-spacing-2); } .slds-filters__item:hover { background: var(--slds-g-color-surface-2); } .slds-filters__group { background: var(--slds-g-color-surface-2); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); padding: var(--slds-g-spacing-3); } .slds-expression_formula__rte, .slds-expression--formula__rte { margin-block-start: var(--slds-g-spacing-3); } .slds-builder-header_container, .slds-builder-header--container { position: fixed; width: 100%; inset-block-start: 0; inset-inline-start: 0; z-index: 100; } .slds-builder-header { position: relative; display: flex; height: var(--slds-s-header-sizing-height, 3.125rem); background: var(--slds-g-color-surface-inverse-1, var(--slds-g-color-brand-base-20)); color: var(--slds-g-color-on-surface-inverse-1, var(--slds-g-color-neutral-base-100)); } .slds-builder-header__item { display: flex; align-content: center; align-items: center; white-space: nowrap; } .slds-builder-header__item + .slds-builder-header__item { border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-surface-inverse-2, var(--slds-g-color-brand-base-10)); } .slds-builder-header__item-action, .slds-builder-header__item-label { color: currentColor; padding: 0 var(--slds-g-spacing-4); display: flex; align-content: center; align-items: center; flex-grow: 1; min-width: 0%; height: 100%; font-weight: var(--slds-g-font-weight-4); line-height: inherit; } .slds-builder-header__item-action .slds-media__body, .slds-builder-header__item-label .slds-media__body { flex-basis: auto; } .slds-builder-header__item-action { transition: all 150ms linear; border-radius: 0; } .slds-builder-header__item-action:hover, .slds-builder-header__item-action:focus { background-color: var(--slds-g-color-surface-inverse-2, var(--slds-g-color-brand-base-10)); color: var(--slds-g-color-on-surface-inverse-1, var(--slds-g-color-neutral-base-100)); text-decoration: none; --slds-c-button-radius-border: 0; } .slds-builder-header__item-action:focus { text-decoration: underline; outline: none; border-radius: 0; } .slds-builder-header__item-action:focus-visible { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); outline: 0; text-decoration: none; } .slds-builder-header__nav, .slds-builder-header__utilities { align-items: stretch; } .slds-builder-header__nav-list { display: flex; } .slds-builder-header__utilities { margin-inline-start: auto; } .slds-builder-header__nav-item, .slds-builder-header__utilities-item { display: flex; align-content: center; align-items: stretch; } .slds-builder-header__nav-item + .slds-builder-header__nav-item, .slds-builder-header__nav-item + .slds-builder-header__utilities-item, .slds-builder-header__utilities-item + .slds-builder-header__nav-item, .slds-builder-header__utilities-item + .slds-builder-header__utilities-item { border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-surface-inverse-2, var(--slds-g-color-brand-base-10)); } .slds-builder-toolbar { display: flex; padding-block: var(--slds-g-sizing-3); padding-inline: var(--slds-g-sizing-4); background: var(--slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-100)); border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1, var(--slds-g-color-border-base-1)); } .slds-builder-toolbar__actions { display: flex; align-items: center; margin-inline-start: auto; } .slds-builder-toolbar__item-group { display: flex; align-items: center; } .slds-builder-toolbar__item-group + .slds-builder-toolbar__item-group { margin-inline-start: var(--slds-g-sizing-2); } .slds-publisher { display: flex; } .slds-publisher.slds-is-active { display: block; } .slds-publisher.slds-is-active .slds-publisher__toggle-visibility { display: inherit; height: auto; overflow: visible; width: auto; } .slds-publisher.slds-is-active .slds-publisher__input { line-height: var(--slds-g-font-lineheight-base); height: auto; max-height: 10rem; resize: vertical; padding-block-start: var(--slds-g-spacing-3); padding-block-end: var(--slds-g-spacing-3); } .slds-publisher .slds-publisher__toggle-visibility { display: block; height: 0; overflow: hidden; width: 0; color: var(--slds-s-label-color, var(--slds-g-color-on-surface-2)); } .slds-publisher__input { line-height: calc(var(--slds-g-sizing-9) - var(--slds-g-sizing-1)); padding-block: 0; padding-inline: var(--slds-g-spacing-4); resize: none; max-height: calc(var(--slds-g-sizing-9) - var(--slds-g-sizing-1) + 2px); width: 100%; border-radius: var(--slds-g-radius-border-2); font-family: inherit; } .slds-publisher__actions > .slds-button { margin-inline-start: var(--slds-g-spacing-3); } .slds-publisher_comment, .slds-publisher--comment { background-color: var(--slds-g-color-surface-container-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: var(--slds-g-radius-border-2); width: 100%; position: relative; min-height: calc(var(--slds-g-sizing-9) - var(--slds-g-sizing-1) + 2px); max-height: calc(var(--slds-g-sizing-9) - var(--slds-g-sizing-1) + 2px); } .slds-publisher_comment.slds-is-active, .slds-publisher--comment.slds-is-active { min-height: calc(var(--slds-g-sizing-10) + var(--slds-g-sizing-9)); max-height: var(--slds-g-sizing-14); } .slds-publisher_comment.slds-is-active .slds-publisher__input:focus-visible, .slds-publisher--comment.slds-is-active .slds-publisher__input:focus-visible { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .slds-publisher_comment .slds-publisher__input:focus-visible, .slds-publisher--comment .slds-publisher__input:focus-visible { box-shadow: var(--slds-g-shadow-outline-focus-1); } .slds-publisher_comment.slds-is-active .slds-publisher__actions, .slds-publisher--comment.slds-is-active .slds-publisher__actions { display: flex; } .slds-publisher_comment.slds-has-focus, .slds-publisher--comment.slds-has-focus { box-shadow: var(--slds-g-shadow-outline-focus-1); outline: 0; border-color: transparent; background-color: var(--slds-g-color-surface-container-1); } .slds-publisher_comment.slds-has-focus .slds-publisher__input, .slds-publisher--comment.slds-has-focus .slds-publisher__input { line-height: var(--slds-g-font-lineheight-6); } .slds-publisher_comment .slds-publisher__actions, .slds-publisher--comment .slds-publisher__actions { display: none; padding-block: 0 var(--slds-g-spacing-3); padding-inline: var(--slds-g-spacing-3); } .slds-publisher_comment .slds-attachments, .slds-publisher--comment .slds-attachments { padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); } .slds-feed { position: relative; max-width: 49rem; margin: auto; } .slds-feed__list { margin: 0; padding: 0; } .slds-feed__item { padding: var(--slds-g-spacing-var-block-2) 0; } @media (min-width: 48em) { .slds-feed__item { padding: var(--slds-g-spacing-var-block-3) 0; } } .slds-feed__item-comments { background-color: var(--slds-g-color-surface-container-2); border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-feed__item-comments .slds-comment { padding: var(--slds-g-spacing-var-block-2) var(--slds-g-spacing-4); } .slds-post { background-color: var(--slds-g-color-surface-container-1); padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4); } @media (max-width: 48em) { .slds-post { border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } } @media (min-width: 64em) { .slds-post { padding: 0 var(--slds-g-spacing-4) var(--slds-g-spacing-2); } } .slds-post__header { margin-block-end: var(--slds-g-spacing-var-block-3); } .slds-post__content { margin-block-end: var(--slds-g-spacing-3); } @media (min-width: 48em) { .slds-post__content { margin-block-end: var(--slds-g-spacing-5); } } .slds-post__footer { display: flex; font-size: var(--slds-g-font-scale-neg-1); flex-direction: column; } @media (min-width: 48em) { .slds-post__footer { flex-direction: row; } } .slds-post__footer-actions-list { justify-content: space-between; text-align: center; order: 1; } @media (max-width: 30em) { .slds-post__footer-actions-list { border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); margin: 0 calc(var(--slds-g-spacing-3) * -1) calc(var(--slds-g-spacing-3) * -1); padding: 0 var(--slds-g-spacing-4); } } @media (min-width: 48em) { .slds-post__footer-actions-list { order: 0; } } .slds-post__footer-action { display: flex; align-items: center; justify-content: center; color: var(--slds-g-color-on-surface-3); padding: var(--slds-g-spacing-3) 0; line-height: 1; } @media (min-width: 48em) { .slds-post__footer-action { margin-inline-end: var(--slds-g-spacing-4); padding: 0; } } .slds-post__footer-action .slds-icon { margin-inline-end: var(--slds-g-spacing-1); } .slds-post__footer-action:hover, .slds-post__footer-action:focus, .slds-post__footer-action.slds-is-active { color: var(--slds-s-link-color-hover); text-decoration: none; } .slds-post__footer-action:hover .slds-icon, .slds-post__footer-action:focus .slds-icon, .slds-post__footer-action.slds-is-active .slds-icon { fill: currentColor; } .slds-post__footer-action:focus-visible { box-shadow: var(--slds-g-shadow-outline-focus-1); border-radius: var(--slds-g-radius-border-1); outline: 0; } .slds-post__footer-meta-list { margin-block-end: var(--slds-g-spacing-4); } @media (min-width: 48em) { .slds-post__footer-meta-list { margin-inline-start: auto; margin-block-end: 0; } } .slds-region_narrow .slds-post, .slds-region--narrow .slds-post { border: 0; padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4); } .slds-region_narrow .slds-post__content, .slds-region--narrow .slds-post__content { margin-block-end: var(--slds-g-spacing-3); } .slds-region_narrow .slds-post__footer, .slds-region--narrow .slds-post__footer { flex-direction: column; } .slds-region_narrow .slds-post__footer-action, .slds-region--narrow .slds-post__footer-action { padding: var(--slds-g-spacing-3) 0; } .slds-region_narrow .slds-post__footer-actions-list, .slds-region--narrow .slds-post__footer-actions-list { order: 1; border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); margin: 0 calc(var(--slds-g-spacing-3) * -1) calc(var(--slds-g-spacing-3) * -1); padding: 0 var(--slds-g-spacing-4); } .slds-region_narrow .slds-post__footer-meta-list, .slds-region--narrow .slds-post__footer-meta-list { margin-inline-start: 0; margin-block-end: var(--slds-g-spacing-4); } .slds-comment__content { padding: var(--slds-g-spacing-var-block-1) 0; } .slds-post__payload { padding: 0 0 var(--slds-g-spacing-4); } .slds-post__payload:empty { padding: 0; border: 0; } .slds-modal { opacity: 0; visibility: hidden; transition: transform 0.1s linear, opacity 0.1s linear; position: fixed; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; z-index: 9001; } .slds-modal .slds-modal__title { font-weight: var(--slds-c-modal-heading-font-weight, var(--slds-s-container-heading-font-weight)); font-size: var(--slds-c-modal-heading-font-size, var(--slds-s-container-heading-font-size, var(--slds-g-font-scale-2))); line-height: var(--slds-g-font-lineheight-2); } .slds-modal__container { position: relative; transform: translate(0, 0); transition: transform 0.1s linear, opacity 0.1s linear; display: flex; flex-direction: column; justify-content: center; margin-block: 0; margin-inline: var(--slds-g-spacing-6); height: 100%; padding-block-start: var(--slds-g-spacing-8); padding-inline-end: 0; padding-block-end: var(--slds-g-spacing-12); padding-inline-start: 0; border-radius: var(--slds-g-radius-border-2); } @media (min-width: 48em) { .slds-modal__container { margin-block: 0; margin-inline: auto; width: 50%; max-width: 40rem; min-width: 20rem; } } .slds-modal__header { position: relative; border-start-end-radius: var(--slds-c-modal-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); border-start-start-radius: var(--slds-c-modal-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); border-block-end-width: var(--slds-c-modal-sizing-border, var(--slds-g-sizing-border-2)); border-block-end-style: solid; border-block-end-color: var(--slds-c-modal-color-border, var(--slds-g-color-border-1)); background-color: var(--slds-c-modal-header-color-background, var(--slds-c-modal-color-background, var(--slds-g-color-surface-container-1))); color: var(--slds-c-modal-header-text-color, var(--slds-c-modal-text-color)); flex-shrink: 0; padding-block-start: var(--slds-c-modal-header-spacing-blockstart, var(--slds-g-spacing-4)); padding-inline-end: var(--slds-c-modal-header-spacing-inlineend, var(--slds-g-spacing-4)); padding-block-end: var(--slds-c-modal-header-spacing-blockend, var(--slds-g-spacing-4)); padding-inline-start: var(--slds-c-modal-header-spacing-inlinestart, var(--slds-g-spacing-4)); text-align: center; } .slds-modal__header + .slds-modal__menu { border-start-end-radius: 0; border-start-start-radius: 0; } .slds-modal__header .slds-modal__close { position: absolute; inset-block-start: calc(var(--slds-g-spacing-6) * -1.25); inset-inline-end: 0; margin-inline-start: 0; inset-block-end: 0; } .slds-modal__close { width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); margin-inline-start: auto; position: relative; inset-block-end: var(--slds-g-spacing-2); background-color: var(--slds-g-color-surface-container-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); } .slds-modal__close:hover, .slds-modal__close:focus-visible, .slds-modal__close:active { background-color: var(--slds-g-color-surface-container-2); } .slds-modal__close:focus-visible { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); border-color: transparent; } .slds-modal__content_headless, .slds-modal__content--headless, .slds-modal__header_empty + .slds-modal__content, .slds-modal__header--empty + .slds-modal__content { border-start-end-radius: var(--slds-c-modal-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); border-start-start-radius: var(--slds-c-modal-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); } .slds-modal__content { background-color: var(--slds-c-modal-content-color-background, var(--slds-c-modal-color-background, var(--slds-g-color-surface-container-1))); color: var(--slds-c-modal-content-text-color, var(--slds-c-modal-text-color, var(--slds-s-container-content-color))); overflow: hidden; overflow-y: auto; } .slds-modal__content_footless, .slds-modal__content--footless, .slds-modal__container > .slds-modal__content:last-child, .slds-modal__content_has-hidden-footer, .slds-modal__content--has-hidden-footer { border-end-end-radius: var(--slds-c-modal-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); border-end-start-radius: var(--slds-c-modal-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); box-shadow: var(--slds-c-modal-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16)); } .slds-modal__footer { border-end-end-radius: var(--slds-c-modal-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); border-end-start-radius: var(--slds-c-modal-radius-border, var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))); border-block-start-width: var(--slds-c-modal-sizing-border, var(--slds-g-sizing-border-2)); border-block-start-style: solid; border-block-start-color: var(--slds-c-modal-color-border, var(--slds-g-color-border-1)); background-color: var( --slds-c-modal-footer-color-background, var(--slds-c-modal-color-background, var(--slds-s-container-footer-color-background, var(--slds-g-color-surface-container-2))) ); color: var(--slds-c-modal-footer-text-color, var(--slds-c-modal-text-color)); flex-shrink: 0; padding-block-start: var(--slds-c-modal-footer-spacing-blockstart, var(--slds-g-spacing-3)); padding-inline-end: var(--slds-c-modal-footer-spacing-inlineend, var(--slds-g-spacing-4)); padding-block-end: var(--slds-c-modal-footer-spacing-blockend, var(--slds-g-spacing-3)); padding-inline-start: var(--slds-c-modal-footer-spacing-inlinestart, var(--slds-g-spacing-4)); text-align: right; box-shadow: var(--slds-c-modal-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16)); } .slds-modal__footer .slds-button + .slds-button { margin-inline-start: var(--slds-g-spacing-2); } .slds-modal__footer_directional .slds-button:first-child, .slds-modal__footer--directional .slds-button:first-child { float: inline-start; } @media (min-width: 48em) { .slds-modal_small .slds-modal__container, .slds-modal--small .slds-modal__container { width: 60%; max-width: 52.0625rem; min-width: 40rem; } } @media (min-width: 48em) { .slds-modal_medium .slds-modal__container, .slds-modal--medium .slds-modal__container { width: 70%; max-width: 75rem; min-width: 40rem; } } @media (min-width: 48em) { .slds-modal_large .slds-modal__container, .slds-modal--large .slds-modal__container { width: 90%; max-width: none; min-width: 40rem; } } @media (min-width: 48em) { .slds-modal_full .slds-modal__container, .slds-modal--full .slds-modal__container { width: 90%; max-width: none; min-width: 40rem; } } @media (max-width: 30em) { .slds-modal_full, .slds-modal--full { inset-block-start: env(safe-area-inset-top, 0); inset-block-end: auto; height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .slds-modal_full .slds-modal__header, .slds-modal--full .slds-modal__header { grid-area: header; border-start-start-radius: 0; border-start-end-radius: 0; } .slds-modal_full .slds-modal__container, .slds-modal--full .slds-modal__container { width: 100%; max-width: none; min-width: 0; margin: 0; padding-block-start: var(--slds-g-spacing-4); padding-inline-end: 0; padding-block-end: 0; padding-inline-start: 0; background-color: var(--slds-c-modal-header-color-background, var(--slds-c-modal-color-background, var(--slds-g-color-surface-container-1))); border-radius: 0; display: grid; height: 100dvh; grid-template-rows: min-content min-content 1fr min-content; grid-template-areas: 'close' 'header' 'content' 'footer'; grid-template-columns: 1fr; } .slds-modal_full .slds-modal__content_footless, .slds-modal--full .slds-modal__content--footless, .slds-modal_full .slds-modal__container > .slds-modal__content:last-child, .slds-modal--full .slds-modal__container > .slds-modal__content:last-child, .slds-modal_full .slds-modal__content_has-hidden-footer, .slds-modal--full .slds-modal__content--has-hidden-footer { border-end-end-radius: 0; border-end-start-radius: 0; box-shadow: none; } .slds-modal_full .slds-modal__close, .slds-modal--full .slds-modal__close { grid-area: close; inset-inline-end: var(--slds-g-spacing-4); color: var(--slds-g-color-on-surface-1); --slds-c-button-color-background: var(--slds-g-color-surface-1); --slds-c-button-color-background-active: var(--slds-g-color-surface-1); } .slds-modal_full .slds-modal__close:hover, .slds-modal--full .slds-modal__close:hover, .slds-modal_full .slds-modal__close:focus, .slds-modal--full .slds-modal__close:focus { color: var(--slds-g-color-on-surface-1); } .slds-modal_full .slds-modal__content, .slds-modal--full .slds-modal__content { grid-area: content; } .slds-modal_full .slds-modal__footer, .slds-modal--full .slds-modal__footer { grid-area: footer; border-end-end-radius: 0; border-end-start-radius: 0; box-shadow: none; } } .slds-modal_full lightning-button-icon + div, .slds-modal--full lightning-button-icon + div, .slds-modal_full lightning-modal, .slds-modal--full lightning-modal, .slds-modal_full lightning-modal-header, .slds-modal--full lightning-modal-header, .slds-modal_full lightning-modal-body, .slds-modal--full lightning-modal-body, .slds-modal_full lightning-modal-footer, .slds-modal--full lightning-modal-footer { display: contents; } .slds-backdrop { transition-duration: 0.4s; width: 100%; height: 100%; opacity: 0; visibility: hidden; position: fixed; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; background: var(--slds-s-backdrop-color-background); z-index: 9000; backdrop-filter: blur(5px); } .slds-backdrop_open, .slds-backdrop--open { visibility: visible; opacity: 1; transition: opacity 0.4s linear; } .slds-fade-in-open { opacity: 1; visibility: visible; transition: opacity 0.1s linear; } .slds-fade-in-open .slds-modal__container-reset { opacity: 1; visibility: visible; transform: translate(0, 0); } .slds-slide-up-open { opacity: 1; visibility: visible; transform: translate(0, 0); transition: opacity 0.1s linear, transform 0.2s linear; } .slds-slide-up-open .slds-modal__container-reset { opacity: 0; visibility: hidden; transform: translate(0, 1rem); transition: opacity 0.2s linear, transform 0.2s linear; } .slds-slide-up-saving { opacity: 1; visibility: visible; transform: translate(0, -1rem); } .slds-slide-down-cancel { opacity: 1; visibility: visible; transform: translate(0, 1rem); } .slds-modal__header_empty, .slds-modal__header--empty { --slds-c-modal-header-spacing-blockstart: 0; --slds-c-modal-header-spacing-blockend: 0; --slds-c-modal-header-spacing-inlinestart: 0; --slds-c-modal-header-spacing-inlineend: 0; --slds-c-modal-sizing-border: 0; } .slds-map_container, .slds-map--container { flex: 3 1 auto; } .slds-map { position: relative; min-width: 23.75rem; width: 100%; max-height: 100%; } .slds-map::before { content: ''; display: block; height: 0; width: 100%; padding-block-start: 56.25%; } .slds-map iframe { position: absolute; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; height: 100%; width: 100%; border: 0; } .slds-has-coordinates { display: flex; flex-wrap: wrap; overflow: auto; max-height: 41.25rem; background: var(--slds-g-color-surface-container-1); } .slds-has-coordinates .slds-map::before { padding-block-start: 75%; } .slds-coordinates { overflow: auto; flex: 1 1 auto; } .slds-coordinates__header { padding: var(--slds-g-spacing-4); } .slds-coordinates__title { font-size: var(--slds-g-font-scale-2); font-weight: var(--slds-g-font-weight-6); } .slds-coordinates__item-action { padding-inline: var(--slds-g-spacing-4); padding-block: var(--slds-g-spacing-2); width: 100%; } .slds-coordinates__item-action.slds-media { align-items: center; } .slds-coordinates__item-action .slds-text-link { display: block; } .slds-coordinates__item-action:hover, .slds-coordinates__item-action:focus { background-color: var(--slds-s-menu-item-color-background-active); outline: 0; } .slds-coordinates__item-action:hover .slds-text-link, .slds-coordinates__item-action:focus .slds-text-link { text-decoration: underline; } .slds-coordinates__item-action:focus-visible { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); outline: 0; } .slds-coordinates__item-action:active { background-color: var(--slds-s-menu-item-color-background-active); } .slds-coordinates__item-action[aria-pressed='true'] { background-color: var(--slds-s-menu-item-color-background-active); } .slds-app-launcher__tile { display: flex; align-items: stretch; margin: var(--slds-g-spacing-2) 0; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); cursor: move; background-color: var(--slds-g-color-surface-container-1); } .slds-app-launcher__tile:hover, .slds-app-launcher__tile:focus, .slds-app-launcher__tile:active { outline: 0; border-color: var(--slds-g-color-border-accent-3); } .slds-app-launcher__tile:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); outline: 0; } .slds-app-launcher__tile.slds-is-draggable .slds-app-launcher__tile-figure { padding-block-end: var(--slds-g-spacing-1); } .slds-app-launcher__tile.slds-is-grabbed { transform: rotate(3deg); } .slds-app-launcher__tile-figure { display: flex; flex-direction: column; flex-shrink: 0; padding: var(--slds-g-spacing-3); color: var(--slds-g-color-on-surface-inverse-1); border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: 0; border-end-start-radius: var(--slds-g-radius-border-2); border-end-end-radius: 0; text-align: center; --slds-c-avatar-radius-border: var(--slds-g-radius-border-2); } .slds-app-launcher__tile-body { flex: 1 1 auto; background: var(--slds-g-color-surface-container-2); padding-block: var(--slds-g-spacing-2); padding-inline: var(--slds-g-spacing-3); border-start-start-radius: 0; border-start-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: 0; border-end-end-radius: var(--slds-g-radius-border-2); color: var(--slds-g-color-on-surface-2); } .slds-app-launcher .slds-modal__header .slds-modal__close .slds-button__icon { fill: var(--slds-g-color-on-surface-1); } .slds-app-launcher .slds-app-launcher__header-search .slds-input-has-icon .slds-input__icon { fill: var(--slds-g-color-on-surface-1); } .slds-app-launcher .slds-app-launcher__tile-figure .slds-button__icon { fill: var(--slds-g-color-on-surface-1); } .slds-app-launcher__content { flex: 1 1 auto; } .slds-app-launcher__content .slds-section__title-action { background: transparent; } .slds-visual-picker { display: inline-flex; position: relative; flex-direction: column; border: 0; border-radius: 0; text-align: center; cursor: pointer; } .slds-visual-picker + .slds-visual-picker { margin-inline-start: var(--slds-g-spacing-4); } .slds-visual-picker:active .slds-visual-picker__figure { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-accent-1); box-shadow: 0 0 0 1px var(--slds-g-color-accent-1) inset; } .slds-visual-picker:hover .slds-visual-picker__figure { cursor: pointer; } .slds-visual-picker input:not(:disabled) ~ label:hover .slds-visual-picker__figure { cursor: pointer; outline: 0; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-accent-1); box-shadow: 0 0 0 1px var(--slds-g-color-accent-1) inset; } .slds-visual-picker input { width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; } .slds-visual-picker input:focus-visible ~ label .slds-visual-picker__figure { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-accent-1); box-shadow: var(--slds-g-shadow-outset-focus-1); outline: 0; } .slds-visual-picker input:checked ~ label .slds-visual-picker__figure { box-shadow: var(--slds-s-container-shadow); } .slds-visual-picker input:checked:focus-visible ~ label .slds-visual-picker__figure { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-visual-picker input:checked ~ label .slds-is-not-selected { display: none; } .slds-visual-picker input:checked ~ label .slds-is-selected { display: block; } .slds-visual-picker input:checked ~ label .slds-visual-picker__icon { background-color: var(--slds-g-color-accent-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-accent-1); } .slds-visual-picker input:checked ~ label .slds-visual-picker__text { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-accent-1); box-shadow: 0 0 0 1px var(--slds-g-color-accent-1) inset; } .slds-visual-picker input:checked ~ label .slds-visual-picker__text::after { content: ''; position: absolute; inset-block-start: 0; inset-inline-end: 0; border-color: transparent; border-style: solid; border-radius: 0 var(--slds-g-radius-border-2) 0 0; border-width: 1rem; border-inline-end-color: var(--slds-g-color-accent-1); border-block-start-color: var(--slds-g-color-accent-1); } .slds-visual-picker input:disabled { cursor: not-allowed; user-select: none; } .slds-visual-picker input:disabled ~ label .slds-visual-picker__body, .slds-visual-picker input:disabled ~ label .slds-visual-picker__text, .slds-visual-picker input:disabled ~ label .slds-visual-picker__text .slds-text-title { color: var(--slds-g-color-on-disabled-2); } .slds-visual-picker input:disabled ~ label .slds-visual-picker__figure .slds-icon { fill: var(--slds-g-color-on-disabled-2); } .slds-visual-picker input:disabled ~ label .slds-visual-picker__figure { border-color: var(--slds-g-color-disabled-1); background-color: var(--slds-g-color-disabled-container-2); box-shadow: none; } .slds-visual-picker input:disabled ~ label .slds-visual-picker__figure:hover { cursor: not-allowed; user-select: none; box-shadow: none; } .slds-visual-picker__figure { display: block; background: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-s-container-shadow, var(--slds-g-shadow-2)); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); text-align: center; font-weight: var(--slds-s-container-heading-font-weight); } .slds-visual-picker__figure .slds-icon-action-check { background-color: var(--slds-g-color-accent-1); } .slds-visual-picker__figure span { display: block; } .slds-visual-picker__figure .slds-is-selected { display: none; } .slds-visual-picker_medium .slds-visual-picker__figure, .slds-visual-picker--medium .slds-visual-picker__figure, .slds-visual-picker_medium .slds-visual-picker__body, .slds-visual-picker--medium .slds-visual-picker__body { width: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-9)); } .slds-visual-picker_medium .slds-visual-picker__figure, .slds-visual-picker--medium .slds-visual-picker__figure { height: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-9)); } .slds-visual-picker_large .slds-visual-picker__figure, .slds-visual-picker--large .slds-visual-picker__figure, .slds-visual-picker_large .slds-visual-picker__body, .slds-visual-picker--large .slds-visual-picker__body { width: var(--slds-g-sizing-14); } .slds-visual-picker_large .slds-visual-picker__figure, .slds-visual-picker--large .slds-visual-picker__figure { height: var(--slds-g-sizing-14); } .slds-visual-picker_small .slds-visual-picker__figure, .slds-visual-picker--small .slds-visual-picker__figure, .slds-visual-picker_small .slds-visual-picker__body, .slds-visual-picker--small .slds-visual-picker__body { width: calc(var(--slds-g-sizing-13) - var(--slds-g-sizing-7)); } .slds-visual-picker_small .slds-visual-picker__figure, .slds-visual-picker--small .slds-visual-picker__figure { height: calc(var(--slds-g-sizing-13) - var(--slds-g-sizing-7)); } .slds-visual-picker__body { display: flex; flex-direction: column; background: transparent; padding-block: var(--slds-g-spacing-4); padding-inline: var(--slds-g-spacing-2); border: 0; border-radius: 0; } .slds-visual-picker__text-check { position: absolute; inset-block-start: 0.1rem; inset-inline-end: 0.625rem; width: var(--slds-g-sizing-3); height: var(--slds-g-sizing-3); } .slds-visual-picker input[disabled] ~ label .slds-visual-picker__text-check { opacity: 0; } .slds-visual-picker_vertical, .slds-visual-picker--vertical { width: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-14)); display: flex; } .slds-visual-picker_vertical .slds-visual-picker__figure, .slds-visual-picker--vertical .slds-visual-picker__figure { text-align: left; padding: var(--slds-g-spacing-4); height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-11)); } .slds-visual-picker_vertical + .slds-visual-picker_vertical, .slds-visual-picker--vertical + .slds-visual-picker--vertical { margin-inline-start: 0; margin-block-start: var(--slds-g-spacing-4); } .slds-visual-picker_vertical .slds-visual-picker__figure, .slds-visual-picker--vertical .slds-visual-picker__figure, .slds-visual-picker_vertical .slds-visual-picker__body, .slds-visual-picker--vertical .slds-visual-picker__body { width: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-14)); } .slds-pill { display: inline-flex; align-items: center; justify-content: space-between; line-height: var(--slds-g-font-lineheight-1); max-width: 100%; padding-block-start: var(--slds-c-pill-spacing-blockstart); padding-inline-end: var(--slds-c-pill-spacing-inlineend); padding-block-end: var(--slds-c-pill-spacing-blockend); padding-inline-start: var(--slds-c-pill-spacing-inlinestart, var(--slds-g-spacing-2)); border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2)); border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-pill)); background-color: var(--slds-c-pill-color-background, var(--slds-g-color-surface-container-1)); box-shadow: var(--slds-c-pill-shadow); position: relative; min-height: 1.625rem; } .slds-pill + .slds-pill { margin-inline-start: var(--slds-g-spacing-1); } .slds-pill:hover { --slds-c-pill-color-background: var(--slds-s-pill-color-background-hover); } .slds-pill:has(.slds-pill__action:focus-visible) { outline: 0; --slds-c-pill-color-border: var(--slds-g-color-border-2); --slds-c-pill-shadow: var(--slds-g-shadow-inset-focus-1); } .slds-pill a { text-decoration: none; } .slds-pill .slds-popover_tooltip, .slds-pill .slds-popover--tooltip { width: max-content; } .slds-pill_bare, .slds-pill--bare { --slds-c-pill-color-background: transparent; --slds-c-pill-sizing-border: 0; } .slds-pill_container, .slds-pill--container { display: flex; min-height: calc(1.625rem + 2px); padding-block-start: var(--slds-c-pill-container-spacing-blockstart, var(--slds-g-spacing-1)); padding-inline-end: var(--slds-c-pill-container-spacing-inlineend, var(--slds-g-spacing-1)); padding-block-end: var(--slds-c-pill-container-spacing-blockend, var(--slds-g-spacing-1)); padding-inline-start: var(--slds-c-pill-container-spacing-inlinestart, var(--slds-g-spacing-1)); border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-pill-color-border, var(--slds-s-input-color-border)); border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-4)); background-color: var(--slds-c-pill-container-color-background, var(--slds-g-color-surface-1)); } .slds-pill_container .slds-listbox_inline, .slds-pill--container .slds-listbox--inline { margin-inline-start: 0; margin-inline-end: 0; } .slds-pill__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slds-pill__label:focus { outline: 0; border-radius: var(--slds-g-radius-border-1); box-shadow: var(--slds-c-pill-label-shadow-focus, var(--slds-g-shadow-outline-focus-1)); } .slds-pill__icon, .slds-pill__icon_container, .slds-pill__icon--container { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); margin-inline-end: var(--slds-g-spacing-1); } .slds-pill__icon .slds-icon, .slds-pill__icon .slds-avatar, .slds-pill__icon_container .slds-icon, .slds-pill__icon--container .slds-icon, .slds-pill__icon_container .slds-avatar, .slds-pill__icon--container .slds-avatar { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); display: block; font-size: var(--slds-g-font-scale-neg-2); } .slds-pill__icon ~ .slds-pill__action, .slds-pill__icon_container ~ .slds-pill__action, .slds-pill__icon--container ~ .slds-pill__action { padding-inline-start: calc(var(--slds-g-spacing-2) + var(--slds-g-sizing-5) + var(--slds-g-sizing-2)); } .slds-pill__remove { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); display: inline-flex; align-items: center; justify-content: flex-start; box-sizing: content-box; padding: var(--slds-g-spacing-1); } .slds-pill__remove svg { width: var(--slds-g-sizing-4); height: var(--slds-g-sizing-4); } .slds-pill__remove .slds-button_icon, .slds-pill__remove .slds-button--icon { color: var(--slds-g-color-accent-2); line-height: var(--slds-g-font-lineheight-1); font-size: var(--slds-g-sizing-3); } .slds-pill_link, .slds-pill--link { border: 0; padding: 0; align-items: stretch; } .slds-pill_link .slds-pill__icon_container, .slds-pill--link .slds-pill__icon--container { display: inline-block; position: absolute; inset-block-start: 50%; inset-inline-start: var(--slds-g-spacing-2); transform: translateY(-50%); } .slds-pill_link .slds-pill__remove, .slds-pill--link .slds-pill__remove { position: absolute; inset-block-start: 50%; inset-inline-end: 0; transform: translateY(-50%); } .slds-pill__action { padding-block-start: var(--slds-c-pill-spacing-blockstart, var(--slds-g-spacing-1)); padding-inline-end: var(--slds-c-pill-spacing-inlineend, var(--slds-g-spacing-5)); padding-block-end: var(--slds-c-pill-spacing-blockend, var(--slds-g-spacing-1)); padding-inline-start: var(--slds-c-pill-spacing-inlinestart, var(--slds-g-spacing-2)); border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1)); border-style: solid; border-color: var(--slds-c-pill-color-border, var(--slds-s-input-color-border)); border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-pill)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; display: flex; } .slds-pill__action:focus-visible { outline: 0; text-decoration: none; } .slds-pill__action .slds-pill__label { align-self: center; } .slds-has-error { border-color: var(--slds-c-pill-error-color-border, var(--slds-g-color-border-error-1)); } .slds-has-error:active { border-color: var(--slds-c-pill-error-color-border-active, var(--slds-g-color-border-error-1)); } .slds-has-error .slds-pill__label { font-weight: var(--slds-g-font-weight-4); color: var(--slds-c-pill-text-color-error, var(--slds-g-color-error-1)); } .slds-has-error .slds-button_icon, .slds-has-error .slds-button--icon { color: var(--slds-g-color-error-1); } .slds-has-error:hover { --slds-c-pill-text-color-error: var(--slds-g-color-error-1); --slds-c-pill-color-background: var(--slds-g-color-surface-container-2); } .slds-has-error:hover .slds-pill__icon_container .slds-icon-text-error, .slds-has-error:hover .slds-pill__icon--container .slds-icon-text-error { --slds-c-icon-color-foreground: var(--slds-g-color-error-1); } .slds-wizard { position: relative; } .slds-wizard .slds-is-active .slds-wizard__marker { background-color: var(--slds-g-color-accent-container-1); } .slds-wizard .slds-is-active a:hover .slds-wizard__marker, .slds-wizard .slds-is-active a:focus .slds-wizard__marker { background-color: var(--slds-g-color-accent-container-2); } .slds-wizard__list { display: flex; justify-content: space-between; position: relative; margin: auto; } .slds-wizard__item { flex: 2 0 auto; text-align: center; width: 0%; user-select: none; } .slds-wizard__item:first-child { text-align: left; flex-grow: 1; } .slds-wizard__item:last-child { text-align: right; flex-grow: 1; } .slds-wizard__item a:hover, .slds-wizard__item a:focus { outline: 0; text-decoration: none; } .slds-wizard__item a:hover .slds-wizard__marker, .slds-wizard__item a:focus .slds-wizard__marker { background-color: var(--slds-g-color-surface-container-3); } .slds-wizard__link { display: block; } .slds-wizard__marker { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); border-radius: var(--slds-g-radius-border-circle); background-color: var(--slds-g-color-surface-container-2); display: inline-block; vertical-align: middle; z-index: 1; position: relative; } .slds-wizard__label { display: block; margin-block-start: var(--slds-g-spacing-3); } .slds-wizard__progress { position: absolute; left: 0; top: 0.625rem; height: var(--slds-g-sizing-2); display: block; width: 100%; z-index: -1; background-color: var(--slds-g-color-surface-container-2); } .slds-wizard__progress-bar { position: absolute; left: 0; top: 0; height: 100%; background-color: var(--slds-g-color-accent-container-1); transition: width 0.2s ease; } .slds-path-coach { border: transparent var(--slds-g-sizing-border-1) solid; border-block-start: 0; } .slds-path-coach.slds-is-expanded { border-color: var(--slds-g-color-border-1); padding-block-end: var(--slds-g-spacing-4); } .slds-path-coach .slds-path__mark-current { background-color: var(--slds-g-color-accent-container-1); border-color: var(--slds-g-color-border-accent-2); } .slds-tabs_path, .slds-tabs--path { display: block; width: 100%; } .slds-tabs_path .slds-is-complete, .slds-tabs--path .slds-is-complete { background-color: var(--_slds-c-path-item-color-background-complete); } .slds-tabs_path .slds-is-complete .slds-tabs_path__stage, .slds-tabs--path .slds-is-complete .slds-tabs--path__stage { transform: rotateX(0deg); } .slds-tabs_path .slds-is-complete .slds-tabs_path__title, .slds-tabs--path .slds-is-complete .slds-tabs--path__title { transform: rotateX(180deg); } .slds-tabs_path .slds-is-complete .slds-tabs_path__link, .slds-tabs--path .slds-is-complete .slds-tabs--path__link { color: var(--slds-g-color-on-success-1); } .slds-tabs_path .slds-is-complete:hover, .slds-tabs--path .slds-is-complete:hover { background-color: var(--_slds-c-path-item-color-background-complete-hover); } .slds-tabs_path .slds-is-complete:hover .slds-tabs_path__stage, .slds-tabs--path .slds-is-complete:hover .slds-tabs--path__stage { transform: rotateX(-180deg); } .slds-tabs_path .slds-is-complete:hover .slds-tabs_path__title, .slds-tabs--path .slds-is-complete:hover .slds-tabs--path__title { transform: rotateX(0deg); } .slds-tabs_path .slds-is-complete:hover .slds-tabs_path__link, .slds-tabs--path .slds-is-complete:hover .slds-tabs--path__link { color: var(--slds-g-color-on-success-1); } .slds-tabs_path .slds-is-current, .slds-tabs--path .slds-is-current { background-color: var(--slds-g-color-surface-container-inverse-1); } .slds-tabs_path .slds-is-current:hover, .slds-tabs--path .slds-is-current:hover { background-color: var(--slds-g-color-surface-container-inverse-2); } .slds-tabs_path .slds-is-current + .slds-is-incomplete::before, .slds-tabs--path .slds-is-current + .slds-is-incomplete::before { background-color: var(--slds-g-color-surface-container-inverse-1); } .slds-tabs_path .slds-is-current:hover + .slds-is-incomplete::before, .slds-tabs--path .slds-is-current:hover + .slds-is-incomplete::before { background-color: var(--slds-g-color-surface-container-inverse-2); } .slds-tabs_path .slds-is-incomplete, .slds-tabs--path .slds-is-incomplete { background-color: var(--_slds-c-path-item-color-background-incomplete); } .slds-tabs_path .slds-is-incomplete:hover, .slds-tabs--path .slds-is-incomplete:hover { background-color: var(--_slds-c-path-item-color-background-incomplete-hover); } .slds-tabs_path .slds-is-incomplete .slds-tabs_path__link, .slds-tabs--path .slds-is-incomplete .slds-tabs--path__link { color: var(--_slds-c-path-item-color-incomplete); } .slds-tabs_path .slds-is-lost, .slds-tabs--path .slds-is-lost, .slds-tabs_path .slds-is-lost:hover, .slds-tabs--path .slds-is-lost:hover { background-color: var(--_slds-c-path-item-color-background-error); } .slds-tabs_path .slds-is-current .slds-tabs_path__link, .slds-tabs--path .slds-is-current .slds-tabs--path__link { color: var(--slds-g-color-on-surface-inverse-1); } .slds-tabs_path .slds-is-lost .slds-tabs_path__link, .slds-tabs--path .slds-is-lost .slds-tabs--path__link { color: var(--slds-g-color-on-error-1); } .slds-tabs_path .slds-is-active, .slds-tabs--path .slds-is-active { background-color: var(--slds-g-color-surface-inverse-2); } .slds-tabs_path .slds-is-active .slds-tabs_path__link, .slds-tabs--path .slds-is-active .slds-tabs--path__link { color: var(--slds-g-color-on-surface-inverse-1); } .slds-tabs_path .slds-is-active:hover, .slds-tabs--path .slds-is-active:hover { background-color: var(--slds-g-color-surface-container-inverse-1); } .slds-tabs_path .slds-is-active:hover + .slds-tabs_path__item::before, .slds-tabs--path .slds-is-active:hover + .slds-tabs--path__item::before { background-color: var(--slds-g-color-surface-container-inverse-1); } .slds-tabs_path .slds-is-active + .slds-tabs_path__item::before, .slds-tabs--path .slds-is-active + .slds-tabs--path__item::before { background-color: var(--slds-g-color-surface-inverse-2); } .slds-tabs_path .slds-is-active .slds-tabs_path__title, .slds-tabs--path .slds-is-active .slds-tabs--path__title { color: var(--slds-g-color-on-accent-1); transform: rotateX(0deg); } .slds-tabs_path .slds-is-won .slds-tabs_path__title, .slds-tabs--path .slds-is-won .slds-tabs--path__title { color: var(--slds-g-color-on-success-1); transform: rotateX(0deg); } .slds-tabs_path .slds-is-active .slds-tabs_path__stage, .slds-tabs--path .slds-is-active .slds-tabs--path__stage, .slds-tabs_path .slds-is-won .slds-tabs_path__stage, .slds-tabs--path .slds-is-won .slds-tabs--path__stage { transform: rotateX(-180deg); } .slds-tabs_path__nav, .slds-tabs--path__nav { display: flex; align-items: flex-start; } .slds-tabs_path__item, .slds-tabs--path__item { overflow: hidden; position: relative; flex: 1 1 0%; min-width: 5rem; text-align: center; perspective: 500px; transition: transform 0.1s ease-in-out, background-color 0.1s linear; } .slds-tabs_path__item:first-child, .slds-tabs--path__item:first-child { border-radius: var(--slds-g-radius-border-pill) 0 0 var(--slds-g-radius-border-pill); } .slds-tabs_path__item:last-child, .slds-tabs--path__item:last-child { border-radius: 0 var(--slds-g-radius-border-pill) var(--slds-g-radius-border-pill) 0; border-inline-end: 0; } .slds-tabs_path__item::before, .slds-tabs--path__item::before { content: ''; display: block; position: absolute; top: 0.125rem; left: -1rem; width: calc(var(--slds-g-sizing-9) - (var(--slds-g-sizing-border-2) * 2)); height: calc(var(--slds-g-sizing-9) - (var(--slds-g-sizing-border-2) * 2)); border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-on-accent-1); border-inline-start: 0; border-block-end: 0; background-clip: padding-box; transform: scale3d(0.8, 1.1, 1) rotate(45deg); transition: transform 0.1s ease-in-out, background-color 0.1s linear; } .slds-tabs_path__item:first-child::before, .slds-tabs--path__item:first-child::before { display: none; } .slds-tabs_path__item + .slds-is-complete::before, .slds-tabs--path__item + .slds-is-complete::before, .slds-tabs_path__item + .slds-is-current::before, .slds-tabs--path__item + .slds-is-current::before { background-color: var(--_slds-c-path-item-color-background-complete); } .slds-tabs_path__item:hover + .slds-is-complete::before, .slds-tabs--path__item:hover + .slds-is-complete::before, .slds-tabs_path__item:hover + .slds-is-current::before, .slds-tabs--path__item:hover + .slds-is-current::before { background-color: var(--_slds-c-path-item-color-background-complete-hover); } .slds-tabs_path__item + .slds-is-incomplete::before, .slds-tabs--path__item + .slds-is-incomplete::before, .slds-tabs_path__item + .slds-is-lost::before, .slds-tabs--path__item + .slds-is-lost::before { background-color: var(--_slds-c-path-item-color-background-incomplete); } .slds-tabs_path__item:hover + .slds-is-incomplete::before, .slds-tabs--path__item:hover + .slds-is-incomplete::before, .slds-tabs_path__item:hover + .slds-is-lost::before, .slds-tabs--path__item:hover + .slds-is-lost::before { background-color: var(--_slds-c-path-item-color-background-incomplete-hover); } .slds-tabs_path__title, .slds-tabs--path__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slds-tabs_path__stage, .slds-tabs--path__stage { position: absolute; top: 50%; left: 0.5rem; width: 100%; margin-block-start: calc(var(--slds-g-spacing-2) * -1); transform: rotateX(-180deg); line-height: 1; } .slds-tabs_path__link, .slds-tabs--path__link { display: flex; justify-content: center; position: relative; padding: var(--slds-g-spacing-1) var(--slds-g-spacing-1) var(--slds-g-spacing-1) 1.25rem; line-height: var(--slds-g-sizing-7); text-decoration: none; cursor: pointer; } .slds-tabs_path__link:hover, .slds-tabs--path__link:hover { text-decoration: none; } .slds-tabs_path__link:focus, .slds-tabs--path__link:focus { outline: 0; } .slds-tabs_path__title, .slds-tabs--path__title, .slds-tabs_path__stage, .slds-tabs--path__stage { display: block; transition: transform 0.2s linear; backface-visibility: hidden; } .slds-tabs_path__content, .slds-tabs--path__content { position: relative; padding-inline-start: var(--slds-g-spacing-5); padding-inline-end: var(--slds-g-spacing-4); } .slds-coach__keys { padding-inline-start: var(--slds-g-spacing-3); } .slds-coach__guidance { padding-inline-start: var(--slds-g-spacing-5); padding-block-end: var(--slds-g-spacing-1); background-color: var(--slds-g-color-surface-container-1); } .slds-coach__keys, .slds-coach__guidance { margin-block-start: var(--slds-g-spacing-4); padding-block-start: var(--slds-g-spacing-4); padding-inline-end: var(--slds-g-spacing-5); } .slds-coach__item { border-block-start: var(--slds-g-color-border-1) var(--slds-g-sizing-border-1) solid; padding: var(--slds-g-spacing-4) 0; color: var(--slds-g-color-on-surface-1); } .slds-coach__value { border-block-start: var(--slds-g-color-border-1) var(--slds-g-sizing-border-1) solid; padding-block-start: var(--slds-g-spacing-4); color: var(--slds-g-color-on-surface-3); } .slds-tabs_path .slds-tabs_path__link .slds-icon, .slds-tabs--path .slds-tabs--path__link .slds-icon { --slds-c-icon-color-foreground: var(--slds-g-color-on-success-1); } .slds-path.slds-is-expanded { padding-block-end: var(--slds-g-spacing-var-block-3); border-color: var(--slds-g-color-border-2); } .slds-path__track { flex-wrap: wrap; align-items: flex-start; } @media (min-width: 64em) { .slds-path__track { flex-wrap: nowrap; align-items: stretch; } } .slds-path__track.slds-has-overflow .slds-path__scroller_inner, .slds-path__track.slds-has-overflow .slds-path__scroller--inner { display: flex; width: 100%; overflow: hidden; } .slds-path__track.slds-has-overflow .slds-path__scroll-controls { display: inline-flex; flex-shrink: 0; padding-inline-start: var(--slds-g-spacing-2); } .slds-path__track.slds-has-overflow .slds-path__scroll-controls .slds-icon-text-default { --slds-c-icon-color-foreground: currentColor; } @media (pointer: coarse) and (hover: none) { .slds-path__track.slds-has-overflow .slds-path__scroll-controls { display: none; } } .slds-path__scroller { flex: 1; max-width: 100%; overflow: hidden; } .slds-path__scroll-controls { display: none; } .slds-path__stage-name { display: block; font-weight: var(--slds-g-font-weight-7); margin-block: var(--slds-g-spacing-3); margin-inline: 0; } @media (min-width: 48em) { .slds-path__stage-name { margin: 0; } } @media (min-width: 64em) { .slds-path__stage-name { display: none; } } .slds-path__scroller-container { flex: 1; flex-basis: 100%; overflow: hidden; } @media (min-width: 64em) { .slds-path__scroller-container { flex-basis: auto; } } @media (min-width: 48em) { .slds-path_has-coaching .slds-path__action, .slds-path--has-coaching .slds-path__action { padding-inline-start: 2.75rem; } } @media (min-width: 64em) { .slds-path_has-coaching .slds-path__action, .slds-path--has-coaching .slds-path__action { padding-inline-start: 0; } } .slds-path__action { flex-grow: 1; flex-basis: 100%; margin-inline-start: 0; align-items: center; flex-shrink: 0; flex-direction: column; } .slds-path__action .slds-icon-text-default { --slds-c-icon-color-foreground: var(--slds-g-color-on-accent-1); } @media (min-width: 48em) { .slds-path__action { justify-content: space-between; margin-block-start: var(--slds-g-spacing-4); flex-direction: row; } } @media (min-width: 64em) { .slds-path__action { flex-basis: auto; flex-grow: 0; align-items: normal; margin-block-start: 0; margin-inline-start: var(--slds-g-spacing-5); } } .slds-path__nav { display: flex; align-items: flex-start; overflow: hidden; } .slds-path__nav .slds-is-incomplete { background: var(--_slds-c-path-item-color-background-incomplete); } .slds-path__nav .slds-is-incomplete::before, .slds-path__nav .slds-is-incomplete::after { background: var(--_slds-c-path-item-color-background-incomplete); } .slds-path__nav .slds-is-incomplete .slds-path__link { color: var(--_slds-c-path-item-color-incomplete); } .slds-path__nav .slds-is-incomplete:hover { background: var(--_slds-c-path-item-color-background-incomplete-hover); } .slds-path__nav .slds-is-incomplete:hover::before, .slds-path__nav .slds-is-incomplete:hover::after { background: var(--_slds-c-path-item-color-background-incomplete-hover); } .slds-path__nav .slds-is-complete { background: var(--_slds-c-path-item-color-background-complete); } .slds-path__nav .slds-is-complete::before, .slds-path__nav .slds-is-complete::after { background: var(--_slds-c-path-item-color-background-complete); } .slds-path__nav .slds-is-complete .slds-path__stage { transform: translate(-50%, -50%) rotateX(0deg); } .slds-path__nav .slds-is-complete .slds-path__stage .slds-icon-text-default { --slds-c-icon-color-foreground: var(--slds-g-color-on-success-1); } .slds-path__nav .slds-is-complete .slds-path__title { transform: rotateX(180deg); } .slds-path__nav .slds-is-complete .slds-path__link { --slds-c-icon-color-foreground: var(--slds-g-color-on-success-1); color: var(--slds-g-color-on-success-1); } .slds-path__nav .slds-is-complete:hover { background: var(--_slds-c-path-item-color-background-complete-hover); } .slds-path__nav .slds-is-complete:hover::before, .slds-path__nav .slds-is-complete:hover::after { background: var(--_slds-c-path-item-color-background-complete-hover); } .slds-path__nav .slds-is-complete:hover .slds-path__stage { transform: translate(-50%, -50%) rotateX(-180deg); } .slds-path__nav .slds-is-complete:hover .slds-path__title { transform: rotateX(0deg); } .slds-path__nav .slds-is-current { background-color: var(--slds-g-color-surface-container-1); } .slds-path__nav .slds-is-current::before, .slds-path__nav .slds-is-current::after { background-color: var(--slds-g-color-surface-container-1); background-image: linear-gradient( 90deg, var(--slds-g-color-brand-base-30), var(--slds-g-color-brand-base-30) var(--_slds-c-path-item-sizing-border), transparent var(--_slds-c-path-item-sizing-border) ), linear-gradient( 90deg, var(--slds-g-color-brand-base-30), var(--slds-g-color-brand-base-30) var(--_slds-c-path-item-sizing-border), transparent var(--_slds-c-path-item-sizing-border) ), linear-gradient( var(--slds-g-color-brand-base-30), var(--slds-g-color-brand-base-30) var(--_slds-c-path-item-sizing-border), transparent var(--_slds-c-path-item-sizing-border) ); background-repeat: no-repeat; background-size: var(--_slds-c-path-item-sizing-border) 100%, var(--_slds-c-path-item-sizing-border) 100%, 100% var(--_slds-c-path-item-sizing-border); } .slds-path__nav .slds-is-current::before { background-position: top right, top left, top left; } .slds-path__nav .slds-is-current::after { background-position: top right, top left, bottom left; } .slds-path__nav .slds-is-current:first-child { border: var(--_slds-c-path-item-sizing-border) solid var(--slds-g-color-brand-base-30); border-inline-end: 0; } .slds-path__nav .slds-is-current:first-child::before, .slds-path__nav .slds-is-current:first-child::after { background-color: transparent; background-image: linear-gradient( 90deg, var(--slds-g-color-brand-base-30), var(--slds-g-color-brand-base-30) var(--_slds-c-path-item-sizing-border), transparent var(--_slds-c-path-item-sizing-border) ); } .slds-path__nav .slds-is-current:first-child::before { inset-block-start: calc(var(--_slds-c-path-item-sizing-border) * -1); } .slds-path__nav .slds-is-current:first-child::after { inset-block-end: calc(var(--_slds-c-path-item-sizing-border) * -1); } .slds-path__nav .slds-is-current:first-child:hover { border-color: var(--slds-g-color-brand-base-20); } .slds-path__nav .slds-is-current:first-child:hover::before, .slds-path__nav .slds-is-current:first-child:hover::after { background-image: linear-gradient( 90deg, var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-20) var(--_slds-c-path-item-sizing-border), transparent var(--_slds-c-path-item-sizing-border) ); } .slds-path__nav .slds-is-current:first-child .slds-path__link { height: var(--_slds-c-path-item-sizing-height); } .slds-path__nav .slds-is-current .slds-path__link { color: var(--slds-g-color-brand-base-20); } .slds-path__nav .slds-is-current:hover::before, .slds-path__nav .slds-is-current:hover::after { background-image: linear-gradient(90deg, var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-20) 0.125rem, transparent 0.125rem), linear-gradient(90deg, var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-20) 0.125rem, transparent 0.125rem), linear-gradient(var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-20) 0.125rem, transparent 0.125rem); } .slds-path__nav .slds-is-current:hover .slds-path__link { color: var(--slds-g-color-brand-base-20); } .slds-path__nav .slds-is-active { background: var(--_slds-c-path-item-color-background-active); } .slds-path__nav .slds-is-active::before, .slds-path__nav .slds-is-active::after { background: var(--_slds-c-path-item-color-background-active); } .slds-path__nav .slds-is-active:first-child { border: 0; } .slds-path__nav .slds-is-active:first-child::before, .slds-path__nav .slds-is-active:first-child::after { background: var(--_slds-c-path-item-color-background-active); } .slds-path__nav .slds-is-active:first-child::before { inset-block-start: 0; } .slds-path__nav .slds-is-active:first-child::after { inset-block-end: 0; } .slds-path__nav .slds-is-active:first-child .slds-path__link { height: 2rem; } .slds-path__nav .slds-is-active .slds-path__stage { transform: translateY(-50%) rotateX(-180deg); } .slds-path__nav .slds-is-active .slds-path__title { transform: rotateX(0deg); } .slds-path__nav .slds-is-active .slds-path__link { color: var(--slds-g-color-on-accent-1); } .slds-path__nav .slds-is-active:hover { background: var(--_slds-c-path-item-color-background-active-hover); } .slds-path__nav .slds-is-active:hover::before, .slds-path__nav .slds-is-active:hover::after { background: var(--_slds-c-path-item-color-background-active-hover); } .slds-path__nav .slds-is-active:hover .slds-path__link { color: var(--slds-g-color-on-accent-1); } .slds-path__nav .slds-is-lost { background: var(--_slds-c-path-item-color-background-error); } .slds-path__nav .slds-is-lost::before, .slds-path__nav .slds-is-lost::after, .slds-path__nav .slds-is-lost:hover, .slds-path__nav .slds-is-lost:hover::before, .slds-path__nav .slds-is-lost:hover::after { background: var(--_slds-c-path-item-color-background-error); } .slds-path__nav .slds-is-lost .slds-path__link { color: var(--slds-g-color-on-error-1); } .slds-path__nav .slds-is-lost:hover .slds-path__link { color: var(--slds-g-color-on-error-1); } .slds-path__nav .slds-is-won { background: var(--_slds-c-path-item-color-background-success); } .slds-path__nav .slds-is-won::before, .slds-path__nav .slds-is-won::after, .slds-path__nav .slds-is-won:hover, .slds-path__nav .slds-is-won:hover::before, .slds-path__nav .slds-is-won:hover::after { background: var(--_slds-c-path-item-color-background-success); } .slds-path__nav .slds-is-won .slds-path__link { color: var(--slds-g-color-on-success-1); } .slds-path__nav .slds-is-won:hover .slds-path__link { color: var(--slds-g-color-on-success-1); } .slds-path.slds-is-won .slds-path__item.slds-is-current { background: var(--_slds-c-path-item-color-background-success); } .slds-path.slds-is-won .slds-path__item.slds-is-current::before, .slds-path.slds-is-won .slds-path__item.slds-is-current::after, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover::before, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover::after { background: var(--_slds-c-path-item-color-background-success); } .slds-path.slds-is-lost .slds-path__item.slds-is-current { background: var(--slds-g-color-error-base-50); } .slds-path.slds-is-lost .slds-path__item.slds-is-current::before, .slds-path.slds-is-lost .slds-path__item.slds-is-current::after, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover::before, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover::after { background: var(--slds-g-color-error-base-50); } .slds-path__item { position: relative; flex: 1; margin-inline-start: 0.375rem; margin-inline-end: 0.4375rem; min-width: 5rem; text-align: center; } .slds-path__item::before, .slds-path__item::after { content: ''; position: absolute; inset-inline-start: -0.25rem; inset-inline-end: -0.3125rem; cursor: pointer; } .slds-path__item::before { inset-block-start: 0; height: 1.0313rem; transform: skew(28deg) translate3d(0, 0, 0); } .slds-path__item::after { inset-block-end: 0; height: 1rem; transform: skew(-30deg) translate3d(0, 0, 0); } .slds-path__item:first-child { margin-inline-start: 0; border-start-start-radius: 2rem; border-end-start-radius: 2rem; padding-inline-start: 0.625rem; } .slds-path__item:first-child::before, .slds-path__item:first-child::after { inset-inline-start: 1.125rem; } .slds-path__item:last-child { margin-inline-end: 0; border-start-end-radius: 2rem; border-end-end-radius: 2rem; padding-inline-end: 0.625rem; } .slds-path__item:last-child .slds-path__link { padding-inline-start: var(--slds-g-spacing-1); } .slds-path__item:last-child::before, .slds-path__item:last-child::after { inset-inline-end: 0.625rem; } [dir='rtl'] .slds-path__item::before { transform: skew(-30deg) translate3d(0, 0, 0); } [dir='rtl'] .slds-path__item::after { transform: skew(28deg) translate3d(0, 0, 0); } .slds-path__item .slds-icon_container, .slds-path__item .slds-icon--container { display: flex; } .slds-path__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translate3d(0, 0, 0); } .slds-path__stage { position: absolute; inset-block-start: 50%; /*! @noflip */ left: 50%; transform: translate(-50%, -50%) rotateX(-180deg); } .slds-path__link { position: relative; display: flex; justify-content: center; align-items: center; height: 2rem; padding: var(--slds-g-spacing-2) var(--slds-g-spacing-1) var(--slds-g-spacing-2) var(--slds-g-spacing-2); text-decoration: none; z-index: 5; cursor: pointer; } .slds-path__link:hover { text-decoration: none; } .slds-path__link:focus { outline: 0; } .slds-path__link:focus-visible { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); outline: 0; text-decoration: none; } .slds-path__title, .slds-path__stage { display: block; transition: transform 0.2s linear; backface-visibility: hidden; } .slds-path .slds-path__trigger { margin-inline-end: var(--slds-g-spacing-3); transition: 0.4s transform ease-in-out; display: none; } .slds-path .slds-path__trigger .slds-icon-text-default { --slds-c-icon-color-foreground: currentColor; } @media (min-width: 48em) { .slds-path .slds-path__trigger { display: block; } } .slds-path__trigger_open, .slds-path__trigger--open { transform: rotate(90deg); } [dir='rtl'] .slds-path__trigger_open, [dir='rtl'] .slds-path__trigger--open { transform: rotate(-90deg); } .slds-path .slds-path__mark-complete { --slds-c-button-sizing-border: 0; width: 100%; min-width: 13rem; margin-inline-end: 0; justify-content: center; } @media (min-width: 48em) { .slds-path .slds-path__mark-complete { width: auto; } } .slds-path__mark-current { border-color: var(--slds-g-color-border-accent-2); background-color: var(--slds-g-color-accent-container-1); } .slds-path__mark-current:hover, .slds-path__mark-current:focus { background-color: var(--slds-g-color-accent-container-3); } .slds-path__guidance { margin-inline-end: var(--slds-g-spacing-2); padding-block-end: var(--slds-g-spacing-1); background-color: var(--slds-g-color-surface-container-1); } @media (min-width: 48em) { .slds-path__guidance { margin-block-start: 0; } } .slds-path__keys, .slds-path__guidance { flex: 1 1 100%; margin-block-start: var(--slds-g-spacing-var-block-4); padding-inline-start: 0; padding-inline-end: 0; } @media (min-width: 48em) { .slds-path__keys, .slds-path__guidance { flex-basis: 50%; } } @media (min-width: 48em) { .slds-path__keys { padding-inline-end: var(--slds-g-spacing-3); } } .slds-path__coach { flex-wrap: wrap; align-items: flex-start; } @media (min-width: 48em) { .slds-path__coach { flex-wrap: nowrap; align-items: stretch; } } .slds-path__coach-title { font-size: var(--slds-g-font-scale-neg-1); font-weight: var(--slds-g-font-weight-7); margin-block-end: var(--slds-g-spacing-2); padding-block-end: var(--slds-g-spacing-2); line-height: 1.125; } .slds-path__coach-edit { border: 0; padding: 0; line-height: inherit; } .slds-path__guidance-content { padding-block-start: var(--slds-g-spacing-var-block-1); } .slds-path__trigger-coaching-content { width: 100%; margin-block-start: var(--slds-g-spacing-3); } @media (min-width: 48em) { .slds-path__trigger-coaching-content { display: none; } } .slds-path .slds-path__trigger-coaching-content { margin-inline-start: 0; } .slds-region_medium .slds-path_has-coaching .slds-path__action, .slds-region--medium .slds-path--has-coaching .slds-path__action { padding-inline-start: 2.75rem; } .slds-region_medium .slds-path__scroller-container, .slds-region--medium .slds-path__scroller-container { flex-basis: 100%; } .slds-region_medium .slds-path__track, .slds-region--medium .slds-path__track { flex-wrap: wrap; align-items: flex-start; } .slds-region_medium .slds-path__action, .slds-region--medium .slds-path__action { flex-grow: 1; flex-basis: 100%; margin-inline-start: 0; align-items: center; justify-content: space-between; margin-block-start: var(--slds-g-spacing-4); flex-direction: row; } .slds-region_medium .slds-path__stage-name, .slds-region--medium .slds-path__stage-name, .slds-region_medium .slds-path__trigger, .slds-region--medium .slds-path__trigger { display: block; } .slds-region_medium .slds-path__stage-name, .slds-region--medium .slds-path__stage-name { margin: 0; } .slds-region_medium .slds-path__trigger-coaching-content, .slds-region--medium .slds-path__trigger-coaching-content { display: none; } .slds-region_medium .slds-path__mark-complete, .slds-region--medium .slds-path__mark-complete { width: auto; } .slds-region_medium .slds-path__coach, .slds-region--medium .slds-path__coach { justify-content: space-between; margin-block-start: var(--slds-g-spacing-4); flex-direction: row; } .slds-region_medium .slds-path__keys, .slds-region--medium .slds-path__keys, .slds-region_medium .slds-path__guidance, .slds-region--medium .slds-path__guidance { flex-basis: 50%; } .slds-region_medium .slds-path__keys, .slds-region--medium .slds-path__keys { padding-inline-end: var(--slds-g-spacing-3); } .slds-region_small .slds-path__scroller-container, .slds-region--small .slds-path__scroller-container { flex-basis: 100%; } .slds-region_small .slds-path__track, .slds-region--small .slds-path__track, .slds-region_small .slds-path__coach, .slds-region--small .slds-path__coach { flex-wrap: wrap; align-items: flex-start; } .slds-region_small .slds-path__stage-name, .slds-region--small .slds-path__stage-name { display: block; margin: var(--slds-g-spacing-3) 0; } .slds-region_small .slds-path__action, .slds-region--small .slds-path__action { flex-grow: 1; flex-basis: 100%; margin-inline-start: 0; align-items: center; flex-direction: column; margin-block-start: 0; } .slds-region_small .slds-path_has-coaching .slds-path__action, .slds-region--small .slds-path--has-coaching .slds-path__action { padding-inline-start: 0; } .slds-region_small .slds-path__mark-complete, .slds-region--small .slds-path__mark-complete { width: 100%; } .slds-region_small .slds-path__keys, .slds-region--small .slds-path__keys, .slds-region_small .slds-path__guidance, .slds-region--small .slds-path__guidance { flex-basis: 100%; padding-inline-start: 0; padding-inline-end: 0; } .slds-region_small .slds-path__guidance, .slds-region--small .slds-path__guidance { margin-block-start: var(--slds-g-spacing-3); } .slds-region_small .slds-path__trigger, .slds-region--small .slds-path__trigger { display: none; } .slds-region_small .slds-path__trigger-coaching-content, .slds-region--small .slds-path__trigger-coaching-content { display: inline-block; } .slds-progress-bar { appearance: none; display: block; width: 100%; height: var(--slds-g-sizing-3); background-color: var(--slds-g-color-surface-container-3); border: 0; position: relative; } .slds-progress-bar_x-small, .slds-progress-bar--x-small { height: var(--slds-g-sizing-1); } .slds-progress-bar_small, .slds-progress-bar--small { height: var(--slds-g-sizing-2); } .slds-progress-bar_medium, .slds-progress-bar--medium { height: var(--slds-g-sizing-3); } .slds-progress-bar_large, .slds-progress-bar--large { height: var(--slds-g-sizing-4); } .slds-progress-bar_circular, .slds-progress-bar--circular { border-radius: var(--slds-g-radius-border-pill); } .slds-progress-bar_circular .slds-progress-bar__value, .slds-progress-bar--circular .slds-progress-bar__value { border-radius: var(--slds-g-radius-border-pill); } .slds-progress-bar__value { display: block; background-color: var(--slds-g-color-accent-container-1); height: 100%; } .slds-progress-bar__value_success, .slds-progress-bar__value--success { background-color: var(--slds-g-color-success-1); } .slds-progress-bar_vertical, .slds-progress-bar--vertical { height: 100%; width: var(--slds-g-sizing-3); } .slds-progress-bar_vertical.slds-progress-bar_x-small, .slds-progress-bar--vertical.slds-progress-bar--x-small { width: var(--slds-g-sizing-1); } .slds-progress-bar_vertical.slds-progress-bar_small, .slds-progress-bar--vertical.slds-progress-bar--small { width: var(--slds-g-sizing-2); } .slds-progress-bar_vertical.slds-progress-bar_medium, .slds-progress-bar--vertical.slds-progress-bar--medium { width: var(--slds-g-sizing-3); } .slds-progress-bar_vertical.slds-progress-bar_large, .slds-progress-bar--vertical.slds-progress-bar--large { width: var(--slds-g-sizing-4); } .slds-progress { position: relative; max-width: 70%; width: 100%; flex: 1 1 auto; margin: auto; } .slds-progress .slds-progress-bar { position: absolute; inset-block-start: 50%; margin-block-start: -0.0625rem; } .slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker, .slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker { background-color: var(--slds-g-color-surface-container-2); } .slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker_icon, .slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker--icon { border-color: var(--slds-g-color-surface-container-2); } .slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker { box-shadow: var(--slds-g-color-surface-container-2) 0 0 0 var(--slds-g-sizing-2); } .slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker:focus-visible, .slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker:focus, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker:focus { background-color: var(--slds-g-color-surface-container-2); } .slds-progress_shade .slds-progress__item .slds-progress__marker, .slds-progress--shade .slds-progress__item .slds-progress__marker { border-color: var(--slds-g-color-surface-container-2); } .slds-progress__list { display: flex; justify-content: space-between; align-items: center; height: 100%; margin: auto; position: relative; z-index: 1; } .slds-progress__item { display: inline-flex; align-self: center; } .slds-progress__item.slds-is-completed .slds-progress__marker, .slds-progress__item.slds-is-active .slds-progress__marker { background-color: var(--slds-g-color-surface-container-1); border-color: var(--slds-g-color-accent-container-1); } .slds-progress__item.slds-is-completed .slds-progress__marker_icon, .slds-progress__item.slds-is-completed .slds-progress__marker--icon { border-color: var(--slds-g-color-on-accent-1); color: var(--slds-g-color-accent-container-1); } .slds-progress__item.slds-is-active .slds-progress__marker { box-shadow: var(--slds-g-color-surface-container-1) 0 0 0 var(--slds-g-sizing-2); } .slds-progress__item.slds-is-active .slds-progress__marker:hover, .slds-progress__item.slds-is-active .slds-progress__marker:focus { border-color: var(--slds-g-color-border-accent-2); } .slds-progress__item.slds-is-active .slds-progress__marker:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress__item.slds-has-error .slds-progress__marker:focus { color: var(--slds-g-color-error-1); background-color: var(--slds-g-color-surface-container-1); border-color: transparent; box-shadow: none; } .slds-progress__item.slds-has-error .slds-progress__marker:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-progress__marker { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--slds-g-radius-border-circle); background-color: var(--slds-g-color-neutral-base-80); border: var(--slds-g-sizing-2) solid var(--slds-g-color-on-accent-1); vertical-align: middle; } .slds-progress__marker:focus { outline: none; } .slds-progress__marker:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); outline: none; } .slds-progress__marker_icon, .slds-progress__marker--icon { width: auto; height: auto; line-height: 0; } .slds-progress__marker_icon .slds-icon_container, .slds-progress__marker--icon .slds-icon--container { line-height: 0; } .slds-progress__marker_icon .slds-icon, .slds-progress__marker--icon .slds-icon { fill: currentColor; } .slds-progress_vertical, .slds-progress--vertical { max-width: none; } .slds-progress_vertical .slds-progress__list, .slds-progress--vertical .slds-progress__list { display: block; } .slds-progress_vertical .slds-progress__item, .slds-progress--vertical .slds-progress__item { position: relative; display: flex; align-items: center; padding: 0; } .slds-progress_vertical .slds-progress__item::before, .slds-progress--vertical .slds-progress__item::before, .slds-progress_vertical .slds-progress__item::after, .slds-progress--vertical .slds-progress__item::after { content: ''; position: absolute; inset-inline-start: calc((var(--slds-g-spacing-4) / 2) - 1px); width: var(--slds-g-sizing-1); background-color: var(--slds-g-color-surface-container-3); } .slds-progress_vertical .slds-progress__item::before, .slds-progress--vertical .slds-progress__item::before { inset-block-start: 0; inset-block-end: 50%; } .slds-progress_vertical .slds-progress__item::after, .slds-progress--vertical .slds-progress__item::after { inset-block-start: 50%; inset-block-end: 0; } .slds-progress_vertical .slds-progress__item:first-child::before, .slds-progress--vertical .slds-progress__item:first-child::before, .slds-progress_vertical .slds-progress__item:last-child::after, .slds-progress--vertical .slds-progress__item:last-child::after { display: none; } .slds-progress_vertical .slds-progress__item.slds-is-completed::before, .slds-progress--vertical .slds-progress__item.slds-is-completed::before, .slds-progress_vertical .slds-progress__item.slds-is-completed::after, .slds-progress--vertical .slds-progress__item.slds-is-completed::after, .slds-progress_vertical .slds-progress__item.slds-is-active::before, .slds-progress--vertical .slds-progress__item.slds-is-active::before, .slds-progress_vertical .slds-progress__item.slds-has-error::before, .slds-progress--vertical .slds-progress__item.slds-has-error::before { background-color: var(--slds-g-color-accent-container-1); } .slds-progress_vertical .slds-progress__item_content, .slds-progress--vertical .slds-progress__item--content { flex: 1; align-items: center; margin-block-start: var(--slds-g-spacing-3); padding-block-end: var(--slds-g-spacing-3); } .slds-progress_vertical .slds-progress__list-bordered .slds-progress__item:not(:last-child) .slds-progress__item_content, .slds-progress--vertical .slds-progress__list-bordered .slds-progress__item:not(:last-child) .slds-progress__item--content { border-block-end: var(--slds-g-sizing-border-1) var(--slds-g-color-border-1) solid; } .slds-progress_vertical .slds-progress__marker, .slds-progress--vertical .slds-progress__marker { display: flex; justify-content: center; margin-inline-end: var(--slds-g-spacing-4); min-width: var(--slds-g-sizing-5); z-index: 5; } .slds-progress_vertical .slds-progress__marker_icon, .slds-progress--vertical .slds-progress__marker--icon { border-inline-end: 0; border-inline-start: 0; } .slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon svg, .slds-progress--vertical .slds-progress__item.slds-is-completed .slds-progress__marker--icon svg { fill: var(--slds-g-color-accent-1); } .slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon-success svg, .slds-progress--vertical .slds-progress__item.slds-is-completed .slds-progress__marker--icon-success svg { fill: var(--slds-g-color-success-1); } .slds-progress_vertical .slds-progress__item.slds-has-error .slds-progress__marker_icon svg, .slds-progress--vertical .slds-progress__item.slds-has-error .slds-progress__marker--icon svg { fill: var(--slds-g-color-error-1); } .slds-progress_success .slds-progress__item.slds-is-completed::before, .slds-progress--success .slds-progress__item.slds-is-completed::before, .slds-progress_success .slds-progress__item.slds-is-completed::after, .slds-progress--success .slds-progress__item.slds-is-completed::after, .slds-progress_success .slds-progress__item.slds-is-active::before, .slds-progress--success .slds-progress__item.slds-is-active::before, .slds-progress_success .slds-progress__item.slds-has-error::before, .slds-progress--success .slds-progress__item.slds-has-error::before { opacity: 0.3; background-color: var(--slds-g-color-success-1); } .slds-progress-ring { position: relative; display: inline-block; height: var(--slds-g-sizing-7); width: var(--slds-g-sizing-7); border-radius: var(--slds-g-sizing-7); background-color: var(--slds-g-color-surface-container-3); } .slds-progress-ring .slds-icon_container, .slds-progress-ring .slds-icon--container { line-height: 0; } .slds-progress-ring__progress { position: absolute; inset-block-start: 0; inset-inline-start: 0; height: 100%; width: 100%; transform: scale(-1, 1) rotate(-90deg); } .slds-progress-ring__progress svg { width: 100%; } .slds-progress-ring__path { fill: var(--slds-g-color-success-1); } .slds-progress-ring__progress-head { position: absolute; height: calc(100% + 0.375rem); width: calc(100% + 0.375rem); inset-block-start: -0.1875rem; inset-inline-start: -0.1875rem; transform: scale(-1, 1) rotate(-90deg); } .slds-progress-ring__progress-head svg { width: 100%; } .slds-progress-ring__content { position: absolute; inset-block-start: 0.1875rem; inset-inline-end: 0.1875rem; inset-block-end: 0.1875rem; inset-inline-start: 0.1875rem; display: flex; align-items: center; justify-content: center; border-radius: var(--slds-g-sizing-7); background-color: var(--slds-g-color-surface-container-1); } .slds-progress-ring__content .slds-icon { width: var(--slds-g-sizing-4); } .slds-progress-ring_warning .slds-progress-ring__content, .slds-progress-ring--warning .slds-progress-ring__content { background-color: var(--slds-g-color-surface-container-1); } .slds-progress-ring_warning .slds-icon, .slds-progress-ring--warning .slds-icon, .slds-progress-ring_warning .slds-progress-ring__path, .slds-progress-ring--warning .slds-progress-ring__path { fill: var(--slds-g-color-warning-1); } .slds-progress-ring_expired .slds-progress-ring__content, .slds-progress-ring--expired .slds-progress-ring__content { background-color: var(--slds-g-color-surface-container-1); } .slds-progress-ring_expired .slds-icon, .slds-progress-ring--expired .slds-icon, .slds-progress-ring_expired .slds-progress-ring__path, .slds-progress-ring--expired .slds-progress-ring__path { fill: var(--slds-g-color-error-1); } .slds-progress-ring_complete .slds-icon, .slds-progress-ring--complete .slds-icon { fill: var(--slds-g-color-surface-container-1); } .slds-progress-ring_complete .slds-progress-ring__path, .slds-progress-ring--complete .slds-progress-ring__path { fill: var(--slds-g-color-success-1); } .slds-progress-ring_complete .slds-progress-ring__content, .slds-progress-ring--complete .slds-progress-ring__content { background-color: var(--slds-g-color-success-1); } .slds-progress-ring_large, .slds-progress-ring--large { height: var(--slds-g-sizing-9); width: var(--slds-g-sizing-9); } .slds-progress-ring_large .slds-icon, .slds-progress-ring--large .slds-icon { width: var(--slds-g-sizing-5); } .slds-progress-ring_active-step .slds-progress-ring__path, .slds-progress-ring--active-step .slds-progress-ring__path { fill: var(--slds-g-color-accent-1); } .slds-rich-text-editor { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-radius: var(--slds-g-radius-border-2); } .slds-rich-text-editor[aria-label='disabled'] { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-rich-text-editor_toolbar-only, .slds-rich-text-editor--toolbar-only { border: 0; border-radius: 0; } .slds-rich-text-editor__toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; white-space: nowrap; position: relative; padding-block: var(--slds-g-spacing-2) var(--slds-g-spacing-1); padding-inline: var(--slds-g-spacing-2); border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: var(--slds-g-radius-border-2); border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); background-color: var(--slds-g-color-surface-container-2); } .slds-rich-text-editor__toolbar .slds-icon { --slds-c-icon-color-foreground: currentColor; } .slds-rich-text-editor__toolbar[aria-label='disabled'] { border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-rich-text-editor__toolbar[aria-label='disabled'] .slds-icon { --slds-c-icon-color-foreground: var(--slds-g-color-on-disabled-2); } .slds-rich-text-editor__col { align-self: center; } .slds-rich-text-editor__col + .slds-rich-text-editor__col { margin-inline-start: var(--slds-g-spacing-2); } .slds-rich-text-editor__col_grow, .slds-rich-text-editor__col--grow { flex-grow: 1; } .slds-rich-text-editor__toolbar_bottom, .slds-rich-text-editor__toolbar--bottom { border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-2); border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2); border-block-end: 0; } .slds-rich-text-editor__toolbar_detached, .slds-rich-text-editor__toolbar--detached { border-radius: 0; border-block-start: 0; border-block-end: 0; } .slds-rich-text-editor .slds-button-group-list { margin-inline-end: var(--slds-g-spacing-1); margin-block-end: var(--slds-g-spacing-1); margin-inline-start: 0; } .slds-rich-text-editor .slds-button-group-list:last-child { margin-inline-end: 0; } .slds-rich-text-editor__select { margin-inline-end: var(--slds-g-spacing-1); margin-block-end: var(--slds-g-spacing-1); } .slds-rich-text-editor__select_x-small, .slds-rich-text-editor__select--x-small { max-width: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-9)); width: auto; } .slds-rich-text-editor__select_xx-small, .slds-rich-text-editor__select--xx-small { max-width: calc(var(--slds-g-sizing-10) + var(--slds-g-sizing-9)); width: auto; } .slds-region_narrow .slds-combobox, .slds-region--narrow .slds-combobox { max-width: 11rem; } .slds-rich-text-editor.slds-has-focus { border-color: transparent; box-shadow: var(--slds-g-shadow-outline-focus-1); } .slds-rich-text-editor.slds-has-error { border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-border-error-1); } .slds-rich-text-editor.slds-has-error .slds-input { border-color: var(--slds-g-color-border-2); box-shadow: none; } .slds-rich-text-editor.slds-has-error .slds-form-element__help { background: var(--slds-g-color-surface-container-1); margin-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: var(--slds-g-radius-border-1); border-end-start-radius: var(--slds-g-radius-border-1); } .slds-rich-text-editor.slds-has-error .slds-button_icon, .slds-rich-text-editor.slds-has-error .slds-button--icon { color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1)); } .slds-rich-text-area__content { --_slds-c-richtexteditor-sizing-height-min: var(--slds-c-textarea-sizing-min-height); --_slds-c-richtexteditor-sizing-height-max: var(--slds-c-textarea-sizing-max-height); overflow-y: auto; min-height: var(--_slds-c-richtexteditor-sizing-height-min, calc(var(--slds-g-sizing-10) + var(--slds-g-sizing-9))); max-height: var(--_slds-c-richtexteditor-sizing-height-max, var(--slds-g-sizing-14)); padding: var(--slds-g-spacing-4); background-color: var(--slds-s-input-color-background, var(--slds-g-color-surface-container-1)); } .slds-rich-text-editor__output .slds-rich-text-area__content { border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-2); } .slds-picklist__label[disabled] .slds-icon { fill: var(--slds-g-color-on-disabled-1); } [contenteditable]:focus { outline: none; } .slds-rich-text-editor__textarea:last-child .slds-rich-text-area__content { border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: var(--slds-g-radius-border-2); border-end-start-radius: var(--slds-g-radius-border-2); } .slds-rich-text-editor__textarea:first-child .slds-rich-text-area__content { border-start-start-radius: var(--slds-g-radius-border-2); border-start-end-radius: var(--slds-g-radius-border-2); border-end-end-radius: 0; border-end-start-radius: 0; } .slds-rich-text-editor__textarea .ql-editor { white-space: pre-wrap; word-wrap: break-word; user-select: text; } .slds-rich-text-editor__textarea .ql-editor.ql-blank::before { color: var(--slds-g-color-on-surface-1, #54698d); content: attr(data-placeholder); pointer-events: none; position: absolute; } .slds-rich-text-editor__textarea .ql-editor a { text-decoration: underline; } .slds-rich-text-editor__textarea .overflow-menu { z-index: 2; } .slds-rich-text-editor__textarea .ql-active { background-color: var(--slds-g-color-surface-container-2); } .slds-rich-text-editor__textarea .ql-clipboard { position: absolute !important; margin: -1px !important; border: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; } .slds-rich-text-editor__textarea p, .slds-rich-text-editor__textarea ol, .slds-rich-text-editor__textarea ul, .slds-rich-text-editor__textarea pre, .slds-rich-text-editor__textarea blockquote, .slds-rich-text-editor__textarea h1, .slds-rich-text-editor__textarea h2, .slds-rich-text-editor__textarea h3, .slds-rich-text-editor__textarea h4, .slds-rich-text-editor__textarea h5, .slds-rich-text-editor__textarea h6 { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .slds-rich-text-editor__textarea ol, .slds-rich-text-editor__textarea ul { margin: 0; padding: 0; padding-inline-start: 1.5em; } .slds-rich-text-editor__textarea ol > li { list-style-type: none; } .slds-rich-text-editor__textarea ul { } .slds-rich-text-editor__textarea ul > li { list-style-type: none; } .slds-rich-text-editor__textarea ul > li::before { content: '\2022'; vertical-align: middle; display: inline-block; line-height: normal; } .slds-rich-text-editor__textarea ul[data-checked='true'], .slds-rich-text-editor__textarea ul[data-checked='false'] { pointer-events: none; } .slds-rich-text-editor__textarea ul[data-checked='true'] > li::before { color: var(--slds-g-color-on-surface-1); cursor: pointer; pointer-events: all; } .slds-rich-text-editor__textarea ul[data-checked='false'] > li::before { color: var(--slds-g-color-on-surface-1); cursor: pointer; pointer-events: all; } .slds-rich-text-editor__textarea ul[data-checked='true'] > li::before { content: '\2611'; } .slds-rich-text-editor__textarea ul[data-checked='false'] > li::before { content: '\2610'; } .slds-rich-text-editor__textarea li::before { display: inline-block; margin-inline-end: 0.3em; text-align: right; white-space: nowrap; width: 1.2em; } .slds-rich-text-editor__textarea li:not(.ql-direction-rtl)::before { margin-inline-start: -1.5em; } .slds-rich-text-editor__textarea ol li, .slds-rich-text-editor__textarea ul li { padding-inline-start: 1.5em; } .slds-rich-text-editor__textarea ol li { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-increment: list-num; } .slds-rich-text-editor__textarea ol li::before { content: counter(list-num, decimal) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-1 { counter-increment: list-1; } .slds-rich-text-editor__textarea ol li.ql-indent-1::before { content: counter(list-1, lower-alpha) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-2 { counter-increment: list-2; } .slds-rich-text-editor__textarea ol li.ql-indent-2::before { content: counter(list-2, lower-roman) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-3 { counter-increment: list-3; } .slds-rich-text-editor__textarea ol li.ql-indent-3::before { content: counter(list-3, decimal) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-4 { counter-increment: list-4; } .slds-rich-text-editor__textarea ol li.ql-indent-4::before { content: counter(list-4, lower-alpha) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-5 { counter-increment: list-5; } .slds-rich-text-editor__textarea ol li.ql-indent-5::before { content: counter(list-5, lower-roman) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-6 { counter-increment: list-6; } .slds-rich-text-editor__textarea ol li.ql-indent-6::before { content: counter(list-6, decimal) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-7 { counter-increment: list-7; } .slds-rich-text-editor__textarea ol li.ql-indent-7::before { content: counter(list-7, lower-alpha) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-7 { counter-reset: list-8 list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-8 { counter-increment: list-8; } .slds-rich-text-editor__textarea ol li.ql-indent-8::before { content: counter(list-8, lower-roman) '. '; } .slds-rich-text-editor__textarea ol li.ql-indent-8 { counter-reset: list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-9 { counter-increment: list-9; } .slds-rich-text-editor__textarea ol li.ql-indent-9::before { content: counter(list-9, decimal) '. '; } .slds-rich-text-editor__textarea ul li.ql-indent-1::before { content: '\25e6'; } .slds-rich-text-editor__textarea ul li.ql-indent-2::before, .slds-rich-text-editor__textarea ul li.ql-indent-3::before, .slds-rich-text-editor__textarea ul li.ql-indent-4::before, .slds-rich-text-editor__textarea ul li.ql-indent-5::before, .slds-rich-text-editor__textarea ul li.ql-indent-6::before, .slds-rich-text-editor__textarea ul li.ql-indent-7::before, .slds-rich-text-editor__textarea ul li.ql-indent-8::before { content: '\25aa'; } .slds-rich-text-editor__textarea li.ql-indent-1:not(.ql-direction-rtl) { padding-inline-start: 4.5em; } .slds-rich-text-editor__textarea li.ql-indent-1.ql-direction-rtl.ql-align-right { padding-inline-end: 4.5em; } .slds-rich-text-editor__textarea li.ql-indent-2:not(.ql-direction-rtl) { padding-inline-start: 7.5em; } .slds-rich-text-editor__textarea li.ql-indent-2.ql-direction-rtl.ql-align-right { padding-inline-end: 7.5em; } .slds-rich-text-editor__textarea li.ql-indent-3:not(.ql-direction-rtl) { padding-inline-start: 10.5em; } .slds-rich-text-editor__textarea li.ql-indent-3.ql-direction-rtl.ql-align-right { padding-inline-end: 10.5em; } .slds-rich-text-editor__textarea li.ql-indent-4:not(.ql-direction-rtl) { padding-inline-start: 13.5em; } .slds-rich-text-editor__textarea li.ql-indent-4.ql-direction-rtl.ql-align-right { padding-inline-end: 13.5em; } .slds-rich-text-editor__textarea li.ql-indent-5:not(.ql-direction-rtl) { padding-inline-start: 16.5em; } .slds-rich-text-editor__textarea li.ql-indent-5.ql-direction-rtl.ql-align-right { padding-inline-end: 16.5em; } .slds-rich-text-editor__textarea li.ql-indent-6:not(.ql-direction-rtl) { padding-inline-start: 19.5em; } .slds-rich-text-editor__textarea li.ql-indent-6.ql-direction-rtl.ql-align-right { padding-inline-end: 19.5em; } .slds-rich-text-editor__textarea li.ql-indent-7:not(.ql-direction-rtl) { padding-inline-start: 22.5em; } .slds-rich-text-editor__textarea li.ql-indent-7.ql-direction-rtl.ql-align-right { padding-inline-end: 22.5em; } .slds-rich-text-editor__textarea li.ql-indent-8:not(.ql-direction-rtl) { padding-inline-start: 25.5em; } .slds-rich-text-editor__textarea li.ql-indent-8.ql-direction-rtl.ql-align-right { padding-inline-end: 25.5em; } .slds-rich-text-editor__textarea li.ql-indent-9:not(.ql-direction-rtl) { padding-inline-start: 28.5em; } .slds-rich-text-editor__textarea li.ql-indent-9.ql-direction-rtl.ql-align-right { padding-inline-end: 28.5em; } .slds-rich-text-editor__textarea, .slds-rich-text-editor__output { line-height: var(--slds-g-font-lineheight-base); overflow-wrap: break-word; word-wrap: break-word; hyphens: manual; } .slds-rich-text-editor__textarea h1, .slds-rich-text-editor__output h1 { font-size: var(--slds-g-font-scale-3); } .slds-rich-text-editor__textarea h2, .slds-rich-text-editor__output h2 { font-size: var(--slds-g-font-scale-1); font-weight: var(--slds-g-font-weight-6); } .slds-rich-text-editor__textarea h3, .slds-rich-text-editor__output h3 { font-size: var(--slds-g-font-scale-1); } .slds-rich-text-editor__textarea h4, .slds-rich-text-editor__output h4 { font-size: var(--slds-g-font-scale-neg-1); font-weight: var(--slds-g-font-weight-6); } .slds-rich-text-editor__textarea h5, .slds-rich-text-editor__output h5 { font-size: var(--slds-g-font-scale-neg-1); } .slds-rich-text-editor__textarea h6, .slds-rich-text-editor__output h6 { font-size: var(--slds-g-font-scale-neg-3); font-weight: var(--slds-g-font-weight-6); } .slds-rich-text-editor__textarea h1, .slds-rich-text-editor__textarea h2, .slds-rich-text-editor__textarea h3, .slds-rich-text-editor__textarea h4, .slds-rich-text-editor__textarea h5, .slds-rich-text-editor__textarea h6, .slds-rich-text-editor__textarea ul, .slds-rich-text-editor__textarea ol, .slds-rich-text-editor__textarea dl, .slds-rich-text-editor__textarea img, .slds-rich-text-editor__output h1, .slds-rich-text-editor__output h2, .slds-rich-text-editor__output h3, .slds-rich-text-editor__output h4, .slds-rich-text-editor__output h5, .slds-rich-text-editor__output h6, .slds-rich-text-editor__output ul, .slds-rich-text-editor__output ol, .slds-rich-text-editor__output dl, .slds-rich-text-editor__output img { margin-block-end: var(--slds-g-spacing-3); } .slds-rich-text-editor__textarea blockquote, .slds-rich-text-editor__output blockquote { margin-block: var(--slds-g-spacing-6); margin-inline: var(--slds-g-spacing-5); } .slds-rich-text-editor__textarea ins, .slds-rich-text-editor__output ins { color: var(--slds-g-color-success-1); text-decoration: underline; } .slds-rich-text-editor__textarea del, .slds-rich-text-editor__output del { color: var(--slds-g-color-error-1); text-decoration: line-through; } .slds-rich-text-editor__textarea ul, .slds-rich-text-editor__output ul { margin-inline-start: var(--slds-g-spacing-5); list-style: disc; } .slds-rich-text-editor__textarea ul ul, .slds-rich-text-editor__output ul ul { list-style: circle; margin-block-end: 0; } .slds-rich-text-editor__textarea ul ul ul, .slds-rich-text-editor__output ul ul ul { list-style: square; } .slds-rich-text-editor__textarea ul ul ul ul, .slds-rich-text-editor__output ul ul ul ul { list-style: disc; } .slds-rich-text-editor__textarea ul ul ul ul ul, .slds-rich-text-editor__output ul ul ul ul ul { list-style: circle; } .slds-rich-text-editor__textarea ul ol, .slds-rich-text-editor__output ul ol { margin-inline-start: var(--slds-g-spacing-5); list-style: decimal; margin-block-end: 0; } .slds-rich-text-editor__textarea ol, .slds-rich-text-editor__output ol { margin-inline-start: var(--slds-g-spacing-5); list-style: decimal; } .slds-rich-text-editor__textarea ol ol, .slds-rich-text-editor__output ol ol { list-style: lower-alpha; margin-block-end: 0; } .slds-rich-text-editor__textarea ol ol ol, .slds-rich-text-editor__output ol ol ol { list-style: lower-roman; } .slds-rich-text-editor__textarea ol ol ol ol, .slds-rich-text-editor__output ol ol ol ol { list-style: decimal; } .slds-rich-text-editor__textarea ol ol ol ol ol, .slds-rich-text-editor__output ol ol ol ol ol { list-style: lower-alpha; } .slds-rich-text-editor__textarea ol ul, .slds-rich-text-editor__output ol ul { margin-inline-start: var(--slds-g-spacing-5); list-style: disc; margin-block-end: 0; } .slds-rich-text-editor__textarea dd, .slds-rich-text-editor__output dd { margin-inline-start: 2.5rem; } .slds-rich-text-editor__textarea abbr[title], .slds-rich-text-editor__textarea acronym[title], .slds-rich-text-editor__output abbr[title], .slds-rich-text-editor__output acronym[title] { border-block-end: 1px dotted; cursor: help; } .slds-rich-text-editor__textarea table, .slds-rich-text-editor__output table { overflow-wrap: normal; word-wrap: normal; word-break: normal; width: auto; } .slds-rich-text-editor__textarea table caption, .slds-rich-text-editor__output table caption { text-align: center; } .slds-rich-text-editor__textarea th, .slds-rich-text-editor__textarea td, .slds-rich-text-editor__output th, .slds-rich-text-editor__output td { padding: var(--slds-g-spacing-2); } .slds-rich-text-editor__textarea .sans-serif, .slds-rich-text-editor__output .sans-serif { font-family: sans-serif; } .slds-rich-text-editor__textarea .courier, .slds-rich-text-editor__output .courier { font-family: courier; } .slds-rich-text-editor__textarea .verdana, .slds-rich-text-editor__output .verdana { font-family: verdana; } .slds-rich-text-editor__textarea .tahoma, .slds-rich-text-editor__output .tahoma { font-family: tahoma; } .slds-rich-text-editor__textarea .garamond, .slds-rich-text-editor__output .garamond { font-family: garamond; } .slds-rich-text-editor__textarea .serif, .slds-rich-text-editor__output .serif { font-family: serif; } .slds-rich-text-editor__textarea .ql-indent-1:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-1:not(.ql-direction-rtl) { padding-inline-start: 3em; } .slds-rich-text-editor__textarea .ql-indent-1.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-1.ql-direction-rtl.ql-align-right { padding-inline-end: 3em; } .slds-rich-text-editor__textarea .ql-indent-2:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-2:not(.ql-direction-rtl) { padding-inline-start: 6em; } .slds-rich-text-editor__textarea .ql-indent-2.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-2.ql-direction-rtl.ql-align-right { padding-inline-end: 6em; } .slds-rich-text-editor__textarea .ql-indent-3:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-3:not(.ql-direction-rtl) { padding-inline-start: 9em; } .slds-rich-text-editor__textarea .ql-indent-3.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-3.ql-direction-rtl.ql-align-right { padding-inline-end: 9em; } .slds-rich-text-editor__textarea .ql-indent-4:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-4:not(.ql-direction-rtl) { padding-inline-start: 12em; } .slds-rich-text-editor__textarea .ql-indent-4.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-4.ql-direction-rtl.ql-align-right { padding-inline-end: 12em; } .slds-rich-text-editor__textarea .ql-indent-5:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-5:not(.ql-direction-rtl) { padding-inline-start: 15em; } .slds-rich-text-editor__textarea .ql-indent-5.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-5.ql-direction-rtl.ql-align-right { padding-inline-end: 15em; } .slds-rich-text-editor__textarea .ql-indent-6:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-6:not(.ql-direction-rtl) { padding-inline-start: 18em; } .slds-rich-text-editor__textarea .ql-indent-6.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-6.ql-direction-rtl.ql-align-right { padding-inline-end: 18em; } .slds-rich-text-editor__textarea .ql-indent-7:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-7:not(.ql-direction-rtl) { padding-inline-start: 21em; } .slds-rich-text-editor__textarea .ql-indent-7.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-7.ql-direction-rtl.ql-align-right { padding-inline-end: 21em; } .slds-rich-text-editor__textarea .ql-indent-8:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-8:not(.ql-direction-rtl) { padding-inline-start: 24em; } .slds-rich-text-editor__textarea .ql-indent-8.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-8.ql-direction-rtl.ql-align-right { padding-inline-end: 24em; } .slds-rich-text-editor__textarea .ql-indent-9:not(.ql-direction-rtl), .slds-rich-text-editor__output .ql-indent-9:not(.ql-direction-rtl) { padding-inline-start: 27em; } .slds-rich-text-editor__textarea .ql-indent-9.ql-direction-rtl.ql-align-right, .slds-rich-text-editor__output .ql-indent-9.ql-direction-rtl.ql-align-right { padding-inline-end: 27em; } .slds-spinner_container, .slds-spinner--container { position: absolute; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; z-index: 9050; background-color: rgba(255, 255, 255, 0.75); visibility: visible; opacity: 1; transition: opacity 0.2s ease, visibility 0s; transition-delay: 0s, 0.3s; } .slds-spinner_container.is-hidden, .slds-spinner--container.is-hidden { visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0s; transition-delay: 0s, 0s; } .slds-spinner_container.hide, .slds-spinner--container.hide { display: none; } .slds-spinner { position: absolute; inset-block-start: 50%; /*! @noflip */ left: 50%; z-index: 9051; transform: translate(-50%, -50%) rotate(90deg); } .slds-spinner_inline, .slds-spinner--inline { position: relative; inset-block-start: auto; inset-inline-start: auto; inset-inline-end: auto; inset-block-end: auto; transform: none; } .slds-spinner, .slds-spinner__dot-a, .slds-spinner__dot-b { transform-origin: 50% 50%; will-change: transform; } .slds-spinner__dot-a, .slds-spinner__dot-b { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; } .slds-spinner::before, .slds-spinner::after, .slds-spinner__dot-a::before, .slds-spinner__dot-b::before, .slds-spinner__dot-a::after, .slds-spinner__dot-b::after { content: ''; position: absolute; background: var(--slds-g-color-neutral-base-50); border-radius: var(--slds-g-radius-border-circle); animation-duration: 1000ms; animation-iteration-count: infinite; transform: translate3d(0, 0, 0); } .slds-spinner__dot-a { transform: rotate(60deg); } .slds-spinner__dot-b { transform: rotate(120deg); } .slds-spinner::before { animation-delay: -83.3333ms; } .slds-spinner__dot-a::before { animation-delay: 83.3333ms; } .slds-spinner__dot-b::before { animation-delay: 250ms; } .slds-spinner::after { animation-delay: 416.6666ms; } .slds-spinner__dot-a::after { animation-delay: 583.3333ms; } .slds-spinner__dot-b::after { animation-delay: 750ms; } .slds-spinner_delayed::before, .slds-spinner--delayed::before { animation-delay: 216.6666ms; } .slds-spinner_delayed .slds-spinner__dot-a::before, .slds-spinner--delayed .slds-spinner__dot-a::before { animation-delay: 383.3333ms; } .slds-spinner_delayed .slds-spinner__dot-b::before, .slds-spinner--delayed .slds-spinner__dot-b::before { animation-delay: 550ms; } .slds-spinner_delayed::after, .slds-spinner--delayed::after { animation-delay: 716.6666ms; } .slds-spinner_delayed .slds-spinner__dot-a::after, .slds-spinner--delayed .slds-spinner__dot-a::after { animation-delay: 883.3333ms; } .slds-spinner_delayed .slds-spinner__dot-b::after, .slds-spinner--delayed .slds-spinner__dot-b::after { animation-delay: 1050ms; } .slds-spinner_brand.slds-spinner::before, .slds-spinner--brand.slds-spinner::before, .slds-spinner_brand.slds-spinner::after, .slds-spinner--brand.slds-spinner::after, .slds-spinner_brand .slds-spinner__dot-a::before, .slds-spinner--brand .slds-spinner__dot-a::before, .slds-spinner_brand .slds-spinner__dot-b::before, .slds-spinner--brand .slds-spinner__dot-b::before, .slds-spinner_brand .slds-spinner__dot-a::after, .slds-spinner--brand .slds-spinner__dot-a::after, .slds-spinner_brand .slds-spinner__dot-b::after, .slds-spinner--brand .slds-spinner__dot-b::after { background-color: var(--slds-g-color-accent-1); } .slds-spinner_inverse.slds-spinner::before, .slds-spinner--inverse.slds-spinner::before, .slds-spinner_inverse.slds-spinner::after, .slds-spinner--inverse.slds-spinner::after, .slds-spinner_inverse .slds-spinner__dot-a::before, .slds-spinner--inverse .slds-spinner__dot-a::before, .slds-spinner_inverse .slds-spinner__dot-b::before, .slds-spinner--inverse .slds-spinner__dot-b::before, .slds-spinner_inverse .slds-spinner__dot-a::after, .slds-spinner--inverse .slds-spinner__dot-a::after, .slds-spinner_inverse .slds-spinner__dot-b::after, .slds-spinner--inverse .slds-spinner__dot-b::after { background-color: var(--slds-g-color-surface-container-1); } .slds-spinner_xx-small, .slds-spinner--xx-small { width: var(--slds-g-sizing-3); } .slds-spinner_xx-small.slds-spinner_inline, .slds-spinner--xx-small.slds-spinner--inline { height: var(--slds-g-sizing-3); } .slds-spinner_xx-small.slds-spinner::before, .slds-spinner--xx-small.slds-spinner::before, .slds-spinner_xx-small.slds-spinner::after, .slds-spinner--xx-small.slds-spinner::after, .slds-spinner_xx-small .slds-spinner__dot-a::before, .slds-spinner--xx-small .slds-spinner__dot-a::before, .slds-spinner_xx-small .slds-spinner__dot-b::before, .slds-spinner--xx-small .slds-spinner__dot-b::before, .slds-spinner_xx-small .slds-spinner__dot-a::after, .slds-spinner--xx-small .slds-spinner__dot-a::after, .slds-spinner_xx-small .slds-spinner__dot-b::after, .slds-spinner--xx-small .slds-spinner__dot-b::after { width: 0.125rem; height: 0.125rem; } .slds-spinner_xx-small.slds-spinner::before, .slds-spinner--xx-small.slds-spinner::before, .slds-spinner_xx-small .slds-spinner__dot-a::before, .slds-spinner--xx-small .slds-spinner__dot-a::before, .slds-spinner_xx-small .slds-spinner__dot-b::before, .slds-spinner--xx-small .slds-spinner__dot-b::before { inset-block-start: -0.0625rem; inset-inline-start: -0.0625rem; animation-name: dotsBounceBefore-extraExtraSmall; } .slds-spinner_xx-small.slds-spinner::after, .slds-spinner--xx-small.slds-spinner::after, .slds-spinner_xx-small .slds-spinner__dot-a::after, .slds-spinner--xx-small .slds-spinner__dot-a::after, .slds-spinner_xx-small .slds-spinner__dot-b::after, .slds-spinner--xx-small .slds-spinner__dot-b::after { inset-block-start: -0.0625rem; inset-inline-end: -0.0625rem; animation-name: dotsBounceAfter-extraExtraSmall; } @keyframes dotsBounceBefore-extraExtraSmall { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265); } 80% { transform: translate3d(-0.125rem, 0, 0); animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715); } 100% { transform: translate3d(0, 0, 0); } } @keyframes dotsBounceAfter-extraExtraSmall { 0% { transform: translate3d(0, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265); transform: translate3d(0, 0, 0); } 80% { animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715); transform: translate3d(0.125rem, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .slds-spinner_x-small, .slds-spinner--x-small { width: var(--slds-g-sizing-5); } .slds-spinner_x-small.slds-spinner_inline, .slds-spinner--x-small.slds-spinner--inline { height: var(--slds-g-sizing-5); } .slds-spinner_x-small.slds-spinner::before, .slds-spinner--x-small.slds-spinner::before, .slds-spinner_x-small.slds-spinner::after, .slds-spinner--x-small.slds-spinner::after, .slds-spinner_x-small .slds-spinner__dot-a::before, .slds-spinner--x-small .slds-spinner__dot-a::before, .slds-spinner_x-small .slds-spinner__dot-b::before, .slds-spinner--x-small .slds-spinner__dot-b::before, .slds-spinner_x-small .slds-spinner__dot-a::after, .slds-spinner--x-small .slds-spinner__dot-a::after, .slds-spinner_x-small .slds-spinner__dot-b::after, .slds-spinner--x-small .slds-spinner__dot-b::after { width: var(--slds-g-sizing-2); height: var(--slds-g-sizing-2); } .slds-spinner_x-small.slds-spinner::before, .slds-spinner--x-small.slds-spinner::before, .slds-spinner_x-small .slds-spinner__dot-a::before, .slds-spinner--x-small .slds-spinner__dot-a::before, .slds-spinner_x-small .slds-spinner__dot-b::before, .slds-spinner--x-small .slds-spinner__dot-b::before { inset-block-start: -0.125rem; inset-inline-start: -0.125rem; animation-name: dotsBounceBefore-extraSmall; } .slds-spinner_x-small.slds-spinner::after, .slds-spinner--x-small.slds-spinner::after, .slds-spinner_x-small .slds-spinner__dot-a::after, .slds-spinner--x-small .slds-spinner__dot-a::after, .slds-spinner_x-small .slds-spinner__dot-b::after, .slds-spinner--x-small .slds-spinner__dot-b::after { inset-block-start: -0.125rem; inset-inline-end: -0.125rem; animation-name: dotsBounceAfter-extraSmall; } @keyframes dotsBounceBefore-extraSmall { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 80% { transform: translate3d(-0.25rem, 0, 0); animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } 100% { transform: translate3d(0, 0, 0); } } @keyframes dotsBounceAfter-extraSmall { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 80% { transform: translate3d(0.25rem, 0, 0); animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } 100% { transform: translate3d(0, 0, 0); } } .slds-spinner_small, .slds-spinner--small { width: var(--slds-g-sizing-6); } .slds-spinner_small.slds-spinner_inline, .slds-spinner--small.slds-spinner--inline { height: var(--slds-g-sizing-6); } .slds-spinner_small.slds-spinner::before, .slds-spinner--small.slds-spinner::before, .slds-spinner_small.slds-spinner::after, .slds-spinner--small.slds-spinner::after, .slds-spinner_small .slds-spinner__dot-a::before, .slds-spinner--small .slds-spinner__dot-a::before, .slds-spinner_small .slds-spinner__dot-b::before, .slds-spinner--small .slds-spinner__dot-b::before, .slds-spinner_small .slds-spinner__dot-a::after, .slds-spinner--small .slds-spinner__dot-a::after, .slds-spinner_small .slds-spinner__dot-b::after, .slds-spinner--small .slds-spinner__dot-b::after { width: var(--slds-g-sizing-2); height: var(--slds-g-sizing-2); } .slds-spinner_small.slds-spinner::before, .slds-spinner--small.slds-spinner::before, .slds-spinner_small .slds-spinner__dot-a::before, .slds-spinner--small .slds-spinner__dot-a::before, .slds-spinner_small .slds-spinner__dot-b::before, .slds-spinner--small .slds-spinner__dot-b::before { inset-block-start: -0.125rem; inset-inline-start: -0.125rem; animation-name: dotsBounceBefore-small; } .slds-spinner_small.slds-spinner::after, .slds-spinner--small.slds-spinner::after, .slds-spinner_small .slds-spinner__dot-a::after, .slds-spinner--small .slds-spinner__dot-a::after, .slds-spinner_small .slds-spinner__dot-b::after, .slds-spinner--small .slds-spinner__dot-b::after { inset-block-start: -0.125rem; inset-inline-end: -0.125rem; animation-name: dotsBounceAfter-small; } @keyframes dotsBounceBefore-small { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 80% { transform: translate3d(-0.375rem, 0, 0); animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } 100% { transform: translate3d(0, 0, 0); } } @keyframes dotsBounceAfter-small { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 80% { transform: translate3d(0.375rem, 0, 0); animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } 100% { transform: translateX(0); } } .slds-spinner_medium, .slds-spinner--medium { width: var(--slds-g-sizing-9); } .slds-spinner_medium.slds-spinner_inline, .slds-spinner--medium.slds-spinner--inline { height: var(--slds-g-sizing-9); } .slds-spinner_medium.slds-spinner::before, .slds-spinner--medium.slds-spinner::before, .slds-spinner_medium.slds-spinner::after, .slds-spinner--medium.slds-spinner::after, .slds-spinner_medium .slds-spinner__dot-a::before, .slds-spinner--medium .slds-spinner__dot-a::before, .slds-spinner_medium .slds-spinner__dot-b::before, .slds-spinner--medium .slds-spinner__dot-b::before, .slds-spinner_medium .slds-spinner__dot-a::after, .slds-spinner--medium .slds-spinner__dot-a::after, .slds-spinner_medium .slds-spinner__dot-b::after, .slds-spinner--medium .slds-spinner__dot-b::after { width: var(--slds-g-sizing-3); height: var(--slds-g-sizing-3); } .slds-spinner_medium.slds-spinner::before, .slds-spinner--medium.slds-spinner::before, .slds-spinner_medium .slds-spinner__dot-a::before, .slds-spinner--medium .slds-spinner__dot-a::before, .slds-spinner_medium .slds-spinner__dot-b::before, .slds-spinner--medium .slds-spinner__dot-b::before { animation-name: dotsBounceBefore-medium; inset-block-start: -0.25rem; inset-inline-start: -0.25rem; } .slds-spinner_medium.slds-spinner::after, .slds-spinner--medium.slds-spinner::after, .slds-spinner_medium .slds-spinner__dot-a::after, .slds-spinner--medium .slds-spinner__dot-a::after, .slds-spinner_medium .slds-spinner__dot-b::after, .slds-spinner--medium .slds-spinner__dot-b::after { animation-name: dotsBounceAfter-medium; inset-block-start: -0.25rem; inset-inline-end: -0.25rem; } @keyframes dotsBounceBefore-medium { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 80% { transform: translate3d(-0.5rem, 0, 0); animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } 100% { transform: translate3d(0, 0, 0); } } @keyframes dotsBounceAfter-medium { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 80% { transform: translate3d(0.5rem, 0, 0); animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } 100% { transform: translateX(0); } } .slds-spinner_large, .slds-spinner--large { width: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4)); } .slds-spinner_large.slds-spinner_inline, .slds-spinner--large.slds-spinner--inline { height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4)); } .slds-spinner_large.slds-spinner::before, .slds-spinner--large.slds-spinner::before, .slds-spinner_large.slds-spinner::after, .slds-spinner--large.slds-spinner::after, .slds-spinner_large .slds-spinner__dot-a::before, .slds-spinner--large .slds-spinner__dot-a::before, .slds-spinner_large .slds-spinner__dot-b::before, .slds-spinner--large .slds-spinner__dot-b::before, .slds-spinner_large .slds-spinner__dot-a::after, .slds-spinner--large .slds-spinner__dot-a::after, .slds-spinner_large .slds-spinner__dot-b::after, .slds-spinner--large .slds-spinner__dot-b::after { width: calc(var(--slds-g-sizing-3) + var(--slds-g-sizing-1)); height: calc(var(--slds-g-sizing-3) + var(--slds-g-sizing-1)); } .slds-spinner_large.slds-spinner::before, .slds-spinner--large.slds-spinner::before, .slds-spinner_large .slds-spinner__dot-a::before, .slds-spinner--large .slds-spinner__dot-a::before, .slds-spinner_large .slds-spinner__dot-b::before, .slds-spinner--large .slds-spinner__dot-b::before { animation-name: dotsBounceBefore-medium; inset-block-start: -0.3125rem; inset-inline-start: -0.3125rem; } .slds-spinner_large.slds-spinner::after, .slds-spinner--large.slds-spinner::after, .slds-spinner_large .slds-spinner__dot-a::after, .slds-spinner--large .slds-spinner__dot-a::after, .slds-spinner_large .slds-spinner__dot-b::after, .slds-spinner--large .slds-spinner__dot-b::after { animation-name: dotsBounceAfter-medium; inset-block-start: -0.3125rem; inset-inline-end: -0.3125rem; } @keyframes dotsBounceBefore-large { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 80% { transform: translate3d(-0.75rem, 0, 0); animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } 100% { transform: translateX(0); } } @keyframes dotsBounceAfter-large { 0% { transform: translate3d(0, 0, 0); } 60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 80% { transform: translate3d(0.75rem, 0, 0); animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } 100% { transform: translateX(0); } } .slds-split-view_container, .slds-split-view--container { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; } .slds-split-view_container.slds-is-closed .slds-split-view, .slds-split-view--container.slds-is-closed .slds-split-view { display: none; } .slds-split-view_container.slds-is-closed .slds-split-view__toggle-button .slds-button__icon, .slds-split-view--container.slds-is-closed .slds-split-view__toggle-button .slds-button__icon { transform: rotate(180deg); } .slds-split-view_container.slds-is-open, .slds-split-view--container.slds-is-open { flex: 1 1 auto; } .slds-split-view_container.slds-is-open .slds-split-view, .slds-split-view--container.slds-is-open .slds-split-view { display: inherit; } .slds-split-view_container.slds-is-open .slds-split-view__toggle-button .slds-button__icon, .slds-split-view--container.slds-is-open .slds-split-view__toggle-button .slds-button__icon { transform: rotate(0); } .slds-split-view { background: var(--slds-g-color-surface-2); color: var(--slds-g-color-on-surface-1); } .slds-split-view__header { padding-block-start: var(--slds-g-spacing-var-block-4); padding-block-end: var(--slds-g-spacing-2); padding-inline-start: var(--slds-g-spacing-var-inline-5); padding-inline-end: var(--slds-g-spacing-var-inline-4); } .slds-split-view__list-header { font-size: var(--slds-g-font-scale-1); font-weight: var(--slds-g-font-weight-7); line-height: var(--slds-g-font-lineheight-2); border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); padding-block: var(--slds-g-spacing-2); padding-inline-start: var(--slds-g-spacing-5); padding-inline-end: var(--slds-g-spacing-4); } .slds-split-view__list-item { display: flex; position: relative; border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); font-size: var(--slds-g-font-scale-neg-1); } .slds-split-view__list-item:hover, .slds-split-view__list-item:focus { background: var(--slds-g-color-surface-container-1); } .slds-split-view__list-item .slds-indicator_unread, .slds-split-view__list-item .slds-indicator--unread, .slds-split-view__list-item .slds-indicator--unread { background: var(--slds-g-color-accent-1); } .slds-indicator_unread, .slds-indicator--unread { width: 8px; height: 8px; position: absolute; inset-block-start: var(--slds-g-spacing-4); inset-inline-start: var(--slds-g-spacing-2); display: block; border-radius: var(--slds-g-radius-border-circle); background: var(--slds-g-color-error-1); } .slds-split-view__list-item-action { color: currentColor; padding-block-start: var(--slds-g-spacing-var-block-3); padding-block-end: var(--slds-g-spacing-var-block-2); padding-inline-start: var(--slds-g-spacing-var-inline-5); padding-inline-end: var(--slds-g-spacing-var-inline-4); } .slds-split-view__list-item-action:hover, .slds-split-view__list-item-action:focus { outline: none; background: var(--slds-g-color-surface-container-1); color: currentColor; text-decoration: none; } .slds-split-view__list-item-action:focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); outline: 0; } .slds-split-view__list-item-action[aria-current='page'] { box-shadow: inset 4px 0 0 var(--slds-g-color-accent-1); } .slds-split-view__list-item-action[aria-current='page']:focus { box-shadow: inset 4px 0 0 var(--slds-g-color-accent-1), inset 0 0 0 1px var(--slds-g-color-accent-1); } .slds-split-view__toggle-button { position: absolute; inset-inline-end: calc(0.75rem * -1); height: 100%; width: 0.75rem; background: var(--slds-g-color-surface-container-1); border-radius: 0; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-split-view__toggle-button:hover, .slds-split-view__toggle-button:focus { background: var(--slds-g-color-surface-container-1); } .slds-split-view__toggle-button.slds-is-closed .slds-button__icon { transform: rotate(180deg); } .slds-tile + .slds-tile { margin-block-start: var(--slds-g-spacing-2); } .slds-tile__detail { position: relative; } .slds-tile__meta { color: var(--slds-g-color-on-surface-3); } .slds-tile_board, .slds-tile--board { position: relative; } .slds-tile_board .slds-has-alert, .slds-tile--board .slds-has-alert { padding-inline-end: var(--slds-g-spacing-5); } .slds-tile_board__icon, .slds-tile--board__icon { width: var(--slds-g-spacing-4); height: var(--slds-g-spacing-4); position: absolute; inset-block-end: var(--slds-g-spacing-1); inset-inline-end: var(--slds-g-spacing-1); } .slds-tabs_default, .slds-tabs--default { display: block; width: 100%; } .slds-tabs_default .slds-tabs__item_overflow, .slds-tabs--default .slds-tabs__item--overflow { overflow: visible; } .slds-tabs_default__nav, .slds-tabs--default__nav { display: flex; align-items: flex-start; border-block-end-width: var(--slds-c-tabs-list-sizing-border, var(--slds-g-sizing-border-1)); border-block-end-style: solid; border-block-end-color: var(--slds-c-tabs-list-color-border, var(--slds-s-navigation-color-border, var(--slds-g-color-border-1))); } .slds-tabs_default__item, .slds-tabs--default__item { color: var(--slds-c-tabs-item-text-color, var(--slds-s-navigation-color, var(--slds-g-color-on-surface-2))); position: relative; padding-block-start: var(--slds-c-tabs-item-spacing-blockstart, 0); padding-inline-end: var(--slds-c-tabs-item-spacing-inlineend, var(--slds-g-spacing-3)); padding-block-end: var(--slds-c-tabs-item-spacing-blockend, 0); padding-inline-start: var(--slds-c-tabs-item-spacing-inlinestart, var(--slds-g-spacing-3)); margin-block-end: calc(var(--slds-c-tabs-list-sizing-border, var(--slds-c-tabs-list-sizing-border)) * -1); font-weight: var(--slds-s-navigation-font-weight); font-size: var(--slds-g-font-scale-var-1); } .slds-tabs_default__item::after, .slds-tabs--default__item::after { display: block; content: ''; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; height: 0; position: absolute; } .slds-tabs_default__item.slds-is-active, .slds-tabs--default__item.slds-is-active { --slds-c-tabs-item-text-color: var(--slds-c-tabs-item-text-color-active, var(--slds-s-navigation-color-active, var(--slds-g-color-on-surface-3))); } .slds-tabs_default__item.slds-is-active::after, .slds-tabs--default__item.slds-is-active::after { background-color: var(--slds-c-tabs-item-color-border-active, var(--slds-g-color-accent-2)); height: var(--slds-c-tabs-list-sizing-border, var(--slds-s-navigation-sizing-border-active)); } .slds-tabs_default__item.slds-is-active .slds-tabs_default__link, .slds-tabs--default__item.slds-is-active .slds-tabs--default__link { font-weight: var(--slds-s-navigation-font-weight-active); } .slds-tabs_default__item.slds-is-active .slds-tabs_default__link:hover, .slds-tabs--default__item.slds-is-active .slds-tabs--default__link:hover { color: currentColor; } .slds-tabs_default__item:hover, .slds-tabs--default__item:hover { color: var(--slds-s-navigation-color-hover); } .slds-tabs_default__item:hover::after, .slds-tabs--default__item:hover::after { height: var(--slds-c-tabs-list-sizing-border, var(--slds-s-navigation-sizing-border-hover)); background-color: var(--slds-c-tabs-item-color-border-hover, var(--slds-s-navigation-color-border-hover, var(--slds-g-color-accent-3))); } .slds-tabs_default__item:focus-visible, .slds-tabs--default__item:focus-visible { outline: 0; } .slds-tabs_default__item:focus-visible::after, .slds-tabs--default__item:focus-visible::after { height: var(--slds-c-tabs-list-sizing-border, var(--slds-s-navigation-sizing-border-active)); background-color: var(--slds-c-tabs-item-color-border-active, var(--slds-g-color-accent-2)); } .slds-tabs_default__item .slds-tabs_default__link:focus-visible, .slds-tabs--default__item .slds-tabs--default__link:focus-visible { box-shadow: none; } .slds-tabs_default__item:has(.slds-tabs_default__link:focus-visible), .slds-tabs--default__item:has(.slds-tabs--default__link:focus-visible) { outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -6px; } .slds-tabs_default__item.slds-has-notification, .slds-tabs--default__item.slds-has-notification { background: var(--slds-g-color-surface-container-2); } .slds-tabs_default__item.slds-has-notification::after, .slds-tabs--default__item.slds-has-notification::after { background-color: var(--slds-g-color-border-1); } .slds-tabs_default__item.slds-has-notification:hover::after, .slds-tabs--default__item.slds-has-notification:hover::after { background-color: var(--slds-g-color-accent-3); } .slds-tabs_default__item.slds-has-notification .slds-indicator_unread, .slds-tabs--default__item.slds-has-notification .slds-indicator--unread { display: inline-block; height: 0.375rem; width: 0.375rem; position: relative; inset-block-start: auto; inset-inline-start: auto; } .slds-tabs_default__item.slds-has-notification .slds-indicator_unsaved, .slds-tabs--default__item.slds-has-notification .slds-indicator--unsaved { inset-block-start: calc(var(--slds-g-spacing-1) * -1); } .slds-tabs_default__item.slds-is-unsaved .slds-indicator_unread, .slds-tabs--default__item.slds-is-unsaved .slds-indicator--unread { margin-inline-start: -0.35rem; } .slds-tabs_default__item.slds-is-unsaved .slds-indicator_unsaved, .slds-tabs--default__item.slds-is-unsaved .slds-indicator--unsaved { color: var(--slds-g-color-accent-3); } .slds-tabs_default__link, .slds-tabs--default__link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; height: var(--slds-c-tabs-item-sizing-height, var(--slds-s-navigation-sizing-height, 2.5rem)); line-height: var(--slds-c-tabs-item-font-lineheight, var(--slds-s-navigation-font-lineheight, 2.5rem)); color: currentColor; border: 0; text-transform: inherit; z-index: 1; } .slds-tabs_default__link:focus-visible, .slds-tabs--default__link:focus-visible { outline: 0; } .slds-tabs_default__link:hover, .slds-tabs--default__link:hover, .slds-tabs_default__link:focus, .slds-tabs--default__link:focus { text-decoration: none; box-shadow: none; color: currentColor; } .slds-tabs_default__link[tabindex='0']:focus-visible, .slds-tabs--default__link[tabindex='0']:focus-visible { text-decoration: none; } .slds-tabs_default__overflow-button, .slds-tabs--default__overflow-button { display: inline-flex; height: var(--slds-c-tabs-item-sizing-height, var(--slds-s-navigation-sizing-height, 2.5rem)); line-height: var(--slds-c-tabs-item-font-lineheight, var(--slds-s-navigation-font-lineheight, 2.5rem)); } .slds-tabs_default__overflow-button .slds-button, .slds-tabs--default__overflow-button .slds-button { line-height: inherit; color: var(--slds-c-tabs-item-text-color, var(--slds-g-color-on-surface-1)); box-shadow: none; --slds-c-button-color-border-active: transparent; } .slds-tabs_default__overflow-button .slds-button:focus-visible, .slds-tabs--default__overflow-button .slds-button:focus-visible { text-decoration: underline; } .slds-tabs_default__overflow-button.slds-has-error .slds-button, .slds-tabs--default__overflow-button.slds-has-error .slds-button, .slds-tabs_default__overflow-button.slds-has-success .slds-button, .slds-tabs--default__overflow-button.slds-has-success .slds-button { color: var(--slds-g-color-neutral-base-100); } .slds-tabs_default__content, .slds-tabs--default__content { position: relative; padding-block-start: var(--slds-c-tabs-panel-spacing-blockstart, var(--slds-c-tabs-panel-spacing-block, var(--slds-g-spacing-3))); padding-inline-end: var(--slds-c-tabs-panel-spacing-inlineend, var(--slds-c-tabs-panel-spacing-inline, 0)); padding-block-end: var(--slds-c-tabs-panel-spacing-blockend, var(--slds-c-tabs-panel-spacing-block, var(--slds-g-spacing-3))); padding-inline-start: var(--slds-c-tabs-panel-spacing-inlinestart, var(--slds-c-tabs-panel-spacing-inline, 0)); } .slds-tabs_medium .slds-tabs_default__item, .slds-tabs--medium .slds-tabs--default__item, .slds-tabs_medium .slds-tabs_scoped__link, .slds-tabs--medium .slds-tabs--scoped__link { font-size: var(--slds-g-font-scale-var-2); } .slds-tabs_medium .slds-tabs_scoped__link, .slds-tabs--medium .slds-tabs--scoped__link { padding-inline: var(--slds-g-spacing-var-inline-6); } .slds-tabs_large .slds-tabs_default__item, .slds-tabs--large .slds-tabs--default__item, .slds-tabs_large .slds-tabs_scoped__link, .slds-tabs--large .slds-tabs--scoped__link { font-size: var(--slds-g-font-scale-var-3); } .slds-tabs_large .slds-tabs_scoped__link, .slds-tabs--large .slds-tabs--scoped__link { padding-inline: var(--slds-g-spacing-var-inline-6); } .slds-tabs__left-icon { margin-inline-end: var(--slds-g-spacing-2); } .slds-tabs__left-icon:empty { margin-inline-end: 0; } .slds-tabs__right-icon { margin-inline-start: var(--slds-g-spacing-2); } .slds-tabs_scoped, .slds-tabs--scoped { display: block; width: 100%; } .slds-tabs_scoped__nav, .slds-tabs--scoped__nav { display: flex; align-items: flex-start; background-color: var(--slds-s-navigation-color-background); border: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border); border-start-start-radius: var(--slds-s-navigation-radius-border); border-start-end-radius: var(--slds-s-navigation-radius-border); border-end-end-radius: 0; border-end-start-radius: 0; } .slds-tabs_scoped__item, .slds-tabs--scoped__item { position: relative; margin-block-end: calc(var(--slds-g-sizing-border-1) * -1); } .slds-tabs_scoped__item + .slds-tabs_scoped__item, .slds-tabs--scoped__item + .slds-tabs--scoped__item { margin-inline-start: calc(var(--slds-g-sizing-border-1) * -1); } .slds-tabs_scoped__item:first-child .slds-tabs_scoped__link, .slds-tabs--scoped__item:first-child .slds-tabs--scoped__link { border-inline-start: 0; border-start-start-radius: var(--slds-s-navigation-radius-border); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; } .slds-tabs_scoped__item .slds-tabs_scoped__link:focus-visible, .slds-tabs--scoped__item .slds-tabs--scoped__link:focus-visible { outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -4px; } .slds-tabs_scoped__content, .slds-tabs--scoped__content { background-color: var(--slds-s-navigation-color-background-active); border: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border, var(--slds-g-color-border-1)); border-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: var(--slds-s-navigation-radius-border); border-end-start-radius: var(--slds-s-navigation-radius-border); padding: var(--slds-g-spacing-4); } .slds-tabs_scoped__link, .slds-tabs--scoped__link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-decoration: none; cursor: pointer; height: var(--slds-c-tabs-item-sizing-height, var(--slds-s-navigation-sizing-height, 2.5rem)); line-height: var(--slds-c-tabs-item-font-lineheight, var(--slds-s-navigation-font-lineheight, 2.5rem)); padding-block: 0; padding-inline: var(--slds-g-spacing-4); color: var(--slds-s-navigation-color, var(--slds-g-color-on-surface-1)); font-weight: var(--slds-s-navigation-font-weight); background-clip: padding-box; border: 0; border-inline-start: var(--slds-g-sizing-border-1) solid transparent; border-inline-end: var(--slds-g-sizing-border-1) solid transparent; border-block-end: var(--slds-g-sizing-border-1) solid transparent; border-radius: 0; } .slds-tabs_scoped__link:hover, .slds-tabs--scoped__link:hover, .slds-tabs_scoped__link:focus, .slds-tabs--scoped__link:focus { outline: 0; text-decoration: none; color: currentColor; background-color: var(--slds-s-navigation-color-background-hover); border-color: var(--slds-s-navigation-color-border, var(--slds-g-color-border-1)); } .slds-tabs_scoped__overflow-button, .slds-tabs--scoped__overflow-button { display: inline-flex; height: var(--slds-c-tabs-item-sizing-height, var(--slds-s-navigation-sizing-height, 2.5rem)); line-height: var(--slds-c-tabs-item-font-lineheight, var(--slds-s-navigation-font-lineheight, 2.5rem)); } .slds-tabs_scoped__overflow-button .slds-button, .slds-tabs--scoped__overflow-button .slds-button { line-height: inherit; color: var(--slds-s-navigation-color, var(--slds-g-color-on-surface-1)); padding-block: 0; padding-inline: var(--slds-g-spacing-4); font-weight: var(--slds-s-navigation-font-weight); --slds-c-button-color-background-hover: transparent; --slds-c-button-shadow-focus: none; --slds-c-button-radius-border: 0; } .slds-tabs_scoped__overflow-button .slds-button:focus-visible, .slds-tabs--scoped__overflow-button .slds-button:focus-visible { outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -6px; } .slds-tabs_scoped__overflow-button .slds-button:active, .slds-tabs--scoped__overflow-button .slds-button:active { box-shadow: none; } .slds-is-active .slds-tabs_scoped__link, .slds-is-active .slds-tabs--scoped__link { background-color: var(--slds-s-navigation-color-background-active); border-color: var(--slds-s-navigation-color-border, var(--slds-g-color-border-1)); font-weight: var(--slds-s-navigation-font-weight-active); color: var(--slds-s-navigation-color-active, var(--slds-g-color-on-surface-3)); border-block-end: none; } .slds-is-active .slds-tabs_scoped__link:hover, .slds-is-active .slds-tabs--scoped__link:hover { border-bottom-color: transparent; } .slds-vertical-tabs { display: flex; overflow: hidden; border: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border); border-radius: var(--slds-g-radius-border-2); } .slds-vertical-tabs__nav { width: var(--slds-g-sizing-14); border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border); background: var(--slds-s-navigation-color-background); } .slds-vertical-tabs__nav-item { display: flex; align-items: center; overflow: hidden; border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border); color: var(--slds-s-navigation-color); } .slds-vertical-tabs__nav-item:last-child { margin-block-end: -1px; } .slds-vertical-tabs__link { display: flex; flex: 1 1 0%; align-items: center; min-width: 0; padding: var(--slds-g-spacing-3); color: currentColor; font-weight: var(--slds-s-navigation-font-weight); } .slds-vertical-tabs__link:hover { background: var(--slds-s-navigation-color-background-hover); color: var(--slds-g-color-on-surface-3); text-decoration: none; } .slds-vertical-tabs__link:focus { outline: 0; color: currentColor; } .slds-vertical-tabs__link:focus-visible { outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -6px; text-decoration: none; } .slds-vertical-tabs__left-icon { margin-inline-end: var(--slds-g-spacing-2); } .slds-vertical-tabs__left-icon:empty { margin-inline-end: 0; } .slds-vertical-tabs__right-icon { margin-inline-start: auto; } .slds-vertical-tabs__content { flex: 1; padding: var(--slds-g-spacing-3); background: var(--slds-s-navigation-color-background-active); } .slds-vertical-tabs__nav-item.slds-is-active { margin-inline-end: -1px; border-inline-end: 0; background: var(--slds-s-navigation-color-background-active); color: var(--slds-s-navigation-color-active); } .slds-vertical-tabs__nav-item.slds-is-active .slds-vertical-tabs__link:hover { background: var(--slds-s-navigation-color-background-active); color: currentColor; } .slds-vertical-tabs__nav-item.slds-is-active .slds-vertical-tabs__link { font-weight: var(--slds-s-navigation-font-weight-active); } .slds-vertical-tabs__nav-item:has(:focus-visible) { text-decoration: none; } .slds-sub-tabs .slds-tabs_default__nav, .slds-sub-tabs .slds-tabs--default__nav { background-color: var(--slds-g-color-surface-container-1); border-block-end-width: var(--slds-g-sizing-border-1); } .slds-sub-tabs__item { text-transform: none; letter-spacing: 0; margin-block-end: 0; font-weight: normal; } .slds-sub-tabs__item.slds-active, .slds-sub-tabs__item.slds-is-open { background-color: var(--_slds-c-globalnavigation-subtab-color-background-active, var(--slds-g-color-accent-light-1)); color: var(--_slds-c-globalnavigation-item-color-active, var(--slds-g-color-on-surface-1)); } .slds-sub-tabs__item.slds-active .slds-button__icon, .slds-sub-tabs__item.slds-active .slds-icon, .slds-sub-tabs__item.slds-is-open .slds-button__icon, .slds-sub-tabs__item.slds-is-open .slds-icon { fill: var(--_slds-c-globalnavigation-item-color-active, var(--slds-g-color-on-surface-1)); } .slds-sub-tabs__item.slds-active:hover, .slds-sub-tabs__item.slds-is-open:hover { background-color: var(--_slds-c-globalnavigation-subtab-color-background-active, var(--slds-g-color-accent-light-1)); } .slds-sub-tabs__item::after { content: none; } .slds-sub-tabs__item:hover { background-color: var(--_slds-c-globalnavigation-subtab-color-background-hover, var(--slds-g-color-accent-light-1)); } .slds-sub-tabs__item .slds-tabs_default__link:focus-visible, .slds-sub-tabs__item .slds-tabs--default__link:focus-visible { text-decoration: none; } .slds-sub-tabs__item + .slds-sub-tabs__item { margin-inline-start: 0; } .slds-sub-tabs__item .slds-icon_container, .slds-sub-tabs__item .slds-icon--container { --slds-c-icon-color-background: transparent; --slds-c-icon-color-foreground: var(--slds-g-color-on-surface-1); } .slds-sub-tabs__item .slds-button__icon, .slds-sub-tabs__item .slds-icon { fill: var(--slds-g-color-on-surface-1); } .slds-sub-tabs__item.slds-has-success { color: var(--slds-g-color-on-success-1); } .slds-sub-tabs__item.slds-has-success .slds-button__icon, .slds-sub-tabs__item.slds-has-success .slds-icon { fill: var(--slds-g-color-on-success-1); } .slds-sub-tabs__item.slds-has-success::before { animation-duration: 1s; animation-iteration-count: 3; animation-timing-function: linear; background-color: var(--slds-g-color-success-container-1); inset-block-end: 0; content: ' '; inset-inline-start: 0; position: absolute; inset-inline-end: 0; inset-block-start: 0; transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); animation-name: success-pulse; } .slds-sub-tabs__item.slds-has-success:hover::before { background-color: var(--slds-g-color-success-container-2); } .slds-sub-tabs__item.slds-has-success .slds-indicator_unread, .slds-sub-tabs__item.slds-has-success .slds-indicator--unread { background-color: currentColor; } .slds-sub-tabs__item.slds-has-success .slds-indicator_unsaved, .slds-sub-tabs__item.slds-has-success .slds-indicator--unsaved { color: currentColor; } .slds-sub-tabs__item.slds-has-error { color: var(--slds-g-color-on-error-1); } .slds-sub-tabs__item.slds-has-error .slds-button__icon, .slds-sub-tabs__item.slds-has-error .slds-icon { fill: var(--slds-g-color-on-error-1); } .slds-sub-tabs__item.slds-has-error::before { animation-duration: 1s; animation-iteration-count: 3; animation-timing-function: linear; background-color: var(--slds-g-color-error-container-1); inset-block-end: 0; content: ' '; inset-inline-start: 0; position: absolute; inset-inline-end: 0; inset-block-start: 0; transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); animation-name: error-pulse; } .slds-sub-tabs__item.slds-has-error:hover::before { background-color: var(--slds-g-color-error-container-2); } .slds-sub-tabs__item.slds-has-error .slds-indicator_unread, .slds-sub-tabs__item.slds-has-error .slds-indicator--unread { background-color: currentColor; } .slds-sub-tabs__item.slds-has-error .slds-indicator_unsaved, .slds-sub-tabs__item.slds-has-error .slds-indicator--unsaved { color: currentColor; } .slds-sub-tabs__item.slds-has-warning { color: var(--slds-g-color-on-warning-1); } .slds-sub-tabs__item.slds-has-warning .slds-button__icon, .slds-sub-tabs__item.slds-has-warning .slds-icon { fill: var(--slds-g-color-on-warning-1); } .slds-sub-tabs__item.slds-has-warning::before { animation-duration: 1s; animation-iteration-count: 3; animation-timing-function: linear; background-color: var(--slds-g-color-warning-container-1); inset-block-end: 0; content: ' '; inset-inline-start: 0; position: absolute; inset-inline-end: 0; inset-block-start: 0; transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); animation-name: warning-pulse; } .slds-sub-tabs__item.slds-has-warning:hover::before { background-color: var(--slds-g-color-warning-base-80); } .slds-sub-tabs__item.slds-has-warning .slds-indicator_unread, .slds-sub-tabs__item.slds-has-warning .slds-indicator--unread { background-color: currentColor; } .slds-sub-tabs__item.slds-has-warning .slds-indicator_unsaved, .slds-sub-tabs__item.slds-has-warning .slds-indicator--unsaved { color: currentColor; } .slds-sub-tabs__item.slds-has-warning:has(.slds-tabs_default__link:focus-visible)::before, .slds-sub-tabs__item.slds-has-warning:has(.slds-tabs--default__link:focus-visible)::before, .slds-sub-tabs__item.slds-has-error:has(.slds-tabs_default__link:focus-visible)::before, .slds-sub-tabs__item.slds-has-error:has(.slds-tabs--default__link:focus-visible)::before, .slds-sub-tabs__item.slds-has-success:has(.slds-tabs_default__link:focus-visible)::before, .slds-sub-tabs__item.slds-has-success:has(.slds-tabs--default__link:focus-visible)::before { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); } .slds-sub-tabs__item:has(.slds-tabs_default__link:focus-visible), .slds-sub-tabs__item:has(.slds-tabs--default__link:focus-visible) { outline: 2px solid var(--slds-s-link-outline-color); outline-offset: -6px; } .slds-has-pinned-regions .slds-sub-tabs__item.slds-active::before, .slds-has-pinned-regions .slds-sub-tabs__item.slds-is-open::before { content: ''; height: 3px; display: block; background: var(--slds-g-color-accent-2); position: absolute; inset-block-start: 0; inset-inline-start: -1px; inset-inline-end: -1px; } .slds-tab__scroll-controls { display: none; } .slds-tabs-mobile__container { position: relative; overflow: hidden; } .slds-panel__body .slds-tabs-mobile:first-child { margin-block-start: calc(var(--slds-g-spacing-3) * -1); } .slds-panel__body .slds-tabs-mobile:first-child .slds-tabs-mobile__item:first-child { border-block-start: 0; } .slds-panel__body .slds-tabs-mobile { margin-inline-start: calc(var(--slds-g-spacing-3) * -1); margin-inline-end: calc(var(--slds-g-spacing-3) * -1); } .slds-tabs-mobile { display: flex; flex-direction: column; background-color: var(--slds-g-color-surface-container-1); } .slds-tabs-mobile__item { display: flex; border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4)); align-items: stretch; color: var(--slds-g-color-on-surface-3); font-size: var(--slds-g-font-scale-2); padding: 0 var(--slds-g-spacing-3); } .slds-tabs-mobile__item:active { background-color: var(--slds-g-color-surface-container-2); } .slds-tabs-mobile__item:last-child { border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-tabs-mobile__group .slds-tabs-mobile__container + .slds-tabs-mobile__container .slds-tabs-mobile__item:first-child { border-block-start: 0; } .slds-navigation-list-vertical .slds-is-active, .slds-navigation-list--vertical .slds-is-active, .slds-navigation-list_vertical .slds-is-active, .slds-navigation-list--vertical .slds-is-active { color: var(--slds-s-navigation-color, var(--slds-g-color-on-surface-3)); } .slds-navigation-list-vertical__action, .slds-navigation-list--vertical__action, .slds-navigation-list_vertical__action, .slds-navigation-list--vertical__action { display: block; border-inline-start: var(--slds-g-sizing-border-4) solid transparent; border-top: var(--slds-g-sizing-border-1) solid transparent; border-bottom: var(--slds-g-sizing-border-1) solid transparent; padding: var(--slds-g-spacing-2) var(--slds-g-spacing-5); } .slds-navigation-list-vertical__action:active, .slds-navigation-list--vertical__action:active, .slds-navigation-list_vertical__action:active, .slds-navigation-list--vertical__action:active { background-color: var(--slds-g-color-surface-container-2); } .slds-navigation-list-vertical__action:hover, .slds-navigation-list--vertical__action:hover, .slds-navigation-list_vertical__action:hover, .slds-navigation-list--vertical__action:hover { outline: 0; background-color: color-mix(in srgb, var(--slds-g-color-accent-1) 10%, transparent); border-inline-start: var(--slds-g-sizing-border-2) solid var(--slds-g-color-accent-1); } .slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list_vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list_vertical .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action { background-color: rgba(21, 137, 238, 0.1); border-inline-start-color: var(--slds-g-color-accent-1); font-weight: var(--slds-s-navigation-font-weight); color: var(--slds-s-navigation-color-active); } .slds-navigation-list-vertical_shade .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list_vertical-inverse .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical_shade .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list_vertical-inverse .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list--vertical__action { background-color: var(--slds-g-color-surface-container-1); font-weight: var(--slds-s-navigation-font-weight); color: var(--slds-s-navigation-color-active); } .slds-navigation-list-vertical_shade .slds-navigation-list-vertical__action:hover, .slds-navigation-list-vertical--shade .slds-navigation-list-vertical__action:hover, .slds-navigation-list-vertical--shade .slds-navigation-list-vertical__action:hover, .slds-navigation-list_vertical-inverse .slds-navigation-list-vertical__action:hover, .slds-navigation-list--vertical-inverse .slds-navigation-list-vertical__action:hover, .slds-navigation-list--vertical-inverse .slds-navigation-list-vertical__action:hover, .slds-navigation-list-vertical_shade .slds-navigation-list--vertical__action:hover, .slds-navigation-list-vertical--shade .slds-navigation-list--vertical__action:hover, .slds-navigation-list-vertical--shade .slds-navigation-list--vertical__action:hover, .slds-navigation-list_vertical-inverse .slds-navigation-list--vertical__action:hover, .slds-navigation-list--vertical-inverse .slds-navigation-list--vertical__action:hover, .slds-navigation-list--vertical-inverse .slds-navigation-list--vertical__action:hover { background-color: var(--slds-g-color-surface-container-1); } .slds-nav-vertical__action_overflow, .slds-nav-vertical__action--overflow { color: var(--slds-g-color-on-surface-1); } .slds-nav-vertical__action_overflow[aria-expanded='true'] .slds-button__icon, .slds-nav-vertical__action--overflow[aria-expanded='true'] .slds-button__icon { transform: rotate(90deg); } [dir='rtl'] .slds-nav-vertical__action_overflow[aria-expanded='true'] .slds-button__icon, [dir='rtl'] .slds-nav-vertical__action--overflow[aria-expanded='true'] .slds-button__icon { transform: rotate(-90deg); } .slds-nav-vertical__action-text { color: var(--slds-s-link-color, var(--slds-g-color-accent-2)); } .slds-nav-vertical__action-text:hover { color: var(--slds-s-link-color-hover); } .slds-nav-vertical { position: relative; } .slds-nav-vertical_compact .slds-nav-vertical__title, .slds-nav-vertical--compact .slds-nav-vertical__title, .slds-nav-vertical_compact .slds-nav-vertical__action, .slds-nav-vertical--compact .slds-nav-vertical__action { padding-block-start: var(--slds-g-spacing-1); padding-inline-end: var(--slds-g-spacing-5); padding-block-end: var(--slds-g-spacing-1); padding-inline-start: var(--slds-g-spacing-5); } .slds-nav-vertical_shade .slds-is-active.slds-nav-vertical__item::before, .slds-nav-vertical--shade .slds-is-active.slds-nav-vertical__item::before { background: var(--slds-g-color-surface-container-1); } .slds-nav-vertical_shade .slds-nav-vertical__item:hover::before, .slds-nav-vertical--shade .slds-nav-vertical__item:hover::before { background: var(--slds-g-color-surface-container-1); } .slds-nav-vertical_shade .slds-is-active .slds-nav-vertical__action, .slds-nav-vertical--shade .slds-is-active .slds-nav-vertical__action { border-color: var(--slds-g-color-neutral-base-90); } .slds-nav-vertical__title { padding-block-start: var(--slds-g-spacing-2); padding-inline-end: var(--slds-g-spacing-4); padding-block-end: var(--slds-g-spacing-2); padding-inline-start: var(--slds-g-spacing-5); font-size: var(--slds-g-font-size-base); font-weight: var(--slds-g-font-weight-7); } .slds-nav-vertical__title:not(:first-of-type) { margin-block-start: var(--slds-g-spacing-2); } .slds-nav-vertical__section:not(:first-of-type) { margin-block-start: var(--slds-g-spacing-2); } .slds-nav-vertical__item { position: relative; display: block; list-style: none; } .slds-nav-vertical__item::before { position: absolute; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; content: ''; } .slds-nav-vertical__item:hover::before, .slds-nav-vertical__item.slds-is-active::before { background: color-mix(in srgb, var(--slds-g-color-accent-1) 10%, transparent); } .slds-nav-vertical__item:has(:focus-visible)::before, .slds-nav-vertical__action_overflow:focus-visible, .slds-nav-vertical__action--overflow:focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); } .slds-nav-vertical__action { position: relative; display: flex; align-items: center; width: 100%; padding-block-start: var(--slds-g-spacing-2); padding-inline-end: var(--slds-g-spacing-5); padding-block-end: var(--slds-g-spacing-2); padding-inline-start: var(--slds-g-spacing-6); color: var(--slds-s-navigation-color, var(--slds-g-color-on-surface-3)); border-block-start: var(--slds-g-sizing-border-1) solid transparent; border-block-end: var(--slds-g-sizing-border-1) solid transparent; border-radius: 0; box-shadow: inset 0 0 0 var(--slds-g-color-accent-1); cursor: pointer; } .slds-nav-vertical__action:active, .slds-nav-vertical__action:hover, .slds-nav-vertical__action:focus { color: currentcolor; } .slds-nav-vertical__action:hover { text-decoration: none; box-shadow: inset 2px 0 0 var(--slds-g-color-accent-1); color: var(--slds-s-navigation-color-hover); } [dir='rtl'] .slds-nav-vertical__action:hover { box-shadow: inset -2px 0 0 var(--slds-g-color-accent-1); } .slds-nav-vertical__action:focus-visible { outline: 0; text-decoration: underline; } .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action { font-weight: var(--slds-s-navigation-font-weight); box-shadow: inset 4px 0 0 var(--slds-g-color-accent-1); color: var(--slds-s-navigation-color-active); } [dir='rtl'] .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action { box-shadow: inset -4px 0 0 var(--slds-g-color-accent-1); } .slds-nav-vertical__item [type='radio'] { width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; } .slds-nav-vertical__item [type='radio']:focus + .slds-nav-vertical__action, .slds-nav-vertical__item [type='radio']:focus + .slds-nav-vertical__action .slds-nav-vertical_radio-faux, .slds-nav-vertical__item [type='radio']:focus + .slds-nav-vertical__action .slds-nav-vertical--radio-faux { text-decoration: underline; } .slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action { font-weight: var(--slds-g-font-weight-7); background-color: color-mix(in srgb, var(--slds-g-color-accent-1) 10%, transparent); box-shadow: inset 4px 0 0 var(--slds-g-color-accent-1); } .slds-nav-vertical_shade .slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action, .slds-nav-vertical--shade .slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action { border-color: var(--slds-g-color-neutral-base-90); background-color: var(--slds-g-color-on-surface-inverse-1); } .slds-notify_alert, .slds-notify--alert { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; padding-block-start: var(--slds-c-alert-spacing-blockstart, var(--slds-g-spacing-2)); padding-inline-end: var(--slds-c-alert-spacing-inlineend, var(--slds-g-spacing-6)); padding-block-end: var(--slds-c-alert-spacing-blockend, var(--slds-g-spacing-2)); padding-inline-start: var(--slds-c-alert-spacing-inlinestart, var(--slds-g-spacing-2)); color: var(--slds-c-alert-text-color, var(--slds-g-color-on-info-1)); font-weight: var(--slds-c-alert-font-weight); text-align: center; background-color: var(--slds-c-alert-color-background, var(--slds-g-color-info-container-1)); } .slds-notify_alert .slds-icon, .slds-notify--alert .slds-icon, .slds-notify_alert .slds-button__icon, .slds-notify--alert .slds-button__icon { fill: currentColor; } .slds-notify_alert .slds-button_icon, .slds-notify--alert .slds-button--icon { color: currentColor; } .slds-notify_alert .slds-button_icon:hover, .slds-notify--alert .slds-button--icon:hover, .slds-notify_alert .slds-button_icon:focus-visible, .slds-notify--alert .slds-button--icon:focus-visible { color: var(--slds-s-alert-close-button-hover, color-mix(in oklab, currentColor, transparent 25%)); } .slds-notify_alert a, .slds-notify--alert a { color: currentColor; border: var(--slds-g-sizing-border-1) solid transparent; border-radius: var(--slds-g-radius-border-2); text-decoration: underline; } .slds-notify_alert a:hover, .slds-notify--alert a:hover, .slds-notify_alert a:focus:not(:focus-visible), .slds-notify--alert a:focus:not(:focus-visible) { text-decoration: none; outline: 0; } .slds-notify_alert a:focus-visible, .slds-notify--alert a:focus-visible { outline-offset: 2px; } .slds-notify_alert a:active, .slds-notify--alert a:active { color: var(--slds-c-alert-text-color-active, color-mix(in oklab, currentColor, transparent 50%)); } .slds-notify_alert a[disabled], .slds-notify--alert a[disabled] { color: color-mix(in oklab, currentColor, transparent 90%); } .slds-alert_warning, .slds-alert--warning { --slds-c-alert-color-background: var(--slds-g-color-warning-container-1); --slds-c-alert-text-color: var(--slds-g-color-on-warning-1); } .slds-alert_error, .slds-alert--error { --slds-c-alert-color-background: var(--slds-g-color-error-container-1); --slds-c-alert-text-color: var(--slds-g-color-on-error-1); } .slds-alert_offline, .slds-alert--offline { --slds-c-alert-color-background: var(--slds-g-color-neutral-base-50); --slds-c-alert-text-color: var(--slds-g-color-neutral-base-100); } .slds-notify__close { position: absolute; inset-inline-end: var(--slds-g-spacing-3); margin-inline-start: var(--slds-g-spacing-1); top: 50%; transform: translateY(-50%); } .slds-modal_prompt .slds-modal__header, .slds-modal--prompt .slds-modal__header { border-block-end: 0; text-align: var(--slds-s-container-heading-font-align, center); font-size: var(--slds-s-container-heading-font-size); font-weight: var(--slds-s-container-heading-font-weight); } .slds-modal_prompt .slds-modal__content, .slds-modal--prompt .slds-modal__content { padding-inline-start: var(--slds-g-spacing-6); padding-inline-end: var(--slds-g-spacing-6); } .slds-modal_prompt .slds-modal__footer, .slds-modal--prompt .slds-modal__footer { border-block-start-width: var(--slds-s-container-footer-sizing-border, 0); text-align: var(--slds-s-container-footer-font-align, center); } .slds-notify_container, .slds-notify--container { position: fixed; width: 100%; inset-inline-start: 0; inset-block-start: 0; z-index: 1000; text-align: center; } .slds-notify_toast, .slds-notify--toast { display: inline-flex; align-items: center; position: relative; background: none; background-color: var(--slds-c-toast-color-background, var(--slds-g-color-on-surface-1)); color: var(--slds-c-toast-text-color); border-radius: var(--slds-c-toast-radius-border, var(--slds-g-radius-border-2)); margin: var(--slds-g-spacing-2); padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--slds-g-spacing-3)); padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--slds-g-spacing-8)); padding-block-end: var(--slds-c-toast-spacing-blockend, var(--slds-g-spacing-3)); padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--slds-g-spacing-5)); min-width: var(--slds-c-toast-sizing-width-min, var(--slds-g-sizing-16)); text-align: left; justify-content: flex-start; box-shadow: var(--slds-g-shadow-3); max-width: 50%; } .slds-notify_toast .slds-notify__content .slds-text-heading_small, .slds-notify--toast .slds-notify__content .slds-text-heading--small { font-weight: var(--slds-s-alert-font-weight); } .slds-notify_toast .slds-notify__content a:focus-visible, .slds-notify--toast .slds-notify__content a:focus-visible { border-radius: var(--slds-g-radius-border-1); outline-offset: 2px; } .slds-notify_toast .slds-notify__close, .slds-notify--toast .slds-notify__close { float: inline-end; position: absolute; top: var(--slds-g-spacing-3); inset-inline-end: var(--slds-g-spacing-3); margin-inline-start: var(--slds-g-spacing-1); transform: translateY(var(--slds-g-sizing-1) * -1); } .slds-notify_toast .slds-button_icon, .slds-notify--toast .slds-button--icon { color: currentColor; } .slds-notify_toast .slds-button_icon:hover, .slds-notify--toast .slds-button--icon:hover, .slds-notify_toast .slds-button_icon:focus-visible, .slds-notify--toast .slds-button--icon:focus-visible { color: var(--slds-s-alert-close-button-hover, color-mix(in oklab, currentColor, transparent 25%)); } .slds-region_narrow .slds-notify_toast, .slds-region--narrow .slds-notify--toast { min-width: auto; width: 100%; margin-inline-start: 0; max-width: max-content; } .slds-scoped-notification { padding: var(--slds-g-spacing-3); border-radius: var(--slds-g-radius-border-2); font-weight: var(--slds-s-alert-font-weight); } .slds-scoped-notification .slds-icon_container, .slds-scoped-notification .slds-icon--container { display: flex; } .slds-scoped-notification a:focus-visible { border-radius: var(--slds-g-radius-border-1); } .slds-scoped-notification.slds-theme_warning a:focus, .slds-scoped-notification.slds-theme--warning a:focus { border: 0; } .slds-scoped-notification_light, .slds-scoped-notification--light { background-color: var(--slds-g-color-surface-container-3); color: var(--slds-g-color-on-surface-1); } .slds-scoped-notification_light a, .slds-scoped-notification--light a { color: var(--slds-g-color-on-surface-1); text-decoration: underline; } .slds-scoped-notification_light a:link, .slds-scoped-notification--light a:link, .slds-scoped-notification_light a:visited, .slds-scoped-notification--light a:visited { color: var(--slds-g-color-on-surface-1); } .slds-scoped-notification_light a:hover, .slds-scoped-notification--light a:hover, .slds-scoped-notification_light a:focus, .slds-scoped-notification--light a:focus { text-decoration: none; } .slds-scoped-notification_dark, .slds-scoped-notification--dark { background-color: var(--slds-g-color-neutral-base-50); color: var(--slds-g-color-neutral-base-100); } .slds-scoped-notification_dark a, .slds-scoped-notification--dark a { color: var(--slds-g-color-neutral-base-100); text-decoration: underline; } .slds-scoped-notification_dark a:hover, .slds-scoped-notification--dark a:hover, .slds-scoped-notification_dark a:active, .slds-scoped-notification--dark a:active { text-decoration: none; } .slds-notification-container { position: fixed; display: block; width: var(--slds-g-sizing-15); inset-inline-end: var(--slds-g-spacing-1); inset-block-start: var(--slds-g-spacing-1); padding-inline: var(--slds-g-spacing-1); padding-block-start: var(--slds-g-spacing-1); padding-block-end: var(--slds-g-spacing-2); z-index: 8500; } .slds-notification { position: relative; width: var(--slds-g-sizing-15); border: var(--slds-s-container-sizing-border, 1px) solid var(--slds-s-container-color-border); border-radius: var(--slds-g-radius-border-2); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.09), 0 3px 3px 0 rgba(0, 0, 0, 0.09), 0 -1px 1px 0 rgba(0, 0, 0, 0.04); transition-duration: 0.4s; transition-timing-function: ease-in-out; transition-property: margin, max-height, opacity, top; } .slds-notification .slds-media__body { opacity: 1; transition-property: opacity; transition-duration: 0.4s; transition-timing-function: ease-in-out; padding-inline-end: var(--slds-g-spacing-5); } .slds-notification + .slds-notification { margin-block-start: var(--slds-g-spacing-3); } .slds-notification:nth-of-type(1) { z-index: calc(5 - 1); } .slds-notification:nth-of-type(2) { z-index: calc(5 - 2); } .slds-notification:nth-of-type(3) { z-index: calc(5 - 3); } .slds-notification:nth-of-type(4) { z-index: calc(5 - 4); } .slds-notification:nth-of-type(n + 3) { overflow: hidden; } .slds-notification:nth-of-type(n + 4) { margin-block-start: 0; transform: scaleX(0.95) translateY(-90%); } .slds-notification:nth-of-type(n + 4) .slds-media__body, .slds-notification:nth-of-type(n + 5) { opacity: 0; } .slds-notification:nth-of-type(n + 6) { display: none; } .slds-notification__target { padding: var(--slds-g-spacing-3); border-radius: var(--slds-g-radius-border-2); background-color: var(--slds-g-color-surface-container-2); color: var(--slds-g-color-on-surface-2); } .slds-notification__target:hover, .slds-notification__target:focus { background-color: var(--slds-g-color-surface-container-1); text-decoration: none; color: var(--slds-g-color-on-surface-2); } .slds-notification__target:focus-visible { box-shadow: var(--slds-g-shadow-inset-focus-1); outline: 0; } .slds-notification__footer { padding-inline: var(--slds-g-spacing-3); padding-block-start: var(--slds-g-spacing-3); padding-block-end: var(--slds-g-spacing-4); } .slds-notification__close { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; } .slds-notification__close .slds-button_icon, .slds-notification__close .slds-button--icon { color: var(--slds-g-color-on-surface-3); } .slds-trial-header { color: var(--slds-g-color-surface-1); height: var(--slds-s-header-sizing-height, 3.125rem); background: var(--slds-g-color-surface-inverse-2); padding-block: 0; padding-inline: var(--slds-g-spacing-4); align-items: center; } .slds-trial-header .slds-dropdown__item .slds-icon { fill: currentColor; } .slds-trial-header .slds-button_inverse, .slds-trial-header .slds-button--inverse { border: 0; } .slds-trial-header .slds-dropdown { margin-block-start: var(--slds-g-spacing-4); } .slds-trial-header .slds-dropdown_inverse .slds-dropdown__item > a:hover, .slds-trial-header .slds-dropdown--inverse .slds-dropdown__item > a:hover, .slds-trial-header .slds-dropdown_inverse .slds-dropdown__item > a:focus, .slds-trial-header .slds-dropdown--inverse .slds-dropdown__item > a:focus { color: var(--slds-g-color-accent-3); background-color: var(--slds-g-color-surface-container-2); border-color: var(--slds-g-color-border-inverse-1); } .slds-trial-header .slds-button_success:focus-visible, .slds-trial-header .slds-button--success:focus-visible { color: var(--slds-g-color-on-success-1); } .slds-lookup { position: relative; width: 100%; } .slds-lookup mark { font-weight: var(--slds-g-font-weight-7); background-color: transparent; color: inherit; } .slds-lookup.slds-is-open .slds-lookup__menu { display: block; } .slds-lookup.slds-has-selection .slds-input, .slds-lookup.slds-has-selection .slds-input__icon, .slds-lookup.slds-has-selection .slds-lookup__search-input { display: none; } .slds-lookup.slds-has-selection .slds-pill { display: flex; } .slds-lookup.slds-has-selection .slds-pill__remove { margin-left: auto; } .slds-lookup__list { max-height: calc( ( ( (var(--slds-g-font-lineheight-base) * var(--slds-g-font-size-base)) + (var(--slds-g-font-lineheight-base) * var(--slds-g-font-scale-neg-1)) - var(--slds-g-spacing-1) ) + (var(--slds-g-spacing-1) * 2) ) * 8 ); overflow-y: auto; } .slds-lookup__menu { background: var(--slds-g-color-surface-container-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); z-index: 7000; position: absolute; width: 100%; padding: var(--slds-g-spacing-2) 0; margin-block-start: calc(var(--slds-g-spacing-1) / 2); display: none; } .slds-lookup__item > a, .slds-lookup__item > span, .slds-lookup__item > button { display: block; padding: var(--slds-g-spacing-2); color: var(--slds-g-color-on-surface-3); text-align: left; width: 100%; line-height: var(--slds-g-font-lineheight-base); border-radius: 0; } .slds-lookup__item > a:hover, .slds-lookup__item > a:focus, .slds-lookup__item > span:hover, .slds-lookup__item > span:focus, .slds-lookup__item > button:hover, .slds-lookup__item > button:focus { outline: 0; background-color: var(--slds-g-color-surface-container-2); color: var(--slds-g-color-on-surface-3); text-decoration: none; } .slds-lookup__item > a .slds-icon, .slds-lookup__item > span .slds-icon, .slds-lookup__item > button .slds-icon { margin-right: var(--slds-g-spacing-2); } .slds-lookup__item_label, .slds-lookup__item--label { font-size: var(--slds-g-font-scale-1); font-weight: var(--slds-g-font-weight-7); display: flex; align-items: center; padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4); } .slds-lookup__item-action { font-size: var(--slds-g-font-size-base); display: flex; align-items: center; padding: var(--slds-g-spacing-1) var(--slds-g-spacing-4); color: var(--slds-g-color-on-surface-3); text-align: left; width: 100%; line-height: var(--slds-g-font-lineheight-base); border-radius: 0; } .slds-lookup__item-action:hover, .slds-lookup__item-action:focus, .slds-lookup__item-action.slds-has-focus { outline: 0; cursor: pointer; background-color: var(--slds-s-menu-item-color-background-active, var(--slds-g-color-surface-container-2)); color: var(--slds-g-color-on-surface-3); text-decoration: none; } .slds-lookup__item-action:focus-visible, .slds-lookup__item-action.slds-has-focus { box-shadow: var(--slds-g-shadow-inset-focus-1); outline: 0; border-radius: 6px; } .slds-lookup__item-action .slds-media__figure { margin-inline-end: var(--slds-g-spacing-2); margin-block-start: var(--slds-g-spacing-1); } .slds-lookup__item-action_label, .slds-lookup__item-action--label { padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4); } .slds-lookup__item-action_label > .slds-icon, .slds-lookup__item-action--label > .slds-icon { margin-inline-start: var(--slds-g-spacing-1); margin-inline-end: var(--slds-g-spacing-3); } .slds-lookup__search-input { width: 100%; } .slds-lookup__result-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-block-end: 0.125rem; } .slds-lookup__result-meta { display: block; margin-top: calc(var(--slds-g-spacing-1) * -1); color: var(--slds-g-color-on-surface-3); } .slds-lookup__pill-container { padding: 0 var(--slds-g-spacing-2) var(--slds-g-spacing-1); } .slds-avatar { --_slds-c-avatar-group-image-small: var(--lwc-groupDefaultAvatarSmall, url('/group_avatar_96.png')); --_slds-c-avatar-group-image-medium: var(--lwc-groupDefaultAvatarMedium, url('/group_avatar_160.png')); --_slds-c-avatar-group-image-large: var(--lwc-groupDefaultAvatarLarge, url('/public/group_avatar_200.png')); --_slds-c-avatar-user-image-small: var(--lwc-userDefaultAvatarSmall, url('/profile_avatar_96.png')); --_slds-c-avatar-user-image-medium: var(--lwc-userDefaultAvatarMedium, url('/profile_avatar_160.png')); --_slds-c-avatar-user-image-large: var(--lwc-userDefaultAvatarLarge, url('/profile_avatar_200.png')); --slds-c-icon-color-background: var(--_slds-c-avatar-color-background); width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); overflow: hidden; display: inline-block; vertical-align: middle; border-radius: var(--slds-c-avatar-radius-border, var(--slds-s-avatar-radius-border, var(--slds-g-radius-border-2))); line-height: var(--slds-g-font-lineheight-1); font-size: var(--slds-g-font-scale-1); } .slds-avatar:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); outline: 0; } .slds-avatar_group-image-small, .slds-avatar--group-image-small { background: var(--_slds-c-avatar-group-image-small) top left / cover no-repeat; } .slds-avatar_group-image-medium, .slds-avatar--group-image-medium { background: var(--_slds-c-avatar-group-image-medium) top left / cover no-repeat; } .slds-avatar_group-image-large, .slds-avatar--group-image-large { background: var(--_slds-c-avatar-group-image-large) top left / cover no-repeat; } .slds-avatar_profile-image-small, .slds-avatar--profile-image-small { background: var(--_slds-c-avatar-user-image-small) top left / cover no-repeat; } .slds-avatar_profile-image-medium, .slds-avatar--profile-image-medium { background: var(--_slds-c-avatar-user-image-medium) top left / cover no-repeat; } .slds-avatar_profile-image-large, .slds-avatar--profile-image-large { background: var(--_slds-c-avatar-user-image-large) top left / cover no-repeat; } .slds-avatar_x-small, .slds-avatar--x-small { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); font-size: var(--slds-g-font-scale-neg-2); --slds-c-avatar-radius-border: var(--slds-s-avatar-radius-border, var(--slds-g-radius-border-1)); --_slds-c-icon-sizing: var(--slds-g-sizing-6); } .slds-avatar_small, .slds-avatar--small { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); font-size: var(--slds-g-font-scale-neg-2); --slds-c-avatar-radius-border: var(--slds-s-avatar-radius-border, var(--slds-g-radius-border-1)); --_slds-c-icon-sizing: var(--slds-g-sizing-7); } .slds-avatar_medium, .slds-avatar--medium { width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); font-size: var(--slds-g-font-scale-1); --_slds-c-icon-sizing: var(--slds-g-sizing-9); } .slds-avatar_large, .slds-avatar--large { width: var(--slds-g-sizing-10); height: var(--slds-g-sizing-10); font-size: var(--slds-g-font-scale-3); line-height: var(--slds-g-font-lineheight-2); --_slds-c-icon-sizing: var(--slds-g-sizing-10); } .slds-avatar_circle, .slds-avatar--circle { border-radius: var(--slds-g-radius-border-circle); } .slds-avatar_empty, .slds-avatar--empty { border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-border-1); } .slds-avatar__initials { display: flex; justify-content: center; align-content: center; align-items: center; margin: auto; color: var(--slds-c-avatar-text-color, var(--slds-g-color-on-accent-1)); height: 100%; text-shadow: 0 0 1px rgba(0, 0, 0, 80%); background-color: var(--_slds-c-avatar-color-background, var(--slds-g-color-accent-container-1)); } .slds-avatar__initials[title] { cursor: default; text-decoration: none; } .slds-avatar__initials_inverse, .slds-avatar__initials--inverse { --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--slds-g-color-on-surface-1)); background-color: var(--slds-g-color-surface-container-2); text-shadow: none; } .slds-avatar-group { width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); position: relative; display: inline-block; } .slds-avatar-grouped { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-accent-1); line-height: 0; border-radius: var(--slds-s-avatar-radius-border, var(--slds-g-radius-border-circle)); background-color: var(--slds-g-color-accent-container-1); } .slds-avatar-grouped_inverse, .slds-avatar-grouped--inverse { background-color: var(--slds-g-color-surface-container-2); } .slds-avatar-grouped__primary { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); position: absolute; inset-inline-start: 0; inset-block-end: 0; z-index: 1; } .slds-avatar-grouped__primary .slds-avatar-grouped__initials { transform: scale(0.5); } .slds-avatar-grouped__secondary { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); position: absolute; inset-block-start: 0; inset-inline-end: 0; } .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { transform: scale(0.4); } .slds-avatar-grouped__icon { height: 100%; line-height: 0; } .slds-avatar-grouped__icon .slds-icon { width: 100%; height: 100%; } .slds-avatar-group_x-small, .slds-avatar-group--x-small { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); } .slds-avatar-group_x-small .slds-avatar-grouped__primary, .slds-avatar-group--x-small .slds-avatar-grouped__primary { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); } .slds-avatar-group_x-small .slds-avatar-grouped__primary .slds-avatar-grouped__initials, .slds-avatar-group--x-small .slds-avatar-grouped__primary .slds-avatar-grouped__initials { transform: scale(0.3); } .slds-avatar-group_x-small .slds-avatar-grouped__secondary, .slds-avatar-group--x-small .slds-avatar-grouped__secondary { width: var(--slds-g-sizing-4); height: var(--slds-g-sizing-4); } .slds-avatar-group_x-small .slds-avatar-grouped__secondary .slds-avatar-grouped__initials, .slds-avatar-group--x-small .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { transform: scale(0.18); } .slds-avatar-group_small, .slds-avatar-group--small { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); } .slds-avatar-group_small .slds-avatar-grouped__primary, .slds-avatar-group--small .slds-avatar-grouped__primary { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); } .slds-avatar-group_small .slds-avatar-grouped__primary .slds-avatar-grouped__initials, .slds-avatar-group--small .slds-avatar-grouped__primary .slds-avatar-grouped__initials { transform: scale(0.4); } .slds-avatar-group_small .slds-avatar-grouped__secondary, .slds-avatar-group--small .slds-avatar-grouped__secondary { width: var(--slds-g-sizing-5); height: var(--slds-g-sizing-5); } .slds-avatar-group_small .slds-avatar-grouped__secondary .slds-avatar-grouped__initials, .slds-avatar-group--small .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { transform: scale(0.3); } .slds-avatar-group_medium, .slds-avatar-group--medium { width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); } .slds-avatar-group_medium .slds-avatar-grouped__primary, .slds-avatar-group--medium .slds-avatar-grouped__primary { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); } .slds-avatar-group_medium .slds-avatar-grouped__primary .slds-avatar-grouped__initials, .slds-avatar-group--medium .slds-avatar-grouped__primary .slds-avatar-grouped__initials { transform: scale(0.5); } .slds-avatar-group_medium .slds-avatar-grouped__secondary, .slds-avatar-group--medium .slds-avatar-grouped__secondary { width: var(--slds-g-sizing-6); height: var(--slds-g-sizing-6); } .slds-avatar-group_medium .slds-avatar-grouped__secondary .slds-avatar-grouped__initials, .slds-avatar-group--medium .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { transform: scale(0.4); } .slds-avatar-group_large, .slds-avatar-group--large { width: var(--slds-g-sizing-10); height: var(--slds-g-sizing-10); } .slds-avatar-group_large .slds-avatar-grouped__primary, .slds-avatar-group--large .slds-avatar-grouped__primary { width: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3)); height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3)); } .slds-avatar-group_large .slds-avatar-grouped__primary .slds-avatar-grouped__initials, .slds-avatar-group--large .slds-avatar-grouped__primary .slds-avatar-grouped__initials { transform: scale(0.8); } .slds-avatar-group_large .slds-avatar-grouped__secondary, .slds-avatar-group--large .slds-avatar-grouped__secondary { width: var(--slds-g-sizing-7); height: var(--slds-g-sizing-7); } .slds-avatar-group_large .slds-avatar-grouped__secondary .slds-avatar-grouped__initials, .slds-avatar-group--large .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { transform: scale(0.5); } .slds-image, .slds-file { display: block; position: relative; } .slds-image .slds-file__text, .slds-file .slds-file__text { display: block; color: var(--slds-g-color-on-surface-2); } .slds-image .slds-file__figure:hover::before, .slds-image .slds-file__figure:hover::after, .slds-image .slds-file__figure:focus::before, .slds-image .slds-file__figure:focus::after, .slds-image .slds-file__crop:hover::before, .slds-image .slds-file__crop:hover::after, .slds-image .slds-file__crop:focus::before, .slds-image .slds-file__crop:focus::after, .slds-file .slds-file__figure:hover::before, .slds-file .slds-file__figure:hover::after, .slds-file .slds-file__figure:focus::before, .slds-file .slds-file__figure:focus::after, .slds-file .slds-file__crop:hover::before, .slds-file .slds-file__crop:hover::after, .slds-file .slds-file__crop:focus::before, .slds-file .slds-file__crop:focus::after { position: absolute; z-index: 5; cursor: pointer; content: ''; } .slds-image.slds-file_loading .slds-file__figure:hover::before, .slds-image.slds-file--loading .slds-file__figure:hover::before, .slds-image.slds-file_loading .slds-file__figure:hover::after, .slds-image.slds-file--loading .slds-file__figure:hover::after, .slds-image.slds-file_loading .slds-file__figure:focus::before, .slds-image.slds-file--loading .slds-file__figure:focus::before, .slds-image.slds-file_loading .slds-file__figure:focus::after, .slds-image.slds-file--loading .slds-file__figure:focus::after, .slds-image.slds-file_loading .slds-file__crop:hover::before, .slds-image.slds-file--loading .slds-file__crop:hover::before, .slds-image.slds-file_loading .slds-file__crop:hover::after, .slds-image.slds-file--loading .slds-file__crop:hover::after, .slds-image.slds-file_loading .slds-file__crop:focus::before, .slds-image.slds-file--loading .slds-file__crop:focus::before, .slds-image.slds-file_loading .slds-file__crop:focus::after, .slds-image.slds-file--loading .slds-file__crop:focus::after, .slds-file.slds-file_loading .slds-file__figure:hover::before, .slds-file.slds-file--loading .slds-file__figure:hover::before, .slds-file.slds-file_loading .slds-file__figure:hover::after, .slds-file.slds-file--loading .slds-file__figure:hover::after, .slds-file.slds-file_loading .slds-file__figure:focus::before, .slds-file.slds-file--loading .slds-file__figure:focus::before, .slds-file.slds-file_loading .slds-file__figure:focus::after, .slds-file.slds-file--loading .slds-file__figure:focus::after, .slds-file.slds-file_loading .slds-file__crop:hover::before, .slds-file.slds-file--loading .slds-file__crop:hover::before, .slds-file.slds-file_loading .slds-file__crop:hover::after, .slds-file.slds-file--loading .slds-file__crop:hover::after, .slds-file.slds-file_loading .slds-file__crop:focus::before, .slds-file.slds-file--loading .slds-file__crop:focus::before, .slds-file.slds-file_loading .slds-file__crop:focus::after, .slds-file.slds-file--loading .slds-file__crop:focus::after { display: none; } .slds-image .slds-file__figure:hover::before, .slds-image .slds-file__figure:focus::before, .slds-image .slds-file__crop:hover::before, .slds-image .slds-file__crop:focus::before, .slds-file .slds-file__figure:hover::before, .slds-file .slds-file__figure:focus::before, .slds-file .slds-file__crop:hover::before, .slds-file .slds-file__crop:focus::before { inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; background-color: rgba(24, 24, 24, 0.5); } .slds-image .slds-file__figure:hover::after, .slds-image .slds-file__figure:focus::after, .slds-image .slds-file__crop:hover::after, .slds-image .slds-file__crop:focus::after, .slds-file .slds-file__figure:hover::after, .slds-file .slds-file__figure:focus::after, .slds-file .slds-file__crop:hover::after, .slds-file .slds-file__crop:focus::after { inset-block-start: 50%; inset-inline-start: 50%; width: var(--slds-g-sizing-9); height: var(--slds-g-sizing-9); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MiIgaGVpZ2h0PSI1MiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUxLjggMjVBMjkgMjkgMCAwIDAgMjYgOSAyOSAyOSAwIDAgMCAuMiAyNWEyIDIgMCAwIDAgMCAxLjhDNSAzNi40IDE0LjcgNDMgMjYgNDNhMjkgMjkgMCAwIDAgMjUuOC0xNiAyIDIgMCAwIDAgMC0xLjh6TTI2IDM3YTExIDExIDAgMSAxIDAtMjIgMTEgMTEgMCAxIDEgMCAyMnptMC0xOGMtNCAwLTcgMy03IDdzMyA3IDcgNyA3LTMgNy03LTMtNy03LTd6Ii8+PC9zdmc+); background-size: contain; transform: translate(-50%, -50%); } .slds-image .slds-file__figure:hover + .slds-file__title, .slds-image .slds-file__figure:focus + .slds-file__title, .slds-image .slds-file__crop:hover + .slds-file__title, .slds-image .slds-file__crop:focus + .slds-file__title, .slds-file .slds-file__figure:hover + .slds-file__title, .slds-file .slds-file__figure:focus + .slds-file__title, .slds-file .slds-file__crop:hover + .slds-file__title, .slds-file .slds-file__crop:focus + .slds-file__title { z-index: 5; } .slds-image.slds-has-title .slds-file__figure:hover::after, .slds-image.slds-has-title .slds-file__figure:focus::after, .slds-image.slds-has-title .slds-file__crop:hover::after, .slds-image.slds-has-title .slds-file__crop:focus::after, .slds-file.slds-has-title .slds-file__figure:hover::after, .slds-file.slds-has-title .slds-file__figure:focus::after, .slds-file.slds-has-title .slds-file__crop:hover::after, .slds-file.slds-has-title .slds-file__crop:focus::after { transform: translate(-50%, calc(-50% - (var(--slds-g-sizing-9) / 2))); } .slds-image:focus, .slds-file:focus { border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-accent-1); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16); } .slds-image :not(:only-child) .slds-spinner, .slds-file :not(:only-child) .slds-spinner { inset-block-start: 45%; } .slds-image .slds-file__figure_portrait img, .slds-image .slds-file__figure--portrait img, .slds-file .slds-file__figure_portrait img, .slds-file .slds-file__figure--portrait img { display: block; margin: 0 auto; max-height: var(--slds-g-sizing-14); height: auto; } @media (any-hover: none) { .slds-image .slds-file__figure:hover::before, .slds-image .slds-file__figure:hover::after, .slds-image .slds-file__figure:focus::before, .slds-image .slds-file__figure:focus::after, .slds-image .slds-file__crop:hover::before, .slds-image .slds-file__crop:hover::after, .slds-image .slds-file__crop:focus::before, .slds-image .slds-file__crop:focus::after, .slds-file .slds-file__figure:hover::before, .slds-file .slds-file__figure:hover::after, .slds-file .slds-file__figure:focus::before, .slds-file .slds-file__figure:focus::after, .slds-file .slds-file__crop:hover::before, .slds-file .slds-file__crop:hover::after, .slds-file .slds-file__crop:focus::before, .slds-file .slds-file__crop:focus::after { display: none; } } .slds-image__crop, .slds-file__crop { display: block; position: relative; overflow: hidden; padding-block-start: 56.25%; border-radius: var(--slds-g-radius-border-2); } .slds-image__crop img, .slds-file__crop img { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); max-width: 200%; } .slds-image__crop:focus-visible, .slds-file__crop:focus-visible { outline: none; box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-image__crop::after, .slds-file__crop::after { content: ''; display: block; } .slds-image__crop_1-by-1, .slds-image__crop--1-by-1, .slds-file__crop_1-by-1, .slds-file__crop--1-by-1 { padding-block-start: 100%; } .slds-image__crop_16-by-9, .slds-image__crop--16-by-9, .slds-file__crop_16-by-9, .slds-file__crop--16-by-9 { padding-block-start: 56.25%; } .slds-image__crop_4-by-3, .slds-image__crop--4-by-3, .slds-file__crop_4-by-3, .slds-file__crop--4-by-3 { padding-block-start: 75%; } .slds-image__figure, .slds-file__figure { display: block; min-width: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-9)); max-width: var(--slds-g-sizing-14); min-height: calc(var(--slds-g-sizing-10) + var(--slds-g-sizing-9)); max-height: var(--slds-g-sizing-14); } .slds-image__title, .slds-file__title { display: flex; z-index: 5; align-items: center; padding: var(--slds-g-spacing-2); overflow: hidden; } .slds-image__title .slds-media, .slds-file__title .slds-media { overflow: hidden; } .slds-image-has-actions, .slds-file-has-actions { padding-inline-end: var(--slds-g-spacing-8); } .slds-image_overlay, .slds-image--overlay, .slds-file_overlay, .slds-file--overlay { content: ''; background: rgba(24, 24, 24, 0.5); color: var(--slds-g-color-on-surface-inverse-1); position: absolute; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 1; } .slds-image_card, .slds-image--card, .slds-file_card, .slds-file--card { background: var(--slds-g-color-surface-container-1); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); } .slds-image__icon, .slds-file__icon { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); margin-block-start: calc((var(--slds-g-sizing-9) * 0.5) * -1); } .slds-image__actions-menu, .slds-file__actions-menu { position: absolute; z-index: 5; inset-block-end: var(--slds-g-spacing-2); inset-inline-end: var(--slds-g-spacing-1); } .slds-image__external-icon, .slds-file__external-icon { position: absolute; inset-block-start: var(--slds-g-spacing-7); inset-inline-start: var(--slds-g-spacing-5); } .slds-image__loading-icon, .slds-file__loading-icon { fill: var(--slds-g-color-on-disabled-1); } .slds-image_center-icon .slds-file__icon, .slds-image--center-icon .slds-file__icon, .slds-file_center-icon .slds-file__icon, .slds-file--center-icon .slds-file__icon { margin-block-start: 0; } .slds-image__title_overlay, .slds-image__title--overlay, .slds-file__title_overlay, .slds-file__title--overlay { color: var(--slds-g-color-on-surface-inverse-1); position: absolute; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; } .slds-image__title_overlay .slds-media__body, .slds-image__title--overlay .slds-media__body, .slds-file__title_overlay .slds-media__body, .slds-file__title--overlay .slds-media__body { z-index: 1; } .slds-image__title_overlay .slds-media__body .slds-file__text, .slds-image__title--overlay .slds-media__body .slds-file__text, .slds-file__title_overlay .slds-media__body .slds-file__text, .slds-file__title--overlay .slds-media__body .slds-file__text { color: var(--slds-g-color-on-surface-inverse-1); } .slds-image__title_card, .slds-image__title--card, .slds-file__title_card, .slds-file__title--card { background: var(--slds-g-color-surface-container-2); position: absolute; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; border-bottom-left-radius: var(--slds-g-radius-border-2); border-bottom-right-radius: var(--slds-g-radius-border-2); } .slds-image__title_scrim, .slds-image__title--scrim, .slds-file__title_scrim, .slds-file__title--scrim { background: linear-gradient(to bottom, transparent, rgba(24, 24, 24, 0.5)); position: absolute; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; padding: var(--slds-g-spacing-4); } .slds-table { background-color: var(--slds-g-color-surface-container-1); font-size: inherit; color: var(--slds-s-table-color); } .slds-table th, .slds-table td { padding: var(--slds-g-spacing-2); white-space: nowrap; position: relative; } .slds-table th { font-weight: var(--slds-g-font-weight-5); } .slds-table th:focus { outline: 0; } .slds-table thead th { background-color: var(--slds-s-table-header-color-background); color: var(--slds-s-table-header-color); padding: var(--slds-g-spacing-2); font-weight: var(--slds-s-table-header-font-weight); line-height: normal; } .slds-table:not(.slds-no-row-hover) tbody tr:hover, .slds-table:not(.slds-no-row-hover) tbody tr:focus { outline: 0; } .slds-table:not(.slds-no-row-hover) tbody tr:hover > td, .slds-table:not(.slds-no-row-hover) tbody tr:hover > th, .slds-table:not(.slds-no-row-hover) tbody tr:focus > td, .slds-table:not(.slds-no-row-hover) tbody tr:focus > th { background-color: var(--slds-s-table-row-color-background-selected, var(--slds-g-color-surface-container-2)); } .slds-table tbody tr.slds-is-selected > td, .slds-table tbody tr.slds-is-selected > th { background-color: var(--slds-s-table-row-color-background-selected); } .slds-table tbody tr.slds-is-selected a { color: var(--slds-g-color-accent-2); } .slds-table .slds-cell-wrap { white-space: pre-line; overflow-wrap: break-word; word-wrap: break-word; } .slds-table .slds-cell-shrink { width: 1%; } .slds-table .slds-cell-buffer_left, .slds-table .slds-cell-buffer--left { padding-inline-start: var(--slds-g-spacing-5); } .slds-table .slds-cell-buffer_right, .slds-table .slds-cell-buffer--right { padding-inline-end: var(--slds-g-spacing-5); } .slds-table tbody tr { counter-increment: row-number; } .slds-table .slds-row-number::after { content: counter(row-number); } .slds-table th:focus, .slds-table [role='gridcell']:focus { outline: 0; } .slds-table th:focus-visible, .slds-table th.slds-has-focus, .slds-table [role='gridcell']:focus-visible, .slds-table [role='gridcell'].slds-has-focus { box-shadow: var(--slds-g-shadow-insetinverse-focus-1); } .slds-table th:focus-visible:has(:focus-visible), .slds-table th.slds-has-focus:has(:focus-visible), .slds-table [role='gridcell']:focus-visible:has(:focus-visible), .slds-table [role='gridcell'].slds-has-focus:has(:focus-visible) { box-shadow: none; } .slds-table th:focus-visible.slds-cell_action-mode, .slds-table th:focus-visible.slds-cell--action-mode, .slds-table th.slds-has-focus.slds-cell_action-mode, .slds-table th.slds-has-focus.slds-cell--action-mode, .slds-table [role='gridcell']:focus-visible.slds-cell_action-mode, .slds-table [role='gridcell']:focus-visible.slds-cell--action-mode, .slds-table [role='gridcell'].slds-has-focus.slds-cell_action-mode, .slds-table [role='gridcell'].slds-has-focus.slds-cell--action-mode { border-block-end: 3px solid var(--slds-g-color-border-accent-1); } .slds-table th:active, .slds-table [role='gridcell']:active { box-shadow: none; } .slds-table .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux, .slds-table .slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux { margin-inline-end: 0; } .slds-table_cell-buffer tr > th:first-child, .slds-table--cell-buffer tr > th:first-child, .slds-table_cell-buffer tr > td:first-child, .slds-table--cell-buffer tr > td:first-child { padding-inline-start: var(--slds-g-spacing-5); } .slds-table_cell-buffer tr > th:last-child, .slds-table--cell-buffer tr > th:last-child, .slds-table_cell-buffer tr > td:last-child, .slds-table--cell-buffer tr > td:last-child { padding-inline-end: var(--slds-g-spacing-5); } .slds-table_bordered, .slds-table--bordered { border-collapse: collapse; border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-table_bordered thead > tr + tr > th, .slds-table--bordered thead > tr + tr > th { border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-table_bordered tbody td, .slds-table--bordered tbody td, .slds-table_bordered tbody th, .slds-table--bordered tbody th { border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus) { box-shadow: var(--slds-g-color-border-1) 0 calc(var(--slds-g-sizing-border-1) * -1) 0 inset, var(--slds-g-color-border-1) 0 var(--slds-g-sizing-border-1) 0 inset; } .slds-table_bordered:not(.slds-no-row-hover) tr.slds-is-selected:hover > td:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tr.slds-is-selected:hover > td:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tr.slds-is-selected:hover > th:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tr.slds-is-selected:hover > th:not(.slds-has-focus) { background-color: var(--slds-s-table-row-color-background-selected); box-shadow: var(--slds-s-table-row-color-border-selected-hover) 0 calc(var(--slds-g-sizing-border-1) * -1) 0 inset, var(--slds-s-table-row-color-border-selected-hover) 0 var(--slds-g-sizing-border-1) 0 inset; } .slds-table_col-bordered td + td, .slds-table--col-bordered td + td, .slds-table_col-bordered th + th, .slds-table--col-bordered th + th, .slds-table_col-bordered th + td, .slds-table--col-bordered th + td, .slds-table_col-bordered td + th, .slds-table--col-bordered td + th { border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-table_striped tbody tr:nth-of-type(even) > td, .slds-table--striped tbody tr:nth-of-type(even) > td, .slds-table_striped tbody tr:nth-of-type(even) > th, .slds-table--striped tbody tr:nth-of-type(even) > th { background-color: var(--slds-g-color-surface-container-2); } .slds-table_fixed-layout, .slds-table--fixed-layout { table-layout: fixed; width: 100%; white-space: nowrap; } .slds-table_fixed-layout thead, .slds-table--fixed-layout thead { background-color: var(--slds-g-color-surface-container-1); } .slds-table_fixed-layout tbody, .slds-table--fixed-layout tbody { transform: translateZ(0); } .slds-table_fixed-layout .slds-cell-shrink, .slds-table--fixed-layout .slds-cell-shrink { width: var(--slds-g-sizing-3); } .slds-table_fixed-layout .slds-cell-shrink:nth-child(n), .slds-table--fixed-layout .slds-cell-shrink:nth-child(n) { padding-inline-start: 0; padding-inline-end: 0; } .slds-table_fixed-layout .slds-cell-shrink:first-child, .slds-table--fixed-layout .slds-cell-shrink:first-child { text-align: right; padding-inline-end: var(--slds-g-spacing-2); } .slds-table_fixed-layout .slds-cell-shrink:last-child, .slds-table--fixed-layout .slds-cell-shrink:last-child { text-align: left; padding-inline-start: var(--slds-g-spacing-2); } .slds-is-sortable .slds-th__action:hover, .slds-is-sortable .slds-th__action:focus, .slds-is-sortable.slds-has-focus .slds-th__action, .slds-is-sortable.slds-has-focus .slds-th__action:hover, .slds-is-sortable.slds-has-focus .slds-th__action:focus { background-color: var(--slds-s-table-header-color-background-hover); color: currentColor; } .slds-is-sortable .slds-th__action:hover .slds-is-sortable__icon, .slds-is-sortable .slds-th__action:focus .slds-is-sortable__icon, .slds-is-sortable.slds-has-focus .slds-th__action .slds-is-sortable__icon, .slds-is-sortable.slds-has-focus .slds-th__action:hover .slds-is-sortable__icon, .slds-is-sortable.slds-has-focus .slds-th__action:focus .slds-is-sortable__icon { display: inline-block; fill: var(--slds-g-color-accent-2); } .slds-th__action { display: flex; padding: var(--slds-g-spacing-2); height: 2rem; align-items: center; color: currentColor; } .slds-th__action:focus, .slds-th__action:hover { outline: 0; background-color: var(--slds-s-table-header-color-background-hover); } .slds-th__action_form, .slds-th__action--form { display: inline-flex; } .slds-th__action-button { position: absolute; transform: translateY(-50%); top: 50%; inset-inline-end: var(--slds-g-spacing-1); } .slds-th__action-button > .slds-button { color: var(--slds-g-color-on-surface-3); } .slds-th__action-button > .slds-button:hover { background: transparent; } .slds-has-button-menu .slds-th__action { padding-inline-end: var(--slds-g-spacing-6); } .slds-has-button-menu .slds-th__action-button { inset-inline-end: var(--slds-g-spacing-3); } .slds-is-sortable__icon { width: 0.75rem; height: 0.75rem; margin-inline-start: var(--slds-g-spacing-1); display: none; } .slds-is-sorted .slds-is-sortable__icon { display: inline-block; } .slds-is-sorted_asc .slds-is-sortable__icon, .slds-is-sorted--asc .slds-is-sortable__icon { transform: rotate(180deg); } .slds-table_column-1-wrap tbody tr > *:nth-child(1) .slds-truncate, .slds-table--column-1-wrap tbody tr > *:nth-child(1) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-2-wrap tbody tr > *:nth-child(2) .slds-truncate, .slds-table--column-2-wrap tbody tr > *:nth-child(2) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-3-wrap tbody tr > *:nth-child(3) .slds-truncate, .slds-table--column-3-wrap tbody tr > *:nth-child(3) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-4-wrap tbody tr > *:nth-child(4) .slds-truncate, .slds-table--column-4-wrap tbody tr > *:nth-child(4) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-5-wrap tbody tr > *:nth-child(5) .slds-truncate, .slds-table--column-5-wrap tbody tr > *:nth-child(5) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-6-wrap tbody tr > *:nth-child(6) .slds-truncate, .slds-table--column-6-wrap tbody tr > *:nth-child(6) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-7-wrap tbody tr > *:nth-child(7) .slds-truncate, .slds-table--column-7-wrap tbody tr > *:nth-child(7) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-8-wrap tbody tr > *:nth-child(8) .slds-truncate, .slds-table--column-8-wrap tbody tr > *:nth-child(8) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-9-wrap tbody tr > *:nth-child(9) .slds-truncate, .slds-table--column-9-wrap tbody tr > *:nth-child(9) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-10-wrap tbody tr > *:nth-child(10) .slds-truncate, .slds-table--column-10-wrap tbody tr > *:nth-child(10) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-11-wrap tbody tr > *:nth-child(11) .slds-truncate, .slds-table--column-11-wrap tbody tr > *:nth-child(11) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-12-wrap tbody tr > *:nth-child(12) .slds-truncate, .slds-table--column-12-wrap tbody tr > *:nth-child(12) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-13-wrap tbody tr > *:nth-child(13) .slds-truncate, .slds-table--column-13-wrap tbody tr > *:nth-child(13) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-14-wrap tbody tr > *:nth-child(14) .slds-truncate, .slds-table--column-14-wrap tbody tr > *:nth-child(14) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } .slds-table_column-15-wrap tbody tr > *:nth-child(15) .slds-truncate, .slds-table--column-15-wrap tbody tr > *:nth-child(15) .slds-truncate { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; white-space: normal; } [class*='slds-table_column-'] tr td .slds-truncate, [class*='slds-table--column-'] tr td .slds-truncate { overflow: hidden; position: relative; max-height: 3.25rem; } [class*='slds-table_column-'] tr td .slds-truncate::after, [class*='slds-table--column-'] tr td .slds-truncate::after { content: ''; position: absolute; top: 2.25rem; bottom: 0; right: 0; width: 50%; background: linear-gradient(to right, transparent 0%, var(--slds-g-color-neutral-base-100, rgba(255, 255, 255, 1)) 69%); } [class*='slds-table_column-'] tr:hover td .slds-truncate::after, [class*='slds-table--column-'] tr:hover td .slds-truncate::after { background: linear-gradient(to right, rgba(250, 250, 249, 0) 0%, rgba(250, 250, 249, 1) 69%); } .slds-table_resizable-cols thead th, .slds-table--resizable-cols thead th { padding: 0; } .slds-table_resizable-cols thead th:last-of-type .slds-resizable__handle, .slds-table--resizable-cols thead th:last-of-type .slds-resizable__handle { width: var(--slds-g-sizing-2); inset-inline-end: 0; } .slds-table_resizable-cols thead th:last-of-type .slds-resizable__handle .slds-resizable__divider::before, .slds-table--resizable-cols thead th:last-of-type .slds-resizable__handle .slds-resizable__divider::before, .slds-table_resizable-cols thead th:last-of-type .slds-resizable__handle .slds-resizable__divider::after, .slds-table--resizable-cols thead th:last-of-type .slds-resizable__handle .slds-resizable__divider::after { inset-inline-end: 0; } .slds-resizable { max-width: 100%; } .slds-resizable__handle { width: var(--slds-g-sizing-7); height: 100%; position: absolute; top: 0; inset-inline-end: calc(var(--slds-g-spacing-3) * -1); } .slds-resizable__divider { position: absolute; right: 0; top: 0; width: 100%; height: 100%; display: block; cursor: col-resize; z-index: 5000; } .slds-resizable__divider::before, .slds-resizable__divider::after { height: 100%; content: ' '; display: block; position: absolute; top: 0; inset-inline-end: var(--slds-g-spacing-3); } .slds-resizable__divider::before { background-color: var(--slds-s-table-resize-color); height: 100%; width: 1px; } .slds-resizable__divider::after { background-color: var(--slds-s-table-resize-color-active); width: 1px; height: 100vh; opacity: 0; } .slds-resizable__divider:hover::before, .slds-resizable__divider:focus::before, .slds-resizable__divider:active::before { background-color: var(--slds-s-table-resize-color-active); width: var(--slds-g-sizing-2); } .slds-resizable__divider:hover::after, .slds-resizable__divider:focus::after, .slds-resizable__divider:active::after { opacity: 1; } .slds-resizable__input:focus ~ .slds-resizable__handle .slds-resizable__divider::before { background-color: var(--slds-s-table-resize-color-active); width: var(--slds-g-sizing-2); } .slds-resizable__input:focus ~ .slds-resizable__handle .slds-resizable__divider::after { opacity: 1; } .slds-table_header-hidden, .slds-table--header-hidden { border-block-start: 0; } .slds-table_header-fixed_container, .slds-table--header-fixed_container { position: relative; padding-block-start: 2rem; background-color: var(--slds-s-table-header-color-background); overflow: hidden; } .slds-table_header-fixed_container::before, .slds-table--header-fixed_container::before { border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); content: ''; display: block; position: relative; width: 100%; } .slds-cell-fixed { background-color: var(--slds-s-table-header-color-background); position: absolute; inset-block-start: 0; height: 2rem; } .slds-table_header-fixed, .slds-table--header-fixed { border-block-start: 0; } .slds-table_header-fixed thead th, .slds-table--header-fixed thead th { position: static; padding: 0; border-block-start: 0; } .slds-table_header-fixed tbody tr:first-child td, .slds-table--header-fixed tbody tr:first-child td, .slds-table_header-fixed tbody tr:first-child th, .slds-table--header-fixed tbody tr:first-child th { border-block-start: 0; } .slds-table_edit_container:focus, .slds-table--edit_container:focus { outline: none; } .slds-table_edit_container:focus::before, .slds-table--edit_container:focus::before { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: var(--slds-g-color-surface-container-2); box-shadow: 0 0 0 4px var(--slds-g-color-accent-2) inset; } .slds-table_edit_container:focus .slds-table_edit_container-message, .slds-table--edit_container:focus .slds-table--edit--container-message { display: block; position: absolute; top: 50%; left: 50%; width: var(--slds-g-sizing-15); margin-top: -2.25rem; margin-inline-start: calc((var(--slds-g-sizing-15) * 0.5) * -1); background-color: var(--slds-g-color-surface-container-1); text-align: center; z-index: 1; } .slds-table_edit_container-message, .slds-table--edit_container-message { display: none; } .slds-table_edit thead th, .slds-table--edit thead th { padding: 0; } .slds-table_edit .slds-cell-error, .slds-table--edit .slds-cell-error { padding-inline-start: 0; } .slds-table_edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus, .slds-table--edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus { background-color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-g-color-accent-2) 0 0 0 1px inset; } .slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit:hover, .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit:hover { background-color: var(--slds-g-color-surface-container-1); } .slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-is-edited, .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-is-edited { background-color: var(--slds-g-color-palette-yellow-90); } .slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error, .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error { background-color: var(--_slds-c-datatable-color-background-error); box-shadow: var(--slds-g-color-error-1) 0 0 0 var(--slds-g-sizing-border-2) inset; } .slds-table_edit .slds-button__icon_edit:focus, .slds-table--edit .slds-button__icon--edit:focus { fill: var(--slds-g-color-accent-2); } .slds-has-focus .slds-th__action { background-color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-g-shadow-insetinverse-focus-1); } .slds-has-focus.slds-is-resizable .slds-th__action, .slds-has-focus.slds-is-resizable .slds-th__action:focus, .slds-has-focus.slds-is-resizable .slds-th__action:hover, .slds-has-focus.slds-is-resizable .slds-th__action:focus:hover, .slds-is-resizable .slds-th__action:focus, .slds-is-resizable .slds-th__action:focus:hover { background-color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-g-shadow-insetinverse-focus-1), var(--slds-g-color-accent-2) -0.25rem 0 0 inset; } .slds-has-focus.slds-is-resizable .slds-th__action:has(.slds-button_icon-bare:focus-visible), .slds-has-focus.slds-is-resizable .slds-th__action:has(.slds-button--icon-bare:focus-visible), .slds-has-focus.slds-is-resizable .slds-th__action:focus:has(.slds-button_icon-bare:focus-visible), .slds-has-focus.slds-is-resizable .slds-th__action:focus:has(.slds-button--icon-bare:focus-visible), .slds-has-focus.slds-is-resizable .slds-th__action:hover:has(.slds-button_icon-bare:focus-visible), .slds-has-focus.slds-is-resizable .slds-th__action:hover:has(.slds-button--icon-bare:focus-visible), .slds-has-focus.slds-is-resizable .slds-th__action:focus:hover:has(.slds-button_icon-bare:focus-visible), .slds-has-focus.slds-is-resizable .slds-th__action:focus:hover:has(.slds-button--icon-bare:focus-visible), .slds-is-resizable .slds-th__action:focus:has(.slds-button_icon-bare:focus-visible), .slds-is-resizable .slds-th__action:focus:has(.slds-button--icon-bare:focus-visible), .slds-is-resizable .slds-th__action:focus:hover:has(.slds-button_icon-bare:focus-visible), .slds-is-resizable .slds-th__action:focus:hover:has(.slds-button--icon-bare:focus-visible) { box-shadow: none; } .slds-has-focus.slds-is-resizable .slds-th__action:hover, .slds-has-focus.slds-is-resizable .slds-th__action:focus:hover, .slds-is-resizable .slds-th__action:focus:hover { box-shadow: none; } .slds-table .slds-cell-edit { outline: 0; } .slds-table .slds-cell-edit.slds-has-focus { background-color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-g-shadow-inset-focus-1); } .slds-table .slds-cell-edit.slds-has-focus .slds-button__icon_edit, .slds-table .slds-cell-edit.slds-has-focus .slds-button__icon--edit, .slds-table .slds-cell-edit.slds-has-focus .slds-button__icon_lock, .slds-table .slds-cell-edit.slds-has-focus .slds-button__icon--lock { opacity: 1; } .slds-table .slds-cell-edit.slds-has-focus:hover { box-shadow: var(--slds-g-color-accent-2) 0 0 0 1px inset; } .slds-table .slds-cell-edit.slds-has-focus a:focus { text-decoration: underline; outline: none; } .slds-table .slds-cell-edit.slds-is-edited, .slds-table .slds-cell-edit.slds-is-edited:hover { font-weight: 600; background-color: var(--slds-g-color-palette-yellow-90); } .slds-table .slds-cell-edit.slds-has-error, .slds-table .slds-cell-edit.slds-has-error:hover { font-weight: 600; background-color: var(--_slds-c-datatable-color-background-error); box-shadow: var(--slds-g-color-error-1) 0 0 0 var(--slds-g-sizing-border-2) inset; } .slds-table .slds-cell-edit.slds-has-error a { color: currentColor; } .slds-cell-edit__button { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .slds-cell-edit__button:focus .slds-button__icon_edit, .slds-cell-edit__button:focus .slds-button__icon--edit { opacity: 1; } .slds-cell-edit__button[disabled], .slds-cell-edit__button:disabled { color: var(--slds-g-color-disabled-1); } .slds-no-cell-focus .slds-has-focus { background: var(--slds-g-color-surface-container-2); box-shadow: none; } .slds-no-cell-focus .slds-has-focus .slds-th__action, .slds-no-cell-focus .slds-has-focus .slds-th__action:hover, .slds-no-cell-focus .slds-has-focus .slds-th__action:focus, .slds-no-cell-focus .slds-has-focus .slds-th__action:focus:hover { color: inherit; background-color: var(--slds-g-color-surface-container-1); box-shadow: none; } .slds-no-cell-focus .slds-has-focus .slds-button__icon_edit, .slds-no-cell-focus .slds-has-focus .slds-button__icon--edit { opacity: 1; } .slds-no-cell-focus .slds-has-focus.slds-is-resizable:hover .slds-th__action { background-color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-g-color-border-1) -0.25rem 0 0 inset; } .slds-no-cell-focus .slds-is-sortable.slds-has-focus .slds-is-sortable__icon { display: none; } .slds-no-cell-focus .slds-is-sorted.slds-has-focus .slds-is-sortable__icon { display: inline-block; fill: var(--slds-g-color-on-surface-1); } .slds-no-cell-focus .slds-is-edited, .slds-no-cell-focus .slds-is-edited:hover { background-color: var(--slds-g-color-palette-yellow-90); color: var(--slds-g-color-on-warning-1); } .slds-no-cell-focus .slds-has-error, .slds-no-cell-focus .slds-has-error:hover { background-color: var(--slds-g-color-palette-yellow-90); box-shadow: var(--slds-g-color-error-1) 0 0 0 var(--slds-g-sizing-border-2) inset; } .slds-no-cell-focus thead .slds-has-focus:hover { color: var(--slds-s-link-color); } .slds-no-cell-focus thead .slds-has-focus:hover .slds-is-sortable__icon { display: inline-block; fill: var(--slds-s-link-color); } .slds-hint-parent .slds-cell-edit .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit .slds-button__icon--edit, .slds-hint-parent .slds-cell-edit .slds-button__icon_lock, .slds-hint-parent .slds-cell-edit .slds-button__icon--lock { opacity: 0; } .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit { opacity: 1; fill: var(--slds-g-color-accent-2); } .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit:hover, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit:hover, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit:focus, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit:focus, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit:hover, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit:hover, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit:focus, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit:focus { fill: var(--slds-g-color-accent-2); opacity: 1; } .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_lock, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--lock, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_lock, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--lock { opacity: 1; } .slds-hint-parent .slds-cell-edit:hover .slds-button_icon:hover .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit:hover .slds-button--icon:hover .slds-button__icon--edit, .slds-hint-parent .slds-cell-edit:hover .slds-button_icon:focus .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit:hover .slds-button--icon:focus .slds-button__icon--edit, .slds-hint-parent .slds-cell-edit:focus .slds-button_icon:hover .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit:focus .slds-button--icon:hover .slds-button__icon--edit, .slds-hint-parent .slds-cell-edit:focus .slds-button_icon:focus .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit:focus .slds-button--icon:focus .slds-button__icon--edit { fill: var(--slds-g-color-on-surface-3); } .slds-hint-parent .slds-cell-edit.slds-has-focus .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit.slds-has-focus .slds-button__icon--edit { fill: var(--slds-g-color-on-surface-3); opacity: 1; } .slds-form-element__label_edit, .slds-form-element__label--edit { margin-block: 0; margin-inline: 0.125rem; } .slds-popover_edit, .slds-popover--edit { border-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; } .slds-popover_edit .slds-popover__body, .slds-popover--edit .slds-popover__body { padding: var(--slds-g-spacing-1); padding-inline-start: 0; } .slds-popover_edit .slds-form-element__help, .slds-popover--edit .slds-form-element__help { width: 100%; padding-inline-start: var(--slds-g-spacing-2); } .slds-table_joined table, .slds-table--joined table, .slds-table.slds-has-top-magnet table { border-radius: 0 0 var(--slds-g-radius-border-2) var(--slds-g-radius-border-2); box-shadow: var(--slds-s-container-shadow, var(--slds-g-shadow-1)); } .slds-table_joined-wrapper, .slds-table--joined-wrapper { padding: var(--slds-g-spacing-4) var(--slds-g-spacing-4) 0 var(--slds-g-spacing-4); border-radius: var(--slds-g-radius-border-2); background-clip: padding-box; } .slds-table_joined-wrapper .slds-table, .slds-table--joined-wrapper .slds-table { border-radius: 0 0 var(--slds-g-radius-border-2) var(--slds-g-radius-border-2); box-shadow: var(--slds-s-container-shadow, var(--slds-g-shadow-1)); } .slds-tree-container, .slds-tree_container, .slds-tree--container { min-width: 25rem; max-width: var(--slds-c-tree-sizing-max-width, 25rem); } .slds-tree-container > .slds-text-heading_label, .slds-tree-container > .slds-text-heading--label, .slds-tree_container > .slds-text-heading_label, .slds-tree--container > .slds-text-heading--label { margin-block-end: var(--slds-g-spacing-2); } .slds-tree__item { display: flex; padding-block-start: calc(var(--slds-g-spacing-1) + 2px); padding-block-end: calc(var(--slds-g-spacing-1) + 2px); padding-inline-start: var(--slds-g-spacing-4); padding-inline-end: 0; } .slds-tree__item.slds-is-hovered, .slds-tree__item:hover { background: var(--slds-s-table-row-color-background-selected, var(--slds-g-color-surface-container-2)); cursor: pointer; } .slds-tree [role='treeitem']:focus { outline: 0; } .slds-tree [role='treeitem']:focus > .slds-tree__item { background: var(--slds-g-color-surface-container-2); cursor: pointer; text-decoration: underline; } .slds-tree [role='treeitem']:focus-visible > .slds-tree__item { box-shadow: var(--slds-g-shadow-inset-focus-1); } .slds-tree [role='treeitem'][aria-selected='true'] > .slds-tree__item { background: var(--slds-g-color-brand-base-90); box-shadow: var(--slds-g-color-accent-1) 4px 0 0 inset; } .slds-tree [role='treeitem'][aria-selected='true'] > .slds-tree__item [dir='rtl'] { box-shadow: var(--slds-g-color-accent-1) -4px 0 0 inset; } .slds-tree [role='treeitem'][aria-selected='true']:focus-visible > .slds-tree__item { box-shadow: var(--slds-g-color-accent-1) 4px 0 0 inset, var(--slds-g-shadow-inset-focus-1); } .slds-tree [role='treeitem'][aria-selected='true']:focus-visible > .slds-tree__item [dir='rtl'] { box-shadow: var(--slds-g-color-accent-1) -4px 0 0 inset, var(--slds-g-shadow-inset-focus-1); } .slds-tree [aria-disabled='true'] { color: var(--slds-g-color-disabled-1); } .slds-tree [aria-disabled='true'] .slds-tree__item.slds-is-hovered, .slds-tree [aria-disabled='true'] .slds-tree__item:hover { background-color: transparent; cursor: default; } .slds-tree [aria-disabled='true'] .slds-tree__item-meta { color: inherit; } .slds-tree [role='treeitem'] > [role='group'] { display: none; } .slds-tree [role='treeitem'][aria-expanded='true'] > [role='group'] { display: block; } [aria-expanded='false'] > .slds-tree__item .slds-button__icon { transition: 0.2s transform ease-in-out; transform: rotate(0deg); } [aria-expanded='true'] > .slds-tree__item .slds-button__icon { transition: 0.2s transform ease-in-out; transform: rotate(90deg); } [aria-expanded='true'] > .slds-tree__item .slds-button__icon [dir='rtl'] { transform: rotate(-90deg); } .slds-tree [aria-level='1'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 1); } .slds-tree [aria-level='2'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 2); } .slds-tree [aria-level='3'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 3); } .slds-tree [aria-level='4'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 4); } .slds-tree [aria-level='5'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 5); } .slds-tree [aria-level='6'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 6); } .slds-tree [aria-level='7'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 7); } .slds-tree [aria-level='8'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 8); } .slds-tree [aria-level='9'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 9); } .slds-tree [aria-level='10'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 10); } .slds-tree [aria-level='11'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 11); } .slds-tree [aria-level='12'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 12); } .slds-tree [aria-level='13'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 13); } .slds-tree [aria-level='14'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 14); } .slds-tree [aria-level='15'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 15); } .slds-tree [aria-level='16'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 16); } .slds-tree [aria-level='17'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 17); } .slds-tree [aria-level='18'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 18); } .slds-tree [aria-level='19'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 19); } .slds-tree [aria-level='20'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 20); } .slds-tree__item-label { display: block; } .slds-tree__item-meta { display: block; color: var(--slds-g-color-on-surface-1); } .slds-tree__item .slds-button { align-self: flex-start; margin-block-start: 2px; } .slds-tree__item .slds-pill { margin-inline-start: var(--slds-g-spacing-3); } .slds-tree__group-header { font-size: var(--slds-g-font-scale-1); font-weight: var(--slds-g-font-weight-7); } .slds-table_tree[role='treegrid'], .slds-table--tree[role='treegrid'] { border-collapse: separate; } .slds-table_tree[role='treegrid'] .slds-tree__item, .slds-table--tree[role='treegrid'] .slds-tree__item, .slds-table_tree[role='treegrid'] [role='gridcell'], .slds-table--tree[role='treegrid'] [role='gridcell'] { padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2); } .slds-table_tree .slds-tree__item, .slds-table--tree .slds-tree__item { line-height: var(--slds-g-font-lineheight-5); } .slds-table_tree .slds-tree__item a, .slds-table--tree .slds-tree__item a { color: var(--slds-s-link-color); } .slds-table_tree .slds-tree__item a:hover, .slds-table--tree .slds-tree__item a:hover { text-decoration: underline; } .slds-table_tree tr:has(.slds-cell-wrap) .slds-tree__item, .slds-table--tree tr:has(.slds-cell-wrap) .slds-tree__item { display: table-cell; vertical-align: top; } .slds-table_tree tr:has(.slds-cell-wrap) .slds-tree__item > .slds-button, .slds-table--tree tr:has(.slds-cell-wrap) .slds-tree__item > .slds-button { float: left; height: 1.5rem; } .slds-table_tree .slds-button, .slds-table--tree .slds-button, .slds-table--tree .slds-button { align-self: center; } .slds-table_tree .slds-button:not(.slds-th__action-button), .slds-table--tree .slds-button:not(.slds-th__action-button) { margin-block-start: 0; } .slds-table_tree, .slds-table--tree { } .slds-table_tree [aria-level='1'] > .slds-tree__item, .slds-table--tree [aria-level='1'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 1); } .slds-table_tree [aria-level='2'] > .slds-tree__item, .slds-table--tree [aria-level='2'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 2); } .slds-table_tree [aria-level='3'] > .slds-tree__item, .slds-table--tree [aria-level='3'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 3); } .slds-table_tree [aria-level='4'] > .slds-tree__item, .slds-table--tree [aria-level='4'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 4); } .slds-table_tree [aria-level='5'] > .slds-tree__item, .slds-table--tree [aria-level='5'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 5); } .slds-table_tree [aria-level='6'] > .slds-tree__item, .slds-table--tree [aria-level='6'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 6); } .slds-table_tree [aria-level='7'] > .slds-tree__item, .slds-table--tree [aria-level='7'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 7); } .slds-table_tree [aria-level='8'] > .slds-tree__item, .slds-table--tree [aria-level='8'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 8); } .slds-table_tree [aria-level='9'] > .slds-tree__item, .slds-table--tree [aria-level='9'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 9); } .slds-table_tree [aria-level='10'] > .slds-tree__item, .slds-table--tree [aria-level='10'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 10); } .slds-table_tree [aria-level='11'] > .slds-tree__item, .slds-table--tree [aria-level='11'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 11); } .slds-table_tree [aria-level='12'] > .slds-tree__item, .slds-table--tree [aria-level='12'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 12); } .slds-table_tree [aria-level='13'] > .slds-tree__item, .slds-table--tree [aria-level='13'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 13); } .slds-table_tree [aria-level='14'] > .slds-tree__item, .slds-table--tree [aria-level='14'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 14); } .slds-table_tree [aria-level='15'] > .slds-tree__item, .slds-table--tree [aria-level='15'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 15); } .slds-table_tree [aria-level='16'] > .slds-tree__item, .slds-table--tree [aria-level='16'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 16); } .slds-table_tree [aria-level='17'] > .slds-tree__item, .slds-table--tree [aria-level='17'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 17); } .slds-table_tree [aria-level='18'] > .slds-tree__item, .slds-table--tree [aria-level='18'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 18); } .slds-table_tree [aria-level='19'] > .slds-tree__item, .slds-table--tree [aria-level='19'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 19); } .slds-table_tree [aria-level='20'] > .slds-tree__item, .slds-table--tree [aria-level='20'] > .slds-tree__item { padding-inline-start: calc(var(--slds-g-spacing-4) * 20); } .slds-section { margin-block: var(--slds-g-spacing-2); } .slds-section.slds-is-open .slds-section__title-action-icon { transform: rotate(0deg); transform-origin: 45%; } .slds-section.slds-is-open .slds-section__content { padding-top: var(--slds-g-spacing-2); overflow: visible; visibility: visible; opacity: 1; height: auto; color: var(--slds-g-color-on-surface-1); } .slds-section__title { display: flex; align-items: center; font-size: var(--slds-s-container-heading-var-font-size, var(--slds-g-font-scale-2)); line-height: 1.875rem; border: var(--slds-g-sizing-border-1) solid transparent; border-radius: var(--slds-g-radius-border-2); } .slds-section__title .slds-button { --slds-c-button-radius-border: var(--slds-g-radius-border-2); } .slds-section__title-action { display: flex; align-items: center; background-color: var(--slds-g-color-surface-container-2); cursor: pointer; width: 100%; text-align: left; color: var(--slds-g-color-on-surface-3); font-size: inherit; font-weight: var(--slds-s-container-heading-font-weight); padding: 0 var(--slds-g-spacing-2); } .slds-section__title-action:hover, .slds-section__title-action:focus, .slds-section__title-action:active { background-color: var(--slds-g-color-surface-container-2); color: inherit; } .slds-section__content { overflow: hidden; visibility: hidden; opacity: 0; height: 0; } .slds-section__title-action-icon { transform: rotate(-90deg); } .slds-section-title_divider, .slds-section-title--divider { font-size: var(--slds-g-font-scale-neg-1); line-height: var(--slds-g-font-lineheight-2); color: var(--slds-g-color-neutral-base-30); text-transform: uppercase; letter-spacing: 0.0625rem; padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4); background-color: var(--slds-g-color-surface-container-2); } .slds-illustration { text-align: center; } .slds-illustration.slds-illustration_small .slds-illustration__svg, .slds-illustration.slds-illustration--small .slds-illustration__svg { width: 100%; max-width: 300px; max-height: 200px; margin-block-end: var(--slds-g-spacing-4); } .slds-illustration.slds-illustration_large .slds-illustration__svg, .slds-illustration.slds-illustration--large .slds-illustration__svg { width: 100%; max-width: 600px; max-height: 400px; margin-block-end: var(--slds-g-spacing-8); } .slds-illustration.slds-illustration_large .slds-illustration__header, .slds-illustration.slds-illustration--large .slds-illustration__header { margin-block-end: var(--slds-g-spacing-5); } .slds-illustration.slds-illustration_large p, .slds-illustration.slds-illustration--large p { margin-block-end: var(--slds-g-spacing-8); } .slds-illustration .slds-illustration__stroke-primary { stroke: var(--slds-g-color-palette-cloud-blue-80); } .slds-illustration .slds-illustration__stroke-secondary { stroke: var(--slds-g-color-palette-cloud-blue-90); } .slds-illustration .slds-illustration__fill-primary { fill: var(--slds-g-color-palette-cloud-blue-80); } .slds-illustration .slds-illustration__fill-secondary { fill: var(--slds-g-color-palette-cloud-blue-90); } .slds-region { background-color: var(--slds-g-color-surface-container-1); } .slds-region__pinned-top { background-color: var(--slds-g-color-surface-container-1); border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-region__pinned-left { background-color: var(--slds-g-color-surface-container-1); border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-region__pinned-right { background-color: var(--slds-g-color-surface-container-1); border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-welcome-mat { --_slds-c-welcomemat-image-background: var(--lwc-welcomeMatBackgroundImageInfo, url('/bg-info@2x.png')); position: relative; } .slds-welcome-mat__content { min-height: 25rem; max-height: 37.5rem; } .slds-welcome-mat__content .slds-progress-bar { display: inline-block; width: 12.5rem; background: var(--slds-g-color-surface-1); } .slds-welcome-mat__content .slds-progress-bar__value { background: var(--slds-g-color-success-1); } .slds-welcome-mat__info { display: flex; overflow: auto; padding-block: var(--slds-g-spacing-4) 7.75rem; padding-inline: var(--slds-g-spacing-8); color: var(--slds-g-color-brand-base-20); background-image: var(--_slds-c-welcomemat-image-background); background-position: bottom center; background-repeat: no-repeat; background-size: contain; background-color: var(--sds-g-color-palette-cloud-blue-90); align-items: center; border-start-start-radius: var(--slds-s-container-radius-border, var(--slds-g-radius-border-2)); border-end-start-radius: var(--slds-s-container-radius-border, var(--slds-g-radius-border-2)); } .slds-welcome-mat__info:focus-visible { outline: 0; box-shadow: var(--slds-g-shadow-inset-focus-1); } .slds-welcome-mat__info-content { margin: auto; text-align: center; } .slds-welcome-mat__info-title { margin-block-end: var(--slds-g-spacing-5); font-size: var(--slds-g-font-scale-7); font-weight: var(--slds-g-font-weight-7); line-height: var(--slds-g-font-lineheight-2); } .slds-welcome-mat__info-description { margin-block-end: var(--slds-g-spacing-5); } .slds-welcome-mat__info-progress { margin-block-end: var(--slds-g-spacing-4); } .slds-welcome-mat__tiles { background: var(--slds-g-color-surface-container-2); overflow: auto; padding: var(--slds-g-spacing-4); } .slds-welcome-mat__tile { margin-block: var(--slds-g-spacing-4); margin-inline: 0; box-shadow: var(--slds-g-shadow-2); border-radius: var(--slds-g-radius-border-2); background: var(--slds-g-color-neutral-base-100); } .slds-welcome-mat__tile:hover { box-shadow: 0 0 0 1px var(--slds-g-color-border-accent-1) inset, var(--slds-g-shadow-2); } .slds-welcome-mat__tile .slds-media { padding: var(--slds-g-spacing-3); } .slds-welcome-mat__tile .slds-icon-action-check { display: none; } .slds-welcome-mat__tile:first-child { margin-block-start: 0; } .slds-welcome-mat__tile:last-child { margin-block-end: 0; } .slds-welcome-mat__tile.slds-welcome-mat__tile_complete, .slds-welcome-mat__tile.slds-welcome-mat__tile--complete, .slds-welcome-mat__tile.slds-welcome-mat__tile_info-only, .slds-welcome-mat__tile.slds-welcome-mat__tile--info-only { box-shadow: none; } .slds-welcome-mat__tile .slds-box_link:focus-visible, .slds-welcome-mat__tile .slds-box--link:focus-visible { box-shadow: var(--slds-g-shadow-outline-focus-1); outline: 0; border-color: transparent; } .slds-welcome-mat__tile-figure { margin-inline-start: var(--slds-g-spacing-1); } .slds-welcome-mat__tile-title { font-weight: var(--slds-g-font-weight-7); } .slds-welcome-mat__tile-body { padding: var(--slds-g-spacing-3); border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-welcome-mat__tile-description { color: var(--slds-g-color-on-surface-3); font-size: var(--slds-g-font-scale-neg-1); line-height: var(--slds-g-font-lineheight-3); } .slds-welcome-mat__tile-icon-container { position: relative; } .slds-welcome-mat__tile_complete, .slds-welcome-mat__tile--complete { background: transparent; } .slds-welcome-mat__tile_complete .slds-icon, .slds-welcome-mat__tile--complete .slds-icon { fill: var(--slds-g-color-neutral-base-80); } .slds-welcome-mat__tile_complete .slds-icon-action-check, .slds-welcome-mat__tile--complete .slds-icon-action-check { position: absolute; inset-block-end: calc(var(--slds-g-sizing-6) * 0.5 * -1); inset-inline-end: calc(var(--slds-g-sizing-6) * 0.5 * -1); height: var(--slds-g-sizing-6); width: var(--slds-g-sizing-6); display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: var(--slds-g-sizing-borde-2) solid var(--slds-g-color-border-1); border-radius: var(--slds-g-sizing-6); line-height: 0; background: var(--slds-g-color-success-1); } .slds-welcome-mat__tile_complete .slds-icon-action-check .slds-icon, .slds-welcome-mat__tile--complete .slds-icon-action-check .slds-icon { fill: var(--slds-g-color-neutral-base-100); } .slds-welcome-mat_info-only .slds-welcome-mat__content, .slds-welcome-mat--info-only .slds-welcome-mat__content { height: 37.5rem; } .slds-welcome-mat_info-only .slds-welcome-mat__info-title, .slds-welcome-mat--info-only .slds-welcome-mat__info-title { font-size: var(--slds-g-font-scale-7); } .slds-welcome-mat__tiles_info-only, .slds-welcome-mat__tiles--info-only { background-color: var(--slds-g-color-surface-container-1); } .slds-welcome-mat__tile_info-only .slds-welcome-mat__tile-body, .slds-welcome-mat__tile--info-only .slds-welcome-mat__tile-body { border-inline-start: 0; } .slds-welcome-mat_splash .slds-welcome-mat__content, .slds-welcome-mat--splash .slds-welcome-mat__content { height: 37.5rem; } .slds-welcome-mat_splash .slds-welcome-mat__info-content, .slds-welcome-mat--splash .slds-welcome-mat__info-content { max-width: 37.5rem; } .slds-welcome-mat_splash .slds-welcome-mat__info-title, .slds-welcome-mat--splash .slds-welcome-mat__info-title { font-size: var(--slds-g-font-scale-7); } .slds-welcome-mat__info-badge-container { display: inline-block; position: relative; } .slds-welcome-mat__info-badge-container .slds-icon-action-check { border-width: 0; top: 50%; right: 0%; transform: translate3d(50%, -50%, 0); display: none; } .slds-welcome-mat__info-badge { margin-block-end: var(--slds-g-spacing-3); } .slds-welcome-mat__info-progress_complete .slds-icon-action-check, .slds-welcome-mat__info-progress--complete .slds-icon-action-check { display: flex; } .slds-summary-detail { display: flex; align-items: flex-start; } .slds-summary-detail .slds-summary-detail__action-icon { transform: rotate(-90deg); } .slds-summary-detail .slds-summary-detail__content { overflow: hidden; visibility: hidden; opacity: 0; height: 0; } [dir='rtl'] .slds-summary-detail .slds-summary-detail__action-icon { transform: rotate(90deg); } .slds-summary-detail.slds-is-open .slds-summary-detail__action-icon { transform: rotate(0deg); transform-origin: 45%; } .slds-summary-detail.slds-is-open .slds-summary-detail__content { padding-block-start: var(--slds-g-spacing-3); overflow: visible; visibility: visible; opacity: 1; height: auto; } .slds-setup-assistant { padding: var(--slds-g-spacing-4); } .slds-setup-assistant__item { border-block-end: 1px var(--slds-g-color-disabled-1) solid; padding-block: var(--slds-g-spacing-6); padding-inline: 0; } .slds-setup-assistant__item:first-child { padding-block-start: 0; } .slds-setup-assistant__item:last-child { padding-block-end: 0; border-bottom: 0; } .slds-setup-assistant__step-summary .slds-progress-ring_large, .slds-setup-assistant__step-summary .slds-progress-ring--large { top: 1px; } [dir='rtl'] .slds-setup-assistant__step-summary .slds-media__figure { margin-inline-start: var(--slds-g-spacing-3); } .slds-setup-assistant__step-summary-content { margin-inline-end: var(--slds-g-spacing-8); } [dir='rtl'] .slds-setup-assistant__step-summary-content { margin-inline-end: 0; } .slds-setup-assistant__step-summary-title { padding-block-end: var(--slds-g-spacing-2); font-weight: var(--slds-g-font-weight-7); } .slds-setup-assistant__step-detail { padding-inline-start: 2.75rem; } [dir='rtl'] .slds-setup-assistant__step-detail { padding-inline-end: var(--slds-g-spacing-5); padding-inline-start: var(--slds-g-spacing-4); } [dir='rtl'] .slds-setup-assistant__step-detail .slds-media_center, [dir='rtl'] .slds-setup-assistant__step-detail .slds-media--center { margin-inline-end: var(--slds-g-spacing-4); } [dir='rtl'] .slds-setup-assistant__step-detail .slds-media__figure { margin-inline-start: var(--slds-g-spacing-3); } [class*='slds-template_'], [class*='slds-template--'] { --_slds-c-template-sizing-gap: 1rem; --_slds-c-template-profile-sizing-gap: 8rem 0.75rem 0.75rem; } .slds-template__container { position: relative; height: 100%; width: 100%; } .slds-template_default, .slds-template--default { padding: var(--_slds-c-template-sizing-gap); } .slds-template_default.slds-brand-band::before, .slds-template--default.slds-brand-band::before { position: fixed; top: 5.625rem; } .slds-template_default.slds-brand-band.slds-brand-band_medium::after, .slds-template--default.slds-brand-band.slds-brand-band--medium::after { position: fixed; top: 15rem; } .slds-template_bottom-magnet, .slds-template--bottom-magnet { padding: var(--_slds-c-template-sizing-gap) var(--_slds-c-template-sizing-gap) 0 var(--_slds-c-template-sizing-gap); } .slds-template_profile, .slds-template--profile { padding: var(--_slds-c-template-profile-sizing-gap); } .slds-template__content { padding: var(--_slds-c-template-sizing-gap) var(--_slds-c-template-sizing-gap) 0 var(--_slds-c-template-sizing-gap); } .slds-template_app, .slds-template--app { padding: var(--_slds-c-template-sizing-gap) 0 0 var(--_slds-c-template-sizing-gap); } .slds-template_iframe, .slds-template--iframe { width: calc(100% + (var(--_slds-c-template-sizing-gap) * 2)); height: calc(100% + (var(--_slds-c-template-sizing-gap) * 2)); margin: calc(var(--_slds-c-template-sizing-gap) * -1); background-color: var(--slds-g-color-surface-container-1); } .slds-align-content-center { flex: 1; align-self: center; justify-content: center; } .slds-box_border, .slds-box--border { padding: 0; border-radius: var(--slds-g-radius-border-2); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-collapsed { height: 0; overflow: hidden; } .slds-expanded { height: auto; overflow: visible; } .slds-media_reverse > .slds-media__figure, .slds-media--reverse > .slds-media__figure { order: 1; } .slds-media_reverse.slds-media_small .slds-media__figure, .slds-media--reverse.slds-media--small .slds-media__figure { margin-inline-start: var(--slds-g-spacing-1); } .slds-media_double > .slds-media__figure, .slds-media--double > .slds-media__figure { order: 1; } .slds-media_double .slds-media__figure_reverse, .slds-media--double .slds-media__figure--reverse { order: 3; margin: 0 0 0 var(--slds-g-spacing-4); } .slds-media_double .slds-media__body, .slds-media--double .slds-media__body { order: 2; } .slds-grid { display: flex; } .slds-grid_frame, .slds-grid--frame { min-width: 100vw; min-height: 100vh; overflow: hidden; } .slds-grid_vertical, .slds-grid--vertical { flex-direction: column; } .slds-grid_vertical-reverse, .slds-grid--vertical-reverse { flex-direction: column-reverse; } .slds-grid_reverse, .slds-grid--reverse { flex-direction: row-reverse; } .slds-wrap { flex-wrap: wrap; align-items: flex-start; } .slds-nowrap { flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; } @media (min-width: 30em) { .slds-nowrap_small, .slds-nowrap--small { flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; } } @media (min-width: 48em) { .slds-nowrap_medium, .slds-nowrap--medium { flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; } } @media (min-width: 64em) { .slds-nowrap_large, .slds-nowrap--large { flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; } } .slds-gutters { margin-inline-end: calc(var(--slds-g-spacing-3) * -1); margin-inline-start: calc(var(--slds-g-spacing-3) * -1); } .slds-gutters .slds-col { padding-inline-end: var(--slds-g-spacing-3); padding-inline-start: var(--slds-g-spacing-3); } .slds-gutters_xxx-small, .slds-gutters--xxx-small { margin-inline-end: calc(0.125rem * -1); margin-inline-start: calc(0.125rem * -1); } .slds-gutters_xxx-small .slds-col, .slds-gutters--xxx-small .slds-col { padding-inline-end: 0.125rem; padding-inline-start: 0.125rem; } .slds-gutters_xx-small, .slds-gutters--xx-small { margin-inline-end: calc(var(--slds-g-spacing-1) * -1); margin-inline-start: calc(var(--slds-g-spacing-1) * -1); } .slds-gutters_xx-small .slds-col, .slds-gutters--xx-small .slds-col { padding-inline-end: var(--slds-g-spacing-1); padding-inline-start: var(--slds-g-spacing-1); } .slds-gutters_x-small, .slds-gutters--x-small { margin-inline-end: calc(var(--slds-g-spacing-2) * -1); margin-inline-start: calc(var(--slds-g-spacing-2) * -1); } .slds-gutters_x-small .slds-col, .slds-gutters--x-small .slds-col { padding-inline-end: var(--slds-g-spacing-2); padding-inline-start: var(--slds-g-spacing-2); } .slds-gutters_small, .slds-gutters--small { margin-inline-end: calc(var(--slds-g-spacing-3) * -1); margin-inline-start: calc(var(--slds-g-spacing-3) * -1); } .slds-gutters_small .slds-col, .slds-gutters--small .slds-col { padding-inline-end: var(--slds-g-spacing-3); padding-inline-start: var(--slds-g-spacing-3); } .slds-gutters_medium, .slds-gutters--medium { margin-inline-end: calc(var(--slds-g-spacing-4) * -1); margin-inline-start: calc(var(--slds-g-spacing-4) * -1); } .slds-gutters_medium .slds-col, .slds-gutters--medium .slds-col { padding-inline-end: var(--slds-g-spacing-4); padding-inline-start: var(--slds-g-spacing-4); } .slds-gutters_large, .slds-gutters--large { margin-inline-end: calc(var(--slds-g-spacing-5) * -1); margin-inline-start: calc(var(--slds-g-spacing-5) * -1); } .slds-gutters_large .slds-col, .slds-gutters--large .slds-col { padding-inline-end: var(--slds-g-spacing-5); padding-inline-start: var(--slds-g-spacing-5); } .slds-gutters_x-large, .slds-gutters--x-large { margin-inline-end: calc(var(--slds-g-spacing-6) * -1); margin-inline-start: calc(var(--slds-g-spacing-6) * -1); } .slds-gutters_x-large .slds-col, .slds-gutters--x-large .slds-col { padding-inline-end: var(--slds-g-spacing-6); padding-inline-start: var(--slds-g-spacing-6); } .slds-gutters_xx-large, .slds-gutters--xx-large { margin-inline-end: calc(var(--slds-g-spacing-8) * -1); margin-inline-start: calc(var(--slds-g-spacing-8) * -1); } .slds-gutters_xx-large .slds-col, .slds-gutters--xx-large .slds-col { padding-inline-end: var(--slds-g-spacing-8); padding-inline-start: var(--slds-g-spacing-8); } .slds-gutters_direct, .slds-gutters--direct { margin-inline-end: calc(var(--slds-g-spacing-3) * -1); margin-inline-start: calc(var(--slds-g-spacing-3) * -1); } .slds-gutters_direct > .slds-col, .slds-gutters--direct > .slds-col { padding-inline-end: var(--slds-g-spacing-3); padding-inline-start: var(--slds-g-spacing-3); } .slds-gutters_direct-xxx-small, .slds-gutters--direct-xxx-small { margin-inline-end: calc(0.125rem * -1); margin-inline-start: calc(0.125rem * -1); } .slds-gutters_direct-xxx-small > .slds-col, .slds-gutters--direct-xxx-small > .slds-col { padding-inline-end: 0.125rem; padding-inline-start: 0.125rem; } .slds-gutters_direct-xx-small, .slds-gutters--direct-xx-small { margin-inline-end: calc(var(--slds-g-spacing-1) * -1); margin-inline-start: calc(var(--slds-g-spacing-1) * -1); } .slds-gutters_direct-xx-small > .slds-col, .slds-gutters--direct-xx-small > .slds-col { padding-inline-end: var(--slds-g-spacing-1); padding-inline-start: var(--slds-g-spacing-1); } .slds-gutters_direct-x-small, .slds-gutters--direct-x-small { margin-inline-end: calc(var(--slds-g-spacing-2) * -1); margin-inline-start: calc(var(--slds-g-spacing-2) * -1); } .slds-gutters_direct-x-small > .slds-col, .slds-gutters--direct-x-small > .slds-col { padding-inline-end: var(--slds-g-spacing-2); padding-inline-start: var(--slds-g-spacing-2); } .slds-gutters_direct-small, .slds-gutters--direct-small { margin-inline-end: calc(var(--slds-g-spacing-3) * -1); margin-inline-start: calc(var(--slds-g-spacing-3) * -1); } .slds-gutters_direct-small > .slds-col, .slds-gutters--direct-small > .slds-col { padding-inline-end: var(--slds-g-spacing-3); padding-inline-start: var(--slds-g-spacing-3); } .slds-gutters_direct-medium, .slds-gutters--direct-medium { margin-inline-end: calc(var(--slds-g-spacing-4) * -1); margin-inline-start: calc(var(--slds-g-spacing-4) * -1); } .slds-gutters_direct-medium > .slds-col, .slds-gutters--direct-medium > .slds-col { padding-inline-end: var(--slds-g-spacing-4); padding-inline-start: var(--slds-g-spacing-4); } .slds-gutters_direct-large, .slds-gutters--direct-large { margin-inline-end: calc(var(--slds-g-spacing-5) * -1); margin-inline-start: calc(var(--slds-g-spacing-5) * -1); } .slds-gutters_direct-large > .slds-col, .slds-gutters--direct-large > .slds-col { padding-inline-end: var(--slds-g-spacing-5); padding-inline-start: var(--slds-g-spacing-5); } .slds-gutters_direct-x-large, .slds-gutters--direct-x-large { margin-inline-end: calc(var(--slds-g-spacing-6) * -1); margin-inline-start: calc(var(--slds-g-spacing-6) * -1); } .slds-gutters_direct-x-large > .slds-col, .slds-gutters--direct-x-large > .slds-col { padding-inline-end: var(--slds-g-spacing-6); padding-inline-start: var(--slds-g-spacing-6); } .slds-gutters_direct-xx-large, .slds-gutters--direct-xx-large { margin-inline-end: calc(var(--slds-g-spacing-8) * -1); margin-inline-start: calc(var(--slds-g-spacing-8) * -1); } .slds-gutters_direct-xx-large > .slds-col, .slds-gutters--direct-xx-large > .slds-col { padding-inline-end: var(--slds-g-spacing-8); padding-inline-start: var(--slds-g-spacing-8); } .slds-grid_pull-padded, .slds-grid--pull-padded { margin-inline-end: calc(var(--slds-g-spacing-3) * -1); margin-inline-start: calc(var(--slds-g-spacing-3) * -1); } .slds-grid_pull-padded-xxx-small, .slds-grid--pull-padded-xxx-small { margin-inline-end: calc(0.125rem * -1); margin-inline-start: calc(0.125rem * -1); } .slds-grid_pull-padded-xx-small, .slds-grid--pull-padded-xx-small { margin-inline-end: calc(var(--slds-g-spacing-1) * -1); margin-inline-start: calc(var(--slds-g-spacing-1) * -1); } .slds-grid_pull-padded-x-small, .slds-grid--pull-padded-x-small { margin-inline-end: calc(var(--slds-g-spacing-2) * -1); margin-inline-start: calc(var(--slds-g-spacing-2) * -1); } .slds-grid_pull-padded-small, .slds-grid--pull-padded-small { margin-inline-end: calc(var(--slds-g-spacing-3) * -1); margin-inline-start: calc(var(--slds-g-spacing-3) * -1); } .slds-grid_pull-padded-medium, .slds-grid--pull-padded-medium { margin-inline-end: calc(var(--slds-g-spacing-4) * -1); margin-inline-start: calc(var(--slds-g-spacing-4) * -1); } .slds-grid_pull-padded-large, .slds-grid--pull-padded-large { margin-inline-end: calc(var(--slds-g-spacing-5) * -1); margin-inline-start: calc(var(--slds-g-spacing-5) * -1); } .slds-grid_pull-padded-x-large, .slds-grid--pull-padded-x-large { margin-inline-end: calc(var(--slds-g-spacing-6) * -1); margin-inline-start: calc(var(--slds-g-spacing-6) * -1); } .slds-grid_pull-padded-xx-large, .slds-grid--pull-padded-xx-large { margin-inline-end: calc(var(--slds-g-spacing-8) * -1); margin-inline-start: calc(var(--slds-g-spacing-8) * -1); } .slds-col, .slds-col_padded-around-medium, .slds-col--padded-around-medium, .slds-col_padded-medium, .slds-col--padded-medium, .slds-col_padded-around-large, .slds-col--padded-around-large, .slds-col_padded-large, .slds-col--padded-large, .slds-col_padded-around, .slds-col--padded-around, .slds-col_padded, .slds-col--padded { flex: 1 1 auto; } .slds-col { flex: 1 1 auto; } @media (min-width: 64em) { .slds-col_rule-top, .slds-col--rule-top { border-inline-start: 1px solid var(--slds-g-color-border-1); } } @media (min-width: 64em) { .slds-col_rule-right, .slds-col--rule-right { border-inline-end: 1px solid var(--slds-g-color-border-1); } } @media (min-width: 64em) { .slds-col_rule-bottom, .slds-col--rule-bottom { border-block-end: 1px solid var(--slds-g-color-border-1); } } @media (min-width: 64em) { .slds-col_rule-left, .slds-col--rule-left { border-inline-start: 1px solid var(--slds-g-color-border-1); } } .slds-has-flexi-truncate { flex: 1 1 0%; min-width: 0; } .slds-no-flex { flex: none; } .slds-no-space { min-width: 0; } .slds-grow { flex-grow: 1; } .slds-grow-none { flex-grow: 0; } .slds-shrink { flex-shrink: 1; } .slds-shrink-none { flex-shrink: 0; } .slds-text-longform ul.slds-grid { margin-inline-start: 0; list-style: none; } .slds-grid_align-center, .slds-grid--align-center { justify-content: center; } .slds-grid_align-center .slds-col, .slds-grid--align-center .slds-col, .slds-grid_align-center .slds-col_padded-around-medium, .slds-grid--align-center .slds-col--padded-around-medium, .slds-grid_align-center .slds-col_padded-medium, .slds-grid--align-center .slds-col--padded-medium, .slds-grid_align-center .slds-col_padded-around-large, .slds-grid--align-center .slds-col--padded-around-large, .slds-grid_align-center .slds-col_padded-large, .slds-grid--align-center .slds-col--padded-large, .slds-grid_align-center .slds-col_padded-around, .slds-grid--align-center .slds-col--padded-around, .slds-grid_align-center .slds-col_padded, .slds-grid--align-center .slds-col--padded { flex-grow: 0; } .slds-grid_align-space, .slds-grid--align-space { justify-content: space-around; } .slds-grid_align-space .slds-col, .slds-grid--align-space .slds-col, .slds-grid_align-space .slds-col_padded-around-medium, .slds-grid--align-space .slds-col--padded-around-medium, .slds-grid_align-space .slds-col_padded-medium, .slds-grid--align-space .slds-col--padded-medium, .slds-grid_align-space .slds-col_padded-around-large, .slds-grid--align-space .slds-col--padded-around-large, .slds-grid_align-space .slds-col_padded-large, .slds-grid--align-space .slds-col--padded-large, .slds-grid_align-space .slds-col_padded-around, .slds-grid--align-space .slds-col--padded-around, .slds-grid_align-space .slds-col_padded, .slds-grid--align-space .slds-col--padded { flex-grow: 0; } .slds-grid_align-spread, .slds-grid--align-spread { justify-content: space-between; } .slds-grid_align-spread .slds-col, .slds-grid--align-spread .slds-col, .slds-grid_align-spread .slds-col_padded-around-medium, .slds-grid--align-spread .slds-col--padded-around-medium, .slds-grid_align-spread .slds-col_padded-medium, .slds-grid--align-spread .slds-col--padded-medium, .slds-grid_align-spread .slds-col_padded-around-large, .slds-grid--align-spread .slds-col--padded-around-large, .slds-grid_align-spread .slds-col_padded-large, .slds-grid--align-spread .slds-col--padded-large, .slds-grid_align-spread .slds-col_padded-around, .slds-grid--align-spread .slds-col--padded-around, .slds-grid_align-spread .slds-col_padded, .slds-grid--align-spread .slds-col--padded { flex-grow: 0; } .slds-grid_align-end, .slds-grid--align-end { justify-content: flex-end; } .slds-grid_align-end .slds-col, .slds-grid--align-end .slds-col, .slds-grid_align-end .slds-col_padded-around-medium, .slds-grid--align-end .slds-col--padded-around-medium, .slds-grid_align-end .slds-col_padded-medium, .slds-grid--align-end .slds-col--padded-medium, .slds-grid_align-end .slds-col_padded-around-large, .slds-grid--align-end .slds-col--padded-around-large, .slds-grid_align-end .slds-col_padded-large, .slds-grid--align-end .slds-col--padded-large, .slds-grid_align-end .slds-col_padded-around, .slds-grid--align-end .slds-col--padded-around, .slds-grid_align-end .slds-col_padded, .slds-grid--align-end .slds-col--padded { flex-grow: 0; } .slds-grid_vertical-align-start, .slds-grid--vertical-align-start { align-items: flex-start; align-content: flex-start; } .slds-grid_vertical-align-center, .slds-grid--vertical-align-center { align-items: center; align-content: center; } .slds-grid_vertical-align-end, .slds-grid--vertical-align-end { align-items: flex-end; align-content: flex-end; } .slds-align-top { vertical-align: top; align-self: flex-start; } .slds-align-middle { vertical-align: middle; align-self: center; } .slds-align-bottom { vertical-align: bottom; align-self: flex-end; } .slds-col_bump-top, .slds-col--bump-top { margin-block-start: auto; } .slds-col_bump-right, .slds-col--bump-right { margin-inline-end: auto; } .slds-col_bump-bottom, .slds-col--bump-bottom { margin-block-end: auto; } .slds-col_bump-left, .slds-col--bump-left { margin-inline-start: auto; } .slds-grid_vertical-stretch, .slds-grid--vertical-stretch { align-items: stretch; align-content: stretch; } .slds-container_small, .slds-container--small { max-width: 30rem; } .slds-container_medium, .slds-container--medium { max-width: 48rem; } .slds-container_large, .slds-container--large { max-width: 64rem; } .slds-container_x-large, .slds-container--x-large { max-width: 80rem; } .slds-container_fluid, .slds-container--fluid { width: 100%; } .slds-container_center, .slds-container--center { margin-inline-start: auto; margin-inline-end: auto; } .slds-container_left, .slds-container--left { margin-inline-end: auto; } .slds-container_right, .slds-container--right { margin-inline-start: auto; } .slds-grid_overflow, .slds-grid--overflow { flex-flow: row nowrap; } .slds-grid_overflow .slds-col, .slds-grid--overflow .slds-col { min-width: 11.25em; max-width: 22.5em; } .slds-col_padded, .slds-col--padded { padding-inline: var(--slds-g-spacing-3); } .slds-col_padded-medium, .slds-col--padded-medium { padding-inline: var(--slds-g-spacing-4); } .slds-col_padded-large, .slds-col--padded-large { padding-inline: var(--slds-g-spacing-5); } .slds-col_padded-around, .slds-col--padded-around { padding: var(--slds-g-spacing-3); } .slds-col_padded-around-medium, .slds-col--padded-around-medium { padding: var(--slds-g-spacing-4); } .slds-col_padded-around-large, .slds-col--padded-around-large { padding: var(--slds-g-spacing-5); } .slds-align_absolute-center, .slds-align--absolute-center { display: flex; justify-content: center; align-content: center; align-items: center; margin: auto; } .slds-media { display: flex; align-items: flex-start; } .slds-media__figure { flex-shrink: 0; margin-inline-end: var(--slds-g-spacing-3); } .slds-media__figure_fixed-width, .slds-media__figure--fixed-width { min-width: var(--slds-g-sizing-10); } .slds-media__body { flex: 1; min-width: 0; } .slds-media__body, .slds-media__body > :last-child { margin-block-end: 0; } .slds-media-body-iefix { flex-shrink: 0; flex-basis: auto; } .slds-media_small .slds-media__figure, .slds-media--small .slds-media__figure, .slds-media--small .slds-media__figure { margin-inline-end: var(--slds-g-spacing-2); } .slds-media_small .slds-media__figure_reverse, .slds-media--small .slds-media__figure--reverse, .slds-media--small .slds-media__figure--reverse { margin-inline-start: var(--slds-g-spacing-2); } .slds-media_large .slds-media__figure, .slds-media--large .slds-media__figure, .slds-media--large .slds-media__figure { margin-inline-end: var(--slds-g-spacing-5); } .slds-media_large .slds-media__figure_reverse, .slds-media--large .slds-media__figure--reverse, .slds-media--large .slds-media__figure--reverse { margin-inline-start: var(--slds-g-spacing-5); } .slds-media_inline .slds-media__body, .slds-media--inline .slds-media__body { flex: 0 1 auto; } .slds-media_center, .slds-media--center, .slds-media--center { align-items: center; } .slds-media__figure_reverse, .slds-media__figure--reverse, .slds-media__figure--reverse { margin: 0; margin-inline-start: var(--slds-g-spacing-3); } [class*='slds-var-m-'] { --_slds-g-spacing-var-block-1: var(--lwc-varSpacingVerticalXxSmall); --_slds-g-spacing-var-block-2: var(--lwc-varSpacingVerticalXSmall); --_slds-g-spacing-var-block-3: var(--lwc-varSpacingVerticalSmall); --_slds-g-spacing-var-block-4: var(--lwc-varSpacingVerticalMedium); --_slds-g-spacing-var-block-5: var(--lwc-varSpacingVerticalLarge); --_slds-g-spacing-var-block-6: var(--lwc-varSpacingVerticalXLarge); --_slds-g-spacing-var-block-7: var(--lwc-varSpacingVerticalXxLarge); --_slds-g-spacing-var-inline-1: var(--lwc-varSpacingHorizontalXxSmall); --_slds-g-spacing-var-inline-2: var(--lwc-varSpacingHorizontalXSmall); --_slds-g-spacing-var-inline-3: var(--lwc-varSpacingHorizontalSmall); --_slds-g-spacing-var-inline-4: var(--lwc-varSpacingHorizontalMedium); --_slds-g-spacing-var-inline-5: var(--lwc-varSpacingHorizontalLarge); --_slds-g-spacing-var-inline-6: var(--lwc-varSpacingHorizontalXLarge); --_slds-g-spacing-var-inline-7: var(--lwc-varSpacingHorizontalXxLarge); --_slds-g-spacing-var-1: var(--lwc-varSpacingXxSmall); --_slds-g-spacing-var-2: var(--lwc-varSpacingXSmall); --_slds-g-spacing-var-3: var(--lwc-varSpacingSmall); --_slds-g-spacing-var-4: var(--lwc-varSpacingMedium); --_slds-g-spacing-var-5: var(--lwc-varSpacingLarge); --_slds-g-spacing-var-6: var(--lwc-varSpacingXLarge); --_slds-g-spacing-var-7: var(--lwc-varSpacingXxLarge); } .slds-m-top_none, .slds-m-top--none { margin-block-start: 0 !important; } .slds-m-top_xxx-small, .slds-m-top--xxx-small { margin-block-start: 0.125rem; } .slds-m-top_xx-small, .slds-m-top--xx-small { margin-block-start: var(--slds-g-spacing-1); } .slds-m-top_x-small, .slds-m-top--x-small { margin-block-start: var(--slds-g-spacing-2); } .slds-m-top_small, .slds-m-top--small { margin-block-start: var(--slds-g-spacing-3); } .slds-m-top_medium, .slds-m-top--medium { margin-block-start: var(--slds-g-spacing-4); } .slds-m-top_large, .slds-m-top--large { margin-block-start: var(--slds-g-spacing-5); } .slds-m-top_x-large, .slds-m-top--x-large { margin-block-start: var(--slds-g-spacing-6); } .slds-m-top_xx-large, .slds-m-top--xx-large { margin-block-start: var(--slds-g-spacing-8); } .slds-var-m-top_xxx-small, .slds-var-m-top--xxx-small { margin-block-start: var(--lwc-varSpacingVerticalXxxSmall); } .slds-var-m-top_xx-small, .slds-var-m-top--xx-small { margin-block-start: var(--_slds-g-spacing-var-block-1); } .slds-var-m-top_x-small, .slds-var-m-top--x-small { margin-block-start: var(--_slds-g-spacing-var-block-2); } .slds-var-m-top_small, .slds-var-m-top--small { margin-block-start: var(--_slds-g-spacing-var-block-3); } .slds-var-m-top_medium, .slds-var-m-top--medium { margin-block-start: var(--_slds-g-spacing-var-block-4); } .slds-var-m-top_large, .slds-var-m-top--large { margin-block-start: var(--_slds-g-spacing-var-block-5); } .slds-var-m-top_x-large, .slds-var-m-top--x-large { margin-block-start: var(--_slds-g-spacing-var-block-6); } .slds-var-m-top_xx-large, .slds-var-m-top--xx-large { margin-block-start: var(--_slds-g-spacing-var-block-7); } .slds-m-right_none, .slds-m-right--none { margin-inline-end: 0 !important; } .slds-m-right_xxx-small, .slds-m-right--xxx-small { margin-inline-end: 0.125rem; } .slds-m-right_xx-small, .slds-m-right--xx-small { margin-inline-end: var(--slds-g-spacing-1); } .slds-m-right_x-small, .slds-m-right--x-small { margin-inline-end: var(--slds-g-spacing-2); } .slds-m-right_small, .slds-m-right--small { margin-inline-end: var(--slds-g-spacing-3); } .slds-m-right_medium, .slds-m-right--medium { margin-inline-end: var(--slds-g-spacing-4); } .slds-m-right_large, .slds-m-right--large { margin-inline-end: var(--slds-g-spacing-5); } .slds-m-right_x-large, .slds-m-right--x-large { margin-inline-end: var(--slds-g-spacing-6); } .slds-m-right_xx-large, .slds-m-right--xx-large { margin-inline-end: var(--slds-g-spacing-8); } .slds-var-m-right_xxx-small, .slds-var-m-right--xxx-small { margin-inline-end: var(--lwc-varSpacingHorizontalXxxSmall); } .slds-var-m-right_xx-small, .slds-var-m-right--xx-small { margin-inline-end: var(--_slds-g-spacing-var-inline-1); } .slds-var-m-right_x-small, .slds-var-m-right--x-small { margin-inline-end: var(--_slds-g-spacing-var-inline-2); } .slds-var-m-right_small, .slds-var-m-right--small { margin-inline-end: var(--_slds-g-spacing-var-inline-3); } .slds-var-m-right_medium, .slds-var-m-right--medium { margin-inline-end: var(--_slds-g-spacing-var-inline-4); } .slds-var-m-right_large, .slds-var-m-right--large { margin-inline-end: var(--_slds-g-spacing-var-inline-5); } .slds-var-m-right_x-large, .slds-var-m-right--x-large { margin-inline-end: var(--_slds-g-spacing-var-inline-6); } .slds-var-m-right_xx-large, .slds-var-m-right--xx-large { margin-inline-end: var(--_slds-g-spacing-var-inline-7); } .slds-m-bottom_none, .slds-m-bottom--none { margin-block-end: 0 !important; } .slds-m-bottom_xxx-small, .slds-m-bottom--xxx-small { margin-block-end: 0.125rem; } .slds-m-bottom_xx-small, .slds-m-bottom--xx-small { margin-block-end: var(--slds-g-spacing-1); } .slds-m-bottom_x-small, .slds-m-bottom--x-small { margin-block-end: var(--slds-g-spacing-2); } .slds-m-bottom_small, .slds-m-bottom--small { margin-block-end: var(--slds-g-spacing-3); } .slds-m-bottom_medium, .slds-m-bottom--medium { margin-block-end: var(--slds-g-spacing-4); } .slds-m-bottom_large, .slds-m-bottom--large { margin-block-end: var(--slds-g-spacing-5); } .slds-m-bottom_x-large, .slds-m-bottom--x-large { margin-block-end: var(--slds-g-spacing-6); } .slds-m-bottom_xx-large, .slds-m-bottom--xx-large { margin-block-end: var(--slds-g-spacing-8); } .slds-var-m-bottom_xxx-small, .slds-var-m-bottom--xxx-small { margin-block-end: var(--lwc-varSpacingVerticalXxxSmall); } .slds-var-m-bottom_xx-small, .slds-var-m-bottom--xx-small { margin-block-end: var(--_slds-g-spacing-var-block-1); } .slds-var-m-bottom_x-small, .slds-var-m-bottom--x-small { margin-block-end: var(--_slds-g-spacing-var-block-2); } .slds-var-m-bottom_small, .slds-var-m-bottom--small { margin-block-end: var(--_slds-g-spacing-var-block-3); } .slds-var-m-bottom_medium, .slds-var-m-bottom--medium { margin-block-end: var(--_slds-g-spacing-var-block-5); } .slds-var-m-bottom_large, .slds-var-m-bottom--large { margin-block-end: var(--_slds-g-spacing-var-block-6); } .slds-var-m-bottom_x-large, .slds-var-m-bottom--x-large { margin-block-end: var(--_slds-g-spacing-var-block-6); } .slds-var-m-bottom_xx-large, .slds-var-m-bottom--xx-large { margin-block-end: var(--_slds-g-spacing-var-block-7); } .slds-m-left_none, .slds-m-left--none { margin-inline-start: 0 !important; } .slds-m-left_xxx-small, .slds-m-left--xxx-small { margin-inline-start: 0.125rem; } .slds-m-left_xx-small, .slds-m-left--xx-small { margin-inline-start: var(--slds-g-spacing-1); } .slds-m-left_x-small, .slds-m-left--x-small { margin-inline-start: var(--slds-g-spacing-2); } .slds-m-left_small, .slds-m-left--small { margin-inline-start: var(--slds-g-spacing-3); } .slds-m-left_medium, .slds-m-left--medium { margin-inline-start: var(--slds-g-spacing-4); } .slds-m-left_large, .slds-m-left--large { margin-inline-start: var(--slds-g-spacing-5); } .slds-m-left_x-large, .slds-m-left--x-large { margin-inline-start: var(--slds-g-spacing-6); } .slds-m-left_xx-large, .slds-m-left--xx-large { margin-inline-start: var(--slds-g-spacing-8); } .slds-var-m-left_xxx-small, .slds-var-m-left--xxx-small { margin-inline-start: var(--lwc-varSpacingHorizontalXxxSmall); } .slds-var-m-left_xx-small, .slds-var-m-left--xx-small { margin-inline-start: var(--_slds-g-spacing-var-inline-1); } .slds-var-m-left_x-small, .slds-var-m-left--x-small { margin-inline-start: var(--_slds-g-spacing-var-inline-2); } .slds-var-m-left_small, .slds-var-m-left--small { margin-inline-start: var(--_slds-g-spacing-var-inline-3); } .slds-var-m-left_medium, .slds-var-m-left--medium { margin-inline-start: var(--_slds-g-spacing-var-inline-4); } .slds-var-m-left_large, .slds-var-m-left--large { margin-inline-start: var(--_slds-g-spacing-var-inline-5); } .slds-var-m-left_x-large, .slds-var-m-left--x-large { margin-inline-start: var(--_slds-g-spacing-var-inline-6); } .slds-var-m-left_xx-large, .slds-var-m-left--xx-large { margin-inline-start: var(--_slds-g-spacing-var-inline-7); } .slds-m-horizontal_none, .slds-m-horizontal--none { margin-inline-start: 0 !important; margin-inline-end: 0 !important; } .slds-m-horizontal_xxx-small, .slds-m-horizontal--xxx-small { margin-inline-start: 0.125rem; margin-inline-end: 0.125rem; } .slds-m-horizontal_xx-small, .slds-m-horizontal--xx-small { margin-inline-start: var(--slds-g-spacing-1); margin-inline-end: var(--slds-g-spacing-1); } .slds-m-horizontal_x-small, .slds-m-horizontal--x-small { margin-inline-start: var(--slds-g-spacing-2); margin-inline-end: var(--slds-g-spacing-2); } .slds-m-horizontal_small, .slds-m-horizontal--small { margin-inline-start: var(--slds-g-spacing-3); margin-inline-end: var(--slds-g-spacing-3); } .slds-m-horizontal_medium, .slds-m-horizontal--medium { margin-inline-start: var(--slds-g-spacing-4); margin-inline-end: var(--slds-g-spacing-4); } .slds-m-horizontal_large, .slds-m-horizontal--large { margin-inline-start: var(--slds-g-spacing-5); margin-inline-end: var(--slds-g-spacing-5); } .slds-m-horizontal_x-large, .slds-m-horizontal--x-large { margin-inline-start: var(--slds-g-spacing-6); margin-inline-end: var(--slds-g-spacing-6); } .slds-m-horizontal_xx-large, .slds-m-horizontal--xx-large { margin-inline-start: var(--slds-g-spacing-8); margin-inline-end: var(--slds-g-spacing-8); } .slds-var-m-horizontal_xxx-small, .slds-var-m-horizontal--xxx-small { margin-inline-start: var(--lwc-varSpacingHorizontalXxxSmall); margin-inline-end: var(--lwc-varSpacingHorizontalXxxSmall); } .slds-var-m-horizontal_xx-small, .slds-var-m-horizontal--xx-small { margin-inline-start: var(--_slds-g-spacing-var-inline-1); margin-inline-end: var(--_slds-g-spacing-var-inline-1); } .slds-var-m-horizontal_x-small, .slds-var-m-horizontal--x-small { margin-inline-start: var(--_slds-g-spacing-var-inline-2); margin-inline-end: var(--_slds-g-spacing-var-inline-2); } .slds-var-m-horizontal_small, .slds-var-m-horizontal--small { margin-inline-start: var(--_slds-g-spacing-var-inline-3); margin-inline-end: var(--_slds-g-spacing-var-inline-3); } .slds-var-m-horizontal_medium, .slds-var-m-horizontal--medium { margin-inline-start: var(--_slds-g-spacing-var-inline-4); margin-inline-end: var(--_slds-g-spacing-var-inline-4); } .slds-var-m-horizontal_large, .slds-var-m-horizontal--large { margin-inline-start: var(--_slds-g-spacing-var-inline-5); margin-inline-end: var(--_slds-g-spacing-var-inline-5); } .slds-var-m-horizontal_x-large, .slds-var-m-horizontal--x-large { margin-inline-start: var(--_slds-g-spacing-var-inline-6); margin-inline-end: var(--_slds-g-spacing-var-inline-6); } .slds-var-m-horizontal_xx-large, .slds-var-m-horizontal--xx-large { margin-inline-start: var(--_slds-g-spacing-var-inline-7); margin-inline-end: var(--_slds-g-spacing-var-inline-7); } .slds-m-vertical_none, .slds-m-vertical--none { margin-block-start: 0 !important; margin-block-end: 0 !important; } .slds-m-vertical_xxx-small, .slds-m-vertical--xxx-small { margin-block-start: 0.125rem; margin-block-end: 0.125rem; } .slds-m-vertical_xx-small, .slds-m-vertical--xx-small { margin-block-start: var(--slds-g-spacing-1); margin-block-end: var(--slds-g-spacing-1); } .slds-m-vertical_x-small, .slds-m-vertical--x-small { margin-block-start: var(--slds-g-spacing-2); margin-block-end: var(--slds-g-spacing-2); } .slds-m-vertical_small, .slds-m-vertical--small { margin-block-start: var(--slds-g-spacing-3); margin-block-end: var(--slds-g-spacing-3); } .slds-m-vertical_medium, .slds-m-vertical--medium { margin-block-start: var(--slds-g-spacing-4); margin-block-end: var(--slds-g-spacing-4); } .slds-m-vertical_large, .slds-m-vertical--large { margin-block-start: var(--slds-g-spacing-5); margin-block-end: var(--slds-g-spacing-5); } .slds-m-vertical_x-large, .slds-m-vertical--x-large { margin-block-start: var(--slds-g-spacing-6); margin-block-end: var(--slds-g-spacing-6); } .slds-m-vertical_xx-large, .slds-m-vertical--xx-large { margin-block-start: var(--slds-g-spacing-8); margin-block-end: var(--slds-g-spacing-8); } .slds-var-m-vertical_xxx-small, .slds-var-m-vertical--xxx-small { margin-block-start: var(--lwc-varSpacingVerticalXxxSmall); margin-block-end: var(--lwc-varSpacingVerticalXxxSmall); } .slds-var-m-vertical_xx-small, .slds-var-m-vertical--xx-small { margin-block-start: var(--_slds-g-spacing-var-block-1); margin-block-end: var(--_slds-g-spacing-var-block-1); } .slds-var-m-vertical_x-small, .slds-var-m-vertical--x-small { margin-block-start: var(--_slds-g-spacing-var-block-2); margin-block-end: var(--_slds-g-spacing-var-block-2); } .slds-var-m-vertical_small, .slds-var-m-vertical--small { margin-block-start: var(--_slds-g-spacing-var-block-3); margin-block-end: var(--_slds-g-spacing-var-block-3); } .slds-var-m-vertical_medium, .slds-var-m-vertical--medium { margin-block-start: var(--_slds-g-spacing-var-block-4); margin-block-end: var(--_slds-g-spacing-var-block-4); } .slds-var-m-vertical_large, .slds-var-m-vertical--large { margin-block-start: var(--_slds-g-spacing-var-block-5); margin-block-end: var(--_slds-g-spacing-var-block-5); } .slds-var-m-vertical_x-large, .slds-var-m-vertical--x-large { margin-block-start: var(--_slds-g-spacing-var-block-6); margin-block-end: var(--_slds-g-spacing-var-block-6); } .slds-var-m-vertical_xx-large, .slds-var-m-vertical--xx-large { margin-block-start: var(--_slds-g-spacing-var-block-7); margin-block-end: var(--_slds-g-spacing-var-block-7); } .slds-m-around_none, .slds-m-around--none { margin: 0 !important; } .slds-m-around_xxx-small, .slds-m-around--xxx-small { margin: 0.125rem; } .slds-m-around_xx-small, .slds-m-around--xx-small { margin: var(--slds-g-spacing-1); } .slds-m-around_x-small, .slds-m-around--x-small { margin: var(--slds-g-spacing-2); } .slds-m-around_small, .slds-m-around--small { margin: var(--slds-g-spacing-3); } .slds-m-around_medium, .slds-m-around--medium { margin: var(--slds-g-spacing-4); } .slds-m-around_large, .slds-m-around--large { margin: var(--slds-g-spacing-5); } .slds-m-around_x-large, .slds-m-around--x-large { margin: var(--slds-g-spacing-6); } .slds-m-around_xx-large, .slds-m-around--xx-large { margin: var(--slds-g-spacing-8); } .slds-var-m-around_xxx-small, .slds-var-m-around--xxx-small { margin: var(--lwc-varSpacingXxxSmall); } .slds-var-m-around_xx-small, .slds-var-m-around--xx-small { margin: var(--_slds-g-spacing-var-1); } .slds-var-m-around_x-small, .slds-var-m-around--x-small { margin: var(--_slds-g-spacing-var-2); } .slds-var-m-around_small, .slds-var-m-around--small { margin: var(--_slds-g-spacing-var-3); } .slds-var-m-around_medium, .slds-var-m-around--medium { margin: var(--_slds-g-spacing-var-4); } .slds-var-m-around_large, .slds-var-m-around--large { margin: var(--_slds-g-spacing-var-5); } .slds-var-m-around_x-large, .slds-var-m-around--x-large { margin: var(--_slds-g-spacing-var-6); } .slds-var-m-around_xx-large, .slds-var-m-around--xx-large { margin: var(--_slds-g-spacing-var-7); } [class*='slds-var-p-'] { --_slds-g-spacing-var-block-1: var(--lwc-varSpacingVerticalXxSmall); --_slds-g-spacing-var-block-2: var(--lwc-varSpacingVerticalXSmall); --_slds-g-spacing-var-block-3: var(--lwc-varSpacingVerticalSmall); --_slds-g-spacing-var-block-4: var(--lwc-varSpacingVerticalMedium); --_slds-g-spacing-var-block-5: var(--lwc-varSpacingVerticalLarge); --_slds-g-spacing-var-block-6: var(--lwc-varSpacingVerticalXLarge); --_slds-g-spacing-var-block-7: var(--lwc-varSpacingVerticalXxLarge); --_slds-g-spacing-var-inline-1: var(--lwc-varSpacingHorizontalXxSmall); --_slds-g-spacing-var-inline-2: var(--lwc-varSpacingHorizontalXSmall); --_slds-g-spacing-var-inline-3: var(--lwc-varSpacingHorizontalSmall); --_slds-g-spacing-var-inline-4: var(--lwc-varSpacingHorizontalMedium); --_slds-g-spacing-var-inline-5: var(--lwc-varSpacingHorizontalLarge); --_slds-g-spacing-var-inline-6: var(--lwc-varSpacingHorizontalXLarge); --_slds-g-spacing-var-inline-7: var(--lwc-varSpacingHorizontalXxLarge); --_slds-g-spacing-var-1: var(--lwc-varSpacingXxSmall); --_slds-g-spacing-var-2: var(--lwc-varSpacingXSmall); --_slds-g-spacing-var-3: var(--lwc-varSpacingSmall); --_slds-g-spacing-var-4: var(--lwc-varSpacingMedium); --_slds-g-spacing-var-5: var(--lwc-varSpacingLarge); --_slds-g-spacing-var-6: var(--lwc-varSpacingXLarge); --_slds-g-spacing-var-7: var(--lwc-varSpacingXxLarge); } .slds-p-top_none, .slds-p-top--none { padding-block-start: 0 !important; } .slds-p-top_xxx-small, .slds-p-top--xxx-small { padding-block-start: 0.125rem; } .slds-p-top_xx-small, .slds-p-top--xx-small { padding-block-start: var(--slds-g-spacing-1); } .slds-p-top_x-small, .slds-p-top--x-small { padding-block-start: var(--slds-g-spacing-2); } .slds-p-top_small, .slds-p-top--small { padding-block-start: var(--slds-g-spacing-3); } .slds-p-top_medium, .slds-p-top--medium { padding-block-start: var(--slds-g-spacing-4); } .slds-p-top_large, .slds-p-top--large { padding-block-start: var(--slds-g-spacing-5); } .slds-p-top_x-large, .slds-p-top--x-large { padding-block-start: var(--slds-g-spacing-6); } .slds-p-top_xx-large, .slds-p-top--xx-large { padding-block-start: var(--slds-g-spacing-8); } .slds-var-p-top_xxx-small, .slds-var-p-top--xxx-small { padding-block-start: var(--lwc-varSpacingVerticalXxxSmall); } .slds-var-p-top_xx-small, .slds-var-p-top--xx-small { padding-block-start: var(--_slds-g-spacing-var-block-1); } .slds-var-p-top_x-small, .slds-var-p-top--x-small { padding-block-start: var(--_slds-g-spacing-var-block-2); } .slds-var-p-top_small, .slds-var-p-top--small { padding-block-start: var(--_slds-g-spacing-var-block-3); } .slds-var-p-top_medium, .slds-var-p-top--medium { padding-block-start: var(--_slds-g-spacing-var-block-4); } .slds-var-p-top_large, .slds-var-p-top--large { padding-block-start: var(--_slds-g-spacing-var-block-5); } .slds-var-p-top_x-large, .slds-var-p-top--x-large { padding-block-start: var(--_slds-g-spacing-var-block-6); } .slds-var-p-top_xx-large, .slds-var-p-top--xx-large { padding-block-start: var(--_slds-g-spacing-var-block-7); } .slds-p-right_none, .slds-p-right--none { padding-inline-end: 0 !important; } .slds-p-right_xxx-small, .slds-p-right--xxx-small { padding-inline-end: 0.125rem; } .slds-p-right_xx-small, .slds-p-right--xx-small { padding-inline-end: var(--slds-g-spacing-1); } .slds-p-right_x-small, .slds-p-right--x-small { padding-inline-end: var(--slds-g-spacing-2); } .slds-p-right_small, .slds-p-right--small { padding-inline-end: var(--slds-g-spacing-3); } .slds-p-right_medium, .slds-p-right--medium { padding-inline-end: var(--slds-g-spacing-4); } .slds-p-right_large, .slds-p-right--large { padding-inline-end: var(--slds-g-spacing-5); } .slds-p-right_x-large, .slds-p-right--x-large { padding-inline-end: var(--slds-g-spacing-6); } .slds-p-right_xx-large, .slds-p-right--xx-large { padding-inline-end: var(--slds-g-spacing-8); } .slds-var-p-right_xxx-small, .slds-var-p-right--xxx-small { padding-inline-end: var(--lwc-varSpacingHorizontalXxxSmall); } .slds-var-p-right_xx-small, .slds-var-p-right--xx-small { padding-inline-end: var(--_slds-g-spacing-var-inline-1); } .slds-var-p-right_x-small, .slds-var-p-right--x-small { padding-inline-end: var(--_slds-g-spacing-var-inline-2); } .slds-var-p-right_small, .slds-var-p-right--small { padding-inline-end: var(--_slds-g-spacing-var-inline-3); } .slds-var-p-right_medium, .slds-var-p-right--medium { padding-inline-end: var(--_slds-g-spacing-var-inline-4); } .slds-var-p-right_large, .slds-var-p-right--large { padding-inline-end: var(--_slds-g-spacing-var-inline-5); } .slds-var-p-right_x-large, .slds-var-p-right--x-large { padding-inline-end: var(--_slds-g-spacing-var-inline-6); } .slds-var-p-right_xx-large, .slds-var-p-right--xx-large { padding-inline-end: var(--_slds-g-spacing-var-inline-7); } .slds-p-bottom_none, .slds-p-bottom--none { padding-block-end: 0 !important; } .slds-p-bottom_xxx-small, .slds-p-bottom--xxx-small { padding-block-end: 0.125rem; } .slds-p-bottom_xx-small, .slds-p-bottom--xx-small { padding-block-end: var(--slds-g-spacing-1); } .slds-p-bottom_x-small, .slds-p-bottom--x-small { padding-block-end: var(--slds-g-spacing-2); } .slds-p-bottom_small, .slds-p-bottom--small { padding-block-end: var(--slds-g-spacing-3); } .slds-p-bottom_medium, .slds-p-bottom--medium { padding-block-end: var(--slds-g-spacing-4); } .slds-p-bottom_large, .slds-p-bottom--large { padding-block-end: var(--slds-g-spacing-5); } .slds-p-bottom_x-large, .slds-p-bottom--x-large { padding-block-end: var(--slds-g-spacing-6); } .slds-p-bottom_xx-large, .slds-p-bottom--xx-large { padding-block-end: var(--slds-g-spacing-8); } .slds-var-p-bottom_xxx-small, .slds-var-p-bottom--xxx-small { padding-block-end: var(--lwc-varSpacingVerticalXxxSmall); } .slds-var-p-bottom_xx-small, .slds-var-p-bottom--xx-small { padding-block-end: var(--_slds-g-spacing-var-block-1); } .slds-var-p-bottom_x-small, .slds-var-p-bottom--x-small { padding-block-end: var(--_slds-g-spacing-var-block-2); } .slds-var-p-bottom_small, .slds-var-p-bottom--small { padding-block-end: var(--_slds-g-spacing-var-block-3); } .slds-var-p-bottom_medium, .slds-var-p-bottom--medium { padding-block-end: var(--_slds-g-spacing-var-block-5); } .slds-var-p-bottom_large, .slds-var-p-bottom--large { padding-block-end: var(--_slds-g-spacing-var-block-6); } .slds-var-p-bottom_x-large, .slds-var-p-bottom--x-large { padding-block-end: var(--_slds-g-spacing-var-block-6); } .slds-var-p-bottom_xx-large, .slds-var-p-bottom--xx-large { padding-block-end: var(--_slds-g-spacing-var-block-7); } .slds-p-left_none, .slds-p-left--none { padding-inline-start: 0 !important; } .slds-p-left_xxx-small, .slds-p-left--xxx-small { padding-inline-start: 0.125rem; } .slds-p-left_xx-small, .slds-p-left--xx-small { padding-inline-start: var(--slds-g-spacing-1); } .slds-p-left_x-small, .slds-p-left--x-small { padding-inline-start: var(--slds-g-spacing-2); } .slds-p-left_small, .slds-p-left--small { padding-inline-start: var(--slds-g-spacing-3); } .slds-p-left_medium, .slds-p-left--medium { padding-inline-start: var(--slds-g-spacing-4); } .slds-p-left_large, .slds-p-left--large { padding-inline-start: var(--slds-g-spacing-5); } .slds-p-left_x-large, .slds-p-left--x-large { padding-inline-start: var(--slds-g-spacing-6); } .slds-p-left_xx-large, .slds-p-left--xx-large { padding-inline-start: var(--slds-g-spacing-8); } .slds-var-p-left_xxx-small, .slds-var-p-left--xxx-small { padding-inline-start: var(--lwc-varSpacingHorizontalXxxSmall); } .slds-var-p-left_xx-small, .slds-var-p-left--xx-small { padding-inline-start: var(--_slds-g-spacing-var-inline-1); } .slds-var-p-left_x-small, .slds-var-p-left--x-small { padding-inline-start: var(--_slds-g-spacing-var-inline-2); } .slds-var-p-left_small, .slds-var-p-left--small { padding-inline-start: var(--_slds-g-spacing-var-inline-3); } .slds-var-p-left_medium, .slds-var-p-left--medium { padding-inline-start: var(--_slds-g-spacing-var-inline-4); } .slds-var-p-left_large, .slds-var-p-left--large { padding-inline-start: var(--_slds-g-spacing-var-inline-5); } .slds-var-p-left_x-large, .slds-var-p-left--x-large { padding-inline-start: var(--_slds-g-spacing-var-inline-6); } .slds-var-p-left_xx-large, .slds-var-p-left--xx-large { padding-inline-start: var(--_slds-g-spacing-var-inline-7); } .slds-p-horizontal_none, .slds-p-horizontal--none { padding-inline-start: 0 !important; padding-inline-end: 0 !important; } .slds-p-horizontal_xxx-small, .slds-p-horizontal--xxx-small { padding-inline-start: 0.125rem; padding-inline-end: 0.125rem; } .slds-p-horizontal_xx-small, .slds-p-horizontal--xx-small { padding-inline-start: var(--slds-g-spacing-1); padding-inline-end: var(--slds-g-spacing-1); } .slds-p-horizontal_x-small, .slds-p-horizontal--x-small { padding-inline-start: var(--slds-g-spacing-2); padding-inline-end: var(--slds-g-spacing-2); } .slds-p-horizontal_small, .slds-p-horizontal--small { padding-inline-start: var(--slds-g-spacing-3); padding-inline-end: var(--slds-g-spacing-3); } .slds-p-horizontal_medium, .slds-p-horizontal--medium { padding-inline-start: var(--slds-g-spacing-4); padding-inline-end: var(--slds-g-spacing-4); } .slds-p-horizontal_large, .slds-p-horizontal--large { padding-inline-start: var(--slds-g-spacing-5); padding-inline-end: var(--slds-g-spacing-5); } .slds-p-horizontal_x-large, .slds-p-horizontal--x-large { padding-inline-start: var(--slds-g-spacing-6); padding-inline-end: var(--slds-g-spacing-6); } .slds-p-horizontal_xx-large, .slds-p-horizontal--xx-large { padding-inline-start: var(--slds-g-spacing-8); padding-inline-end: var(--slds-g-spacing-8); } .slds-var-p-horizontal_xxx-small, .slds-var-p-horizontal--xxx-small { padding-inline-start: var(--lwc-varSpacingHorizontalXxxSmall); padding-inline-end: var(--lwc-varSpacingHorizontalXxxSmall); } .slds-var-p-horizontal_xx-small, .slds-var-p-horizontal--xx-small { padding-inline-start: var(--_slds-g-spacing-var-inline-1); padding-inline-end: var(--_slds-g-spacing-var-inline-1); } .slds-var-p-horizontal_x-small, .slds-var-p-horizontal--x-small { padding-inline-start: var(--_slds-g-spacing-var-inline-2); padding-inline-end: var(--_slds-g-spacing-var-inline-2); } .slds-var-p-horizontal_small, .slds-var-p-horizontal--small { padding-inline-start: var(--_slds-g-spacing-var-inline-3); padding-inline-end: var(--_slds-g-spacing-var-inline-3); } .slds-var-p-horizontal_medium, .slds-var-p-horizontal--medium { padding-inline-start: var(--_slds-g-spacing-var-inline-4); padding-inline-end: var(--_slds-g-spacing-var-inline-4); } .slds-var-p-horizontal_large, .slds-var-p-horizontal--large { padding-inline-start: var(--_slds-g-spacing-var-inline-5); padding-inline-end: var(--_slds-g-spacing-var-inline-5); } .slds-var-p-horizontal_x-large, .slds-var-p-horizontal--x-large { padding-inline-start: var(--_slds-g-spacing-var-inline-6); padding-inline-end: var(--_slds-g-spacing-var-inline-6); } .slds-var-p-horizontal_xx-large, .slds-var-p-horizontal--xx-large { padding-inline-start: var(--_slds-g-spacing-var-inline-7); padding-inline-end: var(--_slds-g-spacing-var-inline-7); } .slds-p-vertical_none, .slds-p-vertical--none { padding-block-start: 0 !important; padding-block-end: 0 !important; } .slds-p-vertical_xxx-small, .slds-p-vertical--xxx-small { padding-block-start: 0.125rem; padding-block-end: 0.125rem; } .slds-p-vertical_xx-small, .slds-p-vertical--xx-small { padding-block-start: var(--slds-g-spacing-1); padding-block-end: var(--slds-g-spacing-1); } .slds-p-vertical_x-small, .slds-p-vertical--x-small { padding-block-start: var(--slds-g-spacing-2); padding-block-end: var(--slds-g-spacing-2); } .slds-p-vertical_small, .slds-p-vertical--small { padding-block-start: var(--slds-g-spacing-3); padding-block-end: var(--slds-g-spacing-3); } .slds-p-vertical_medium, .slds-p-vertical--medium { padding-block-start: var(--slds-g-spacing-4); padding-block-end: var(--slds-g-spacing-4); } .slds-p-vertical_large, .slds-p-vertical--large { padding-block-start: var(--slds-g-spacing-5); padding-block-end: var(--slds-g-spacing-5); } .slds-p-vertical_x-large, .slds-p-vertical--x-large { padding-block-start: var(--slds-g-spacing-6); padding-block-end: var(--slds-g-spacing-6); } .slds-p-vertical_xx-large, .slds-p-vertical--xx-large { padding-block-start: var(--slds-g-spacing-8); padding-block-end: var(--slds-g-spacing-8); } .slds-var-p-vertical_xxx-small, .slds-var-p-vertical--xxx-small { padding-block-start: var(--lwc-varSpacingVerticalXxxSmall); padding-block-end: var(--lwc-varSpacingVerticalXxxSmall); } .slds-var-p-vertical_xx-small, .slds-var-p-vertical--xx-small { padding-block-start: var(--_slds-g-spacing-var-block-1); padding-block-end: var(--_slds-g-spacing-var-block-1); } .slds-var-p-vertical_x-small, .slds-var-p-vertical--x-small { padding-block-start: var(--_slds-g-spacing-var-block-2); padding-block-end: var(--_slds-g-spacing-var-block-2); } .slds-var-p-vertical_small, .slds-var-p-vertical--small { padding-block-start: var(--_slds-g-spacing-var-block-3); padding-block-end: var(--_slds-g-spacing-var-block-3); } .slds-var-p-vertical_medium, .slds-var-p-vertical--medium { padding-block-start: var(--_slds-g-spacing-var-block-4); padding-block-end: var(--_slds-g-spacing-var-block-4); } .slds-var-p-vertical_large, .slds-var-p-vertical--large { padding-block-start: var(--_slds-g-spacing-var-block-5); padding-block-end: var(--_slds-g-spacing-var-block-5); } .slds-var-p-vertical_x-large, .slds-var-p-vertical--x-large { padding-block-start: var(--_slds-g-spacing-var-block-6); padding-block-end: var(--_slds-g-spacing-var-block-6); } .slds-var-p-vertical_xx-large, .slds-var-p-vertical--xx-large { padding-block-start: var(--_slds-g-spacing-var-block-7); padding-block-end: var(--_slds-g-spacing-var-block-7); } .slds-p-around_none, .slds-p-around--none { padding: 0 !important; } .slds-p-around_xxx-small, .slds-p-around--xxx-small { padding: 0.125rem; } .slds-p-around_xx-small, .slds-p-around--xx-small { padding: var(--slds-g-spacing-1); } .slds-p-around_x-small, .slds-p-around--x-small { padding: var(--slds-g-spacing-2); } .slds-p-around_small, .slds-p-around--small { padding: var(--slds-g-spacing-3); } .slds-p-around_medium, .slds-p-around--medium { padding: var(--slds-g-spacing-4); } .slds-p-around_large, .slds-p-around--large { padding: var(--slds-g-spacing-5); } .slds-p-around_x-large, .slds-p-around--x-large { padding: var(--slds-g-spacing-6); } .slds-p-around_xx-large, .slds-p-around--xx-large { padding: var(--slds-g-spacing-8); } .slds-var-p-around_xxx-small, .slds-var-p-around--xxx-small { padding: var(--lwc-varSpacingXxxSmall); } .slds-var-p-around_xx-small, .slds-var-p-around--xx-small { padding: var(--_slds-g-spacing-var-1); } .slds-var-p-around_x-small, .slds-var-p-around--x-small { padding: var(--_slds-g-spacing-var-2); } .slds-var-p-around_small, .slds-var-p-around--small { padding: var(--_slds-g-spacing-var-3); } .slds-var-p-around_medium, .slds-var-p-around--medium { padding: var(--_slds-g-spacing-var-4); } .slds-var-p-around_large, .slds-var-p-around--large { padding: var(--_slds-g-spacing-var-5); } .slds-var-p-around_x-large, .slds-var-p-around--x-large { padding: var(--_slds-g-spacing-var-6); } .slds-var-p-around_xx-large, .slds-var-p-around--xx-large { padding: var(--_slds-g-spacing-var-7); } .slds-has-cushion { padding: var(--slds-g-spacing-4); } .slds-clearfix::after { content: ''; display: table; clear: both; } .slds-clear { clear: both; } .slds-float_left, .slds-float--left { float: inline-start; } .slds-float_none, .slds-float--none { float: none; } .slds-float_right, .slds-float--right { float: inline-end; } .slds-border_bottom, .slds-border--bottom { border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-border_left, .slds-border--left { border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-border_right, .slds-border--right { border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-border_top, .slds-border--top { border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-text-link_reset, .slds-text-link--reset { cursor: pointer; line-height: inherit; font-size: inherit; } .slds-text-link_reset:active, .slds-text-link--reset:active { outline: none; } .slds-text-link_reset, .slds-text-link--reset, .slds-text-link_reset:active, .slds-text-link--reset:active, .slds-text-link_reset:focus, .slds-text-link--reset:focus, .slds-text-link_reset:hover, .slds-text-link--reset:hover { color: inherit; text-decoration: inherit; } .slds-text-link { color: var(--slds-g-color-accent-2); text-decoration: none; transition: color 0.1s linear; } .slds-text-link:hover, .slds-text-link:focus { text-decoration: underline; color: var(--slds-g-color-accent-3); } .slds-text-link:active { color: var(--slds-g-color-accent-3); } .slds-text-link_faux, .slds-text-link--faux, .slds-type-focus { border-block-end: var(--slds-g-sizing-border-1) solid transparent; border-radius: 0; color: currentColor; cursor: pointer; } .slds-text-link_faux:hover, .slds-text-link--faux:hover, .slds-text-link_faux:focus, .slds-text-link--faux:focus, .slds-type-focus:hover, .slds-type-focus:focus { color: currentColor; border-block-end-color: currentColor; } .slds-has-blur-focus { color: currentColor; } .slds-has-blur-focus:hover, .slds-has-blur-focus:focus, .slds-has-blur-focus:active { color: currentColor; text-decoration: none; } .slds-has-blur-focus:focus { outline: 0; box-shadow: none; } .slds-has-blur-focus:focus-visible { box-shadow: var(--slds-g-shadow-outline-focus-1); outline: 0; border-color: transparent; } .slds-has-input-focus { outline: 0; border-color: transparent; background-color: var(--slds-g-color-surface-container-1); box-shadow: var(--slds-g-shadow-outline-focus-1); } .slds-list_vertical.slds-has-dividers > .slds-list__item, .slds-list--vertical.slds-has-dividers > .slds-list__item { padding: var(--slds-g-spacing-2); border-block-end: 1px solid var(--slds-g-color-border-1); } .slds-list_vertical.slds-has-dividers > .slds-list__item:hover, .slds-list--vertical.slds-has-dividers > .slds-list__item:hover { background-color: var(--slds-g-color-surface-container-2); border-color: var(--slds-g-color-border-1); cursor: pointer; } .slds-list_vertical.slds-has-dividers > .slds-list__item:active, .slds-list--vertical.slds-has-dividers > .slds-list__item:active { background-color: var(--slds-g-color-surface-container-2); box-shadow: var(--slds-g-color-border-1) 0 -1px 0 inset; } .slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected, .slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected { box-shadow: var(--slds-g-color-accent-2) 0 0 0 1px inset; background-color: var(--slds-g-color-surface-container-2); } .slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected:hover, .slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected:hover, .slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected:focus, .slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected:focus { box-shadow: var(--slds-g-color-accent-1) 0 -2px 0 inset, var(--slds-g-color-accent-1) 0 0 0 1px inset; } .slds-has-cards > .slds-list__item { border: 1px solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); background-clip: padding-box; } .slds-has-cards > .slds-list__item + .slds-list__item { margin-block-start: var(--slds-g-spacing-2); } .slds-has-cards_space > .slds-list__item, .slds-has-cards--space > .slds-list__item { border: 1px solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); background-clip: padding-box; padding: var(--slds-g-spacing-3); } @media (min-width: 30em) { .slds-has-cards_space > .slds-list__item, .slds-has-cards--space > .slds-list__item { padding: var(--slds-g-spacing-2); } } .slds-has-cards_space > .slds-list__item + .slds-list__item, .slds-has-cards--space > .slds-list__item + .slds-list__item { margin-block-start: var(--slds-g-spacing-2); } .slds-has-divider { margin-block-start: var(--slds-g-spacing-2); padding-block-start: var(--slds-g-spacing-2); border-block-start: 1px solid var(--slds-g-color-border-1); } .slds-has-block-links a { display: block; text-decoration: none; } .slds-has-block-links .slds-is-nested { margin-inline-start: var(--slds-g-spacing-4); } .slds-has-block-links_space .slds-list__item, .slds-has-block-links--space .slds-list__item, .slds-has-block-links_space .slds-item, .slds-has-block-links--space .slds-item { padding: 0; } .slds-has-block-links_space a, .slds-has-block-links--space a { display: block; text-decoration: none; padding: var(--slds-g-spacing-3); } @media (min-width: 48em) { .slds-has-block-links_space a, .slds-has-block-links--space a { padding: var(--slds-g-spacing-2); } } .slds-has-inline-block-links a { display: inline-block; text-decoration: none; } .slds-has-inline-block-links_space a, .slds-has-inline-block-links--space a { display: inline-block; text-decoration: none; padding: var(--slds-g-spacing-3); } @media (min-width: 48em) { .slds-has-inline-block-links_space a, .slds-has-inline-block-links--space a { padding: var(--slds-g-spacing-2); } } .slds-list_vertical-space .slds-list__item + .slds-list__item, .slds-list--vertical-space .slds-list__item + .slds-list__item, .slds-list_vertical-space .slds-item + .slds-item, .slds-list--vertical-space .slds-item + .slds-item { margin-block-start: var(--slds-g-spacing-2); } .slds-list_vertical-space-medium .slds-list__item + .slds-list__item, .slds-list--vertical-space-medium .slds-list__item + .slds-list__item, .slds-list_vertical-space-medium .slds-item + .slds-item, .slds-list--vertical-space-medium .slds-item + .slds-item { margin-block-start: var(--slds-g-spacing-4); } .slds-is-nested { margin-inline-start: var(--slds-g-spacing-4); } .slds-list_dotted, .slds-list--dotted { margin-inline-start: var(--slds-g-spacing-5); list-style: disc; } .slds-list_ordered, .slds-list--ordered { margin-inline-start: var(--slds-g-spacing-5); list-style: decimal; } .slds-has-dividers_top > .slds-list__item, .slds-has-dividers--top > .slds-list__item, .slds-has-dividers_top > .slds-item, .slds-has-dividers--top > .slds-item { border-block-start: 1px solid var(--slds-g-color-border-1); } .slds-has-dividers_top-space > .slds-list__item, .slds-has-dividers--top-space > .slds-list__item, .slds-has-dividers_top-space > .slds-item, .slds-has-dividers--top-space > .slds-item { border-block-start: 1px solid var(--slds-g-color-border-1); padding: var(--slds-g-spacing-3); } @media (min-width: 30em) { .slds-has-dividers_top-space > .slds-list__item, .slds-has-dividers--top-space > .slds-list__item, .slds-has-dividers_top-space > .slds-item, .slds-has-dividers--top-space > .slds-item { padding: var(--slds-g-spacing-2); } } .slds-has-dividers_bottom > .slds-list__item, .slds-has-dividers--bottom > .slds-list__item, .slds-has-dividers_bottom > .slds-item, .slds-has-dividers--bottom > .slds-item { border-block-end: 1px solid var(--slds-g-color-border-1); } .slds-has-dividers_bottom-space > .slds-list__item, .slds-has-dividers--bottom-space > .slds-list__item, .slds-has-dividers_bottom-space > .slds-item, .slds-has-dividers--bottom-space > .slds-item { border-block-end: 1px solid var(--slds-g-color-border-1); padding: var(--slds-g-spacing-3); } @media (min-width: 30em) { .slds-has-dividers_bottom-space > .slds-list__item, .slds-has-dividers--bottom-space > .slds-list__item, .slds-has-dividers_bottom-space > .slds-item, .slds-has-dividers--bottom-space > .slds-item { padding: var(--slds-g-spacing-2); } } .slds-has-dividers_around > .slds-item, .slds-has-dividers--around > .slds-item { border: 1px solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); background-clip: padding-box; } .slds-has-dividers_around > .slds-item + .slds-item, .slds-has-dividers--around > .slds-item + .slds-item { margin-block-start: var(--slds-g-spacing-2); } .slds-has-dividers_around-space > .slds-item, .slds-has-dividers--around-space > .slds-item { border: 1px solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); background-clip: padding-box; padding: var(--slds-g-spacing-3); } @media (min-width: 30em) { .slds-has-dividers_around-space > .slds-item, .slds-has-dividers--around-space > .slds-item { padding: var(--slds-g-spacing-2); } } .slds-has-dividers_around-space > .slds-item + .slds-item, .slds-has-dividers--around-space > .slds-item + .slds-item { margin-block-start: var(--slds-g-spacing-2); } .slds-has-list-interactions > .slds-list__item:hover, .slds-has-list-interactions > .slds-item:hover { background-color: var(--slds-g-color-surface-container-2); border-color: var(--slds-g-color-border-1); cursor: pointer; } .slds-has-list-interactions > .slds-list__item:active, .slds-has-list-interactions > .slds-item:active { background-color: var(--slds-g-color-surface-container-2); box-shadow: var(--slds-g-color-border-1) 0 -1px 0 inset; } .slds-has-list-interactions > .slds-list__item.slds-is-selected, .slds-has-list-interactions > .slds-item.slds-is-selected { box-shadow: var(--slds-g-color-accent-2) 0 0 0 1px inset; background-color: var(--slds-g-color-surface-container-2); } .slds-has-list-interactions > .slds-list__item.slds-is-selected:hover, .slds-has-list-interactions > .slds-list__item.slds-is-selected:focus, .slds-has-list-interactions > .slds-item.slds-is-selected:hover, .slds-has-list-interactions > .slds-item.slds-is-selected:focus { box-shadow: var(--slds-g-color-accent-1) 0 -2px 0 inset, var(--slds-g-color-accent-1) 0 0 0 1px inset; } .slds-has-divider_top, .slds-has-divider--top { border-block-start: 1px solid var(--slds-g-color-border-1); } .slds-has-divider_top-space, .slds-has-divider--top-space { border-block-start: 1px solid var(--slds-g-color-border-1); margin-block-start: var(--slds-g-spacing-2); padding-block-start: var(--slds-g-spacing-2); } .slds-has-divider_right, .slds-has-divider--right { position: relative; display: flex; align-items: center; } .slds-has-divider_right::after, .slds-has-divider--right::after { height: 2px; content: ''; margin-inline-start: var(--slds-g-spacing-2); margin-inline-end: var(--slds-g-spacing-2); border-radius: 50%; background-color: currentColor; } .slds-has-divider_right:last-child, .slds-has-divider--right:last-child { margin-inline-end: 0; padding-inline-end: 0; } .slds-has-divider_right:last-child::after, .slds-has-divider--right:last-child::after { content: none; } .slds-has-divider_bottom, .slds-has-divider--bottom { border-block-end: 1px solid var(--slds-g-color-border-1); } .slds-has-divider_bottom-space, .slds-has-divider--bottom-space { border-block-end: 1px solid var(--slds-g-color-border-1); margin-block-end: var(--slds-g-spacing-2); padding-block-end: var(--slds-g-spacing-2); } .slds-has-divider_left, .slds-has-divider--left { position: relative; display: flex; align-items: center; } .slds-has-divider_left::before, .slds-has-divider--left::before { width: 2px; height: 2px; content: ''; display: inline-block; vertical-align: middle; margin-inline-start: var(--slds-g-spacing-2); margin-inline-end: var(--slds-g-spacing-2); border-radius: 50%; background-color: currentColor; } .slds-has-divider_left:first-child, .slds-has-divider--left:first-child { margin-inline-end: 0; padding-inline-end: 0; } .slds-has-divider_left:first-child::before, .slds-has-divider--left:first-child::before { content: none; } .slds-list_horizontal.slds-has-dividers > .slds-list__item, .slds-list--horizontal.slds-has-dividers > .slds-list__item { position: relative; display: flex; align-items: center; } .slds-list_horizontal.slds-has-dividers > .slds-list__item::after, .slds-list--horizontal.slds-has-dividers > .slds-list__item::after { width: 2px; height: 2px; content: ''; margin-inline-start: var(--slds-g-spacing-2); margin-inline-end: var(--slds-g-spacing-2); border-radius: 50%; background-color: currentColor; } .slds-list_horizontal.slds-has-dividers > .slds-list__item:last-child, .slds-list--horizontal.slds-has-dividers > .slds-list__item:last-child { margin-inline-end: 0; padding-inline-end: 0; } .slds-list_horizontal.slds-has-dividers > .slds-list__item:last-child::after, .slds-list--horizontal.slds-has-dividers > .slds-list__item:last-child::after { content: none; } .slds-list_horizontal, .slds-list--horizontal { display: flex; } .slds-list_horizontal > .slds-list__item, .slds-list--horizontal > .slds-list__item { align-self: center; } .slds-list_horizontal-large > .slds-list__item > a, .slds-list--horizontal-large > .slds-list__item > a, .slds-list_horizontal-large > .slds-item > a, .slds-list--horizontal-large > .slds-item > a { padding-block: var(--slds-g-spacing-3); padding-inline: var(--slds-g-spacing-4); } .slds-has-dividers_left > .slds-list__item, .slds-has-dividers--left > .slds-list__item, .slds-has-dividers_left > .slds-item, .slds-has-dividers--left > .slds-item { position: relative; display: flex; align-items: center; } .slds-has-dividers_left > .slds-list__item::before, .slds-has-dividers--left > .slds-list__item::before, .slds-has-dividers_left > .slds-item::before, .slds-has-dividers--left > .slds-item::before { width: 2px; height: 2px; content: ''; display: inline-block; vertical-align: middle; margin-inline-start: var(--slds-g-spacing-2); margin-inline-end: var(--slds-g-spacing-2); border-radius: 50%; background-color: currentColor; } .slds-has-dividers_left > .slds-list__item:first-child, .slds-has-dividers--left > .slds-list__item:first-child, .slds-has-dividers_left > .slds-item:first-child, .slds-has-dividers--left > .slds-item:first-child { margin-inline-end: 0; padding-inline-end: 0; } .slds-has-dividers_left > .slds-list__item:first-child::before, .slds-has-dividers--left > .slds-list__item:first-child::before, .slds-has-dividers_left > .slds-item:first-child::before, .slds-has-dividers--left > .slds-item:first-child::before { content: none; } .slds-has-dividers_right > .slds-list__item, .slds-has-dividers--right > .slds-list__item, .slds-has-dividers_right > .slds-item, .slds-has-dividers--right > .slds-item { position: relative; display: flex; align-items: center; } .slds-has-dividers_right > .slds-list__item::after, .slds-has-dividers--right > .slds-list__item::after, .slds-has-dividers_right > .slds-item::after, .slds-has-dividers--right > .slds-item::after { width: 2px; height: 2px; content: ''; margin-inline-start: var(--slds-g-spacing-2); margin-inline-end: var(--slds-g-spacing-2); border-radius: 50%; background-color: currentColor; } .slds-has-dividers_right > .slds-list__item:last-child, .slds-has-dividers--right > .slds-list__item:last-child, .slds-has-dividers_right > .slds-item:last-child, .slds-has-dividers--right > .slds-item:last-child { margin-inline-end: 0; padding-inline-end: 0; } .slds-has-dividers_right > .slds-list__item:last-child::after, .slds-has-dividers--right > .slds-list__item:last-child::after, .slds-has-dividers_right > .slds-item:last-child::after, .slds-has-dividers--right > .slds-item:last-child::after { content: none; } .slds-dl_inline::after, .slds-dl--inline::after { content: ''; display: table; clear: both; } @media (min-width: 30em) { .slds-dl_inline__label, .slds-dl--inline__label { float: inline-start; clear: inline-start; } .slds-dl_inline__detail, .slds-dl--inline__detail { float: inline-start; padding-inline-start: var(--slds-g-spacing-1); } } .slds-region_narrow .slds-dl_inline__label, .slds-region--narrow .slds-dl--inline__label, .slds-region_narrow .slds-dl_inline__detail, .slds-region--narrow .slds-dl--inline__detail { float: inline-start; } .slds-region_narrow .slds-dl_inline__label, .slds-region--narrow .slds-dl--inline__label { clear: inline-start; } .slds-region_narrow .slds-dl_inline__detail, .slds-region--narrow .slds-dl--inline__detail { padding-inline-start: var(--slds-g-spacing-1); } .slds-region_narrow .slds-dl_horizontal, .slds-region--narrow .slds-dl--horizontal { display: flex; flex-wrap: wrap; } .slds-region_narrow .slds-dl_horizontal .slds-dl_horizontal__label, .slds-region--narrow .slds-dl--horizontal .slds-dl--horizontal__label { width: 30%; padding-inline-end: var(--slds-g-spacing-3); } .slds-region_narrow .slds-dl_horizontal .slds-dl_horizontal__detail, .slds-region--narrow .slds-dl--horizontal .slds-dl--horizontal__detail { width: 70%; } @media (min-width: 30em) { .slds-dl_horizontal, .slds-dl--horizontal { display: flex; flex-wrap: wrap; } .slds-dl_horizontal__label, .slds-dl--horizontal__label { width: 30%; padding-inline-end: var(--slds-g-spacing-3); } .slds-dl_horizontal__detail, .slds-dl--horizontal__detail { width: 70%; } } .slds-list_horizontal .slds-item_label, .slds-list--horizontal .slds-item--label { width: 30%; padding-inline-end: var(--slds-g-spacing-3); } .slds-list_horizontal .slds-item_detail, .slds-list--horizontal .slds-item--detail { width: 70%; } .slds-list_vertical .slds-item_label, .slds-list--vertical .slds-item--label, .slds-list_vertical .slds-item_detail, .slds-list--vertical .slds-item--detail { display: block; } .slds-list_inline, .slds-list--inline { display: inline-flex; max-width: 100%; } .slds-list_inline .slds-item_label, .slds-list--inline .slds-item--label { max-width: 180px; padding-inline-end: var(--slds-g-spacing-3); flex-shrink: 0; } .slds-list_inline .slds-item_label ~ .slds-item_label, .slds-list--inline .slds-item--label ~ .slds-item--label { padding-inline-start: var(--slds-g-spacing-4); } .slds-list_inline .slds-item_detail, .slds-list--inline .slds-item--detail { min-width: 0; } .slds-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slds-truncate a:focus-visible { outline-offset: 0; } .slds-truncate_container_25, .slds-truncate_container--25 { max-width: 25%; } .slds-truncate_container_50, .slds-truncate_container--50 { max-width: 50%; } .slds-truncate_container_75, .slds-truncate_container--75 { max-width: 75%; } .slds-truncate_container_33, .slds-truncate_container--33 { max-width: 33%; } .slds-truncate_container_66, .slds-truncate_container--66 { max-width: 66%; } .slds-hyphenate { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .slds-box { padding: var(--slds-g-spacing-4); border-radius: var(--slds-g-radius-border-2); border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1); } .slds-box_xx-small, .slds-box--xx-small { padding: var(--slds-g-spacing-1); } .slds-box_x-small, .slds-box--x-small { padding: var(--slds-g-spacing-2); } .slds-box_small, .slds-box--small { padding: var(--slds-g-spacing-3); } .slds-box_link, .slds-box--link, .slds-box_link:active, .slds-box--link:active, .slds-box_link:focus, .slds-box--link:focus, .slds-box_link:hover, .slds-box--link:hover { color: inherit; text-decoration: inherit; } .slds-box_link:hover, .slds-box--link:hover, .slds-box_link:focus, .slds-box--link:focus { cursor: pointer; outline: 0; border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-accent-2); box-shadow: 0 0 0 1px var(--slds-g-color-accent-1) inset; } .slds-theme_default, .slds-theme--default { background-color: var(--slds-g-color-surface-container-1); color: var(--slds-g-color-on-surface-3); } .slds-theme_shade, .slds-theme--shade { background-color: var(--slds-g-color-surface-container-2); } .slds-theme_inverse, .slds-theme--inverse { color: var(--slds-g-color-neutral-base-100); background-color: var(--slds-g-color-brand-base-10); border-color: var(--slds-g-color-brand-base-10); } .slds-theme_inverse a:not(.slds-button_neutral), .slds-theme--inverse a:not(.slds-button--neutral) { color: var(--slds-g-color-neutral-base-100); text-decoration: underline; } .slds-theme_inverse a:not(.slds-button_neutral):link, .slds-theme--inverse a:not(.slds-button--neutral):link, .slds-theme_inverse a:not(.slds-button_neutral):visited, .slds-theme--inverse a:not(.slds-button--neutral):visited { color: var(--slds-g-color-neutral-base-100); } .slds-theme_inverse a:not(.slds-button_neutral):hover, .slds-theme--inverse a:not(.slds-button--neutral):hover, .slds-theme_inverse a:not(.slds-button_neutral):focus, .slds-theme--inverse a:not(.slds-button--neutral):focus { text-decoration: none; } .slds-theme_inverse a:not(.slds-button_neutral):active, .slds-theme--inverse a:not(.slds-button--neutral):active { color: rgba(255, 255, 255, 0.5); } .slds-theme_inverse a:not(.slds-button_neutral)[disabled], .slds-theme--inverse a:not(.slds-button--neutral)[disabled] { color: rgba(255, 255, 255, 0.15); } .slds-theme_alt-inverse, .slds-theme--alt-inverse { color: var(--slds-g-color-neutral-base-100); background-color: var(--slds-g-color-brand-base-20); border-color: var(--slds-g-color-brand-base-20); } .slds-theme_alt-inverse a:not(.slds-button_neutral), .slds-theme--alt-inverse a:not(.slds-button--neutral) { color: var(--slds-g-color-neutral-base-100); text-decoration: underline; } .slds-theme_alt-inverse a:not(.slds-button_neutral):link, .slds-theme--alt-inverse a:not(.slds-button--neutral):link, .slds-theme_alt-inverse a:not(.slds-button_neutral):visited, .slds-theme--alt-inverse a:not(.slds-button--neutral):visited { color: var(--slds-g-color-neutral-base-100); } .slds-theme_alt-inverse a:not(.slds-button_neutral):hover, .slds-theme--alt-inverse a:not(.slds-button--neutral):hover, .slds-theme_alt-inverse a:not(.slds-button_neutral):focus, .slds-theme--alt-inverse a:not(.slds-button--neutral):focus { text-decoration: none; } .slds-theme_alt-inverse a:not(.slds-button_neutral):active, .slds-theme--alt-inverse a:not(.slds-button--neutral):active { color: rgba(255, 255, 255, 0.5); } .slds-theme_alt-inverse a:not(.slds-button_neutral)[disabled], .slds-theme--alt-inverse a:not(.slds-button--neutral)[disabled] { color: rgba(255, 255, 255, 0.15); } .slds-theme_success, .slds-theme--success { color: var(--slds-g-color-on-success-1); background-color: var(--slds-g-color-success-container-1); } .slds-theme_success a:not(.slds-button_neutral), .slds-theme--success a:not(.slds-button--neutral) { color: var(--slds-g-color-on-success-1); text-decoration: underline; } .slds-theme_success a:not(.slds-button_neutral):link, .slds-theme--success a:not(.slds-button--neutral):link, .slds-theme_success a:not(.slds-button_neutral):visited, .slds-theme--success a:not(.slds-button--neutral):visited { color: var(--slds-g-color-on-success-1); } .slds-theme_success a:not(.slds-button_neutral):hover, .slds-theme--success a:not(.slds-button--neutral):hover, .slds-theme_success a:not(.slds-button_neutral):focus, .slds-theme--success a:not(.slds-button--neutral):focus { text-decoration: none; } .slds-theme_success a:not(.slds-button_neutral):active, .slds-theme--success a:not(.slds-button--neutral):active { color: var(--slds-g-color-on-success-1); } .slds-theme_success a:not(.slds-button_neutral)[disabled], .slds-theme--success a:not(.slds-button--neutral)[disabled] { color: rgba(255, 255, 255, 0.15); } .slds-theme_success .slds-icon, .slds-theme--success .slds-icon, .slds-theme_success .slds-button__icon, .slds-theme--success .slds-button__icon { fill: var(--slds-g-color-on-success-1); } .slds-theme_info, .slds-theme--info { color: var(--slds-g-color-on-info-1); background-color: var(--slds-g-color-info-container-1); } .slds-theme_info a:not(.slds-button_neutral), .slds-theme--info a:not(.slds-button--neutral) { color: var(--slds-g-color-on-info-1); text-decoration: underline; } .slds-theme_info a:not(.slds-button_neutral):link, .slds-theme--info a:not(.slds-button--neutral):link, .slds-theme_info a:not(.slds-button_neutral):visited, .slds-theme--info a:not(.slds-button--neutral):visited { color: var(--slds-g-color-on-info-1); } .slds-theme_info a:not(.slds-button_neutral):hover, .slds-theme--info a:not(.slds-button--neutral):hover, .slds-theme_info a:not(.slds-button_neutral):focus, .slds-theme--info a:not(.slds-button--neutral):focus { text-decoration: none; } .slds-theme_info a:not(.slds-button_neutral):active, .slds-theme--info a:not(.slds-button--neutral):active { color: var(--slds-g-color-on-info-1); } .slds-theme_info a:not(.slds-button_neutral)[disabled], .slds-theme--info a:not(.slds-button--neutral)[disabled] { color: rgba(255, 255, 255, 0.15); } .slds-theme_info .slds-icon, .slds-theme--info .slds-icon, .slds-theme_info .slds-button__icon, .slds-theme--info .slds-button__icon { fill: var(--slds-g-color-on-info-1); } .slds-theme_warning, .slds-theme--warning { background-color: var(--slds-g-color-warning-container-1); color: var(--slds-g-color-on-warning-1); } .slds-theme_warning a, .slds-theme--warning a { color: var(--slds-g-color-on-warning-1); text-decoration: underline; } .slds-theme_warning a:link, .slds-theme--warning a:link, .slds-theme_warning a:visited, .slds-theme--warning a:visited { color: var(--slds-g-color-on-warning-1); } .slds-theme_warning a:hover, .slds-theme--warning a:hover, .slds-theme_warning a:focus, .slds-theme--warning a:focus { text-decoration: none; } .slds-theme_warning a:focus-visible, .slds-theme--warning a:focus-visible { outline-offset: 2px; } .slds-theme_warning a:active, .slds-theme--warning a:active { color: var(--slds-g-color-on-warning-1); } .slds-theme_warning a[disabled], .slds-theme--warning a[disabled] { color: var(--slds-g-color-neutral-base-30, #514f4d); } .slds-theme_warning button, .slds-theme--warning button { color: var(--slds-g-color-neutral-base-30, #514f4d); text-decoration: underline; } .slds-theme_warning button:hover, .slds-theme--warning button:hover { color: var(--slds-g-color-neutral-base-50, #706e6b); } .slds-theme_warning button:focus, .slds-theme--warning button:focus { color: var(--slds-g-color-neutral-base-30, #514f4d); box-shadow: var(--slds-g-shadow-outset-focus-1); } .slds-theme_warning button:active, .slds-theme--warning button:active { color: var(--slds-g-color-neutral-base-50, #706e6b); } .slds-theme_warning .slds-icon, .slds-theme--warning .slds-icon, .slds-theme_warning .slds-button__icon, .slds-theme--warning .slds-button__icon { fill: var(--slds-g-color-on-warning-1); } .slds-theme_error, .slds-theme--error { color: var(--slds-g-color-on-error-1); background-color: var(--slds-g-color-error-container-1); } .slds-theme_error a:not(.slds-button_neutral), .slds-theme--error a:not(.slds-button--neutral) { color: var(--slds-g-color-on-error-1); text-decoration: underline; } .slds-theme_error a:not(.slds-button_neutral):link, .slds-theme--error a:not(.slds-button--neutral):link, .slds-theme_error a:not(.slds-button_neutral):visited, .slds-theme--error a:not(.slds-button--neutral):visited { color: var(--slds-g-color-on-error-1); } .slds-theme_error a:not(.slds-button_neutral):hover, .slds-theme--error a:not(.slds-button--neutral):hover, .slds-theme_error a:not(.slds-button_neutral):focus, .slds-theme--error a:not(.slds-button--neutral):focus { text-decoration: none; } .slds-theme_error a:not(.slds-button_neutral):active, .slds-theme--error a:not(.slds-button--neutral):active { color: var(--slds-g-color-on-error-1); } .slds-theme_error a:not(.slds-button_neutral)[disabled], .slds-theme--error a:not(.slds-button--neutral)[disabled] { color: rgba(255, 255, 255, 0.15); } .slds-theme_error .slds-icon, .slds-theme--error .slds-icon, .slds-theme_error .slds-button__icon, .slds-theme--error .slds-button__icon { fill: var(--slds-g-color-on-error-1); } .slds-theme_offline, .slds-theme--offline { color: var(--slds-g-color-neutral-base-100); background-color: var(--slds-g-color-neutral-base-30); } .slds-theme_offline a:not(.slds-button_neutral), .slds-theme--offline a:not(.slds-button--neutral) { color: var(--slds-g-color-neutral-base-100); text-decoration: underline; } .slds-theme_offline a:not(.slds-button_neutral):link, .slds-theme--offline a:not(.slds-button--neutral):link, .slds-theme_offline a:not(.slds-button_neutral):visited, .slds-theme--offline a:not(.slds-button--neutral):visited { color: var(--slds-g-color-neutral-base-100); } .slds-theme_offline a:not(.slds-button_neutral):hover, .slds-theme--offline a:not(.slds-button--neutral):hover, .slds-theme_offline a:not(.slds-button_neutral):focus, .slds-theme--offline a:not(.slds-button--neutral):focus { text-decoration: none; } .slds-theme_offline a:not(.slds-button_neutral):active, .slds-theme--offline a:not(.slds-button--neutral):active { color: color-mix(in oklab, var(--slds-g-color-neutral-base-100), transparent 50%); } .slds-theme_offline a:not(.slds-button_neutral)[disabled], .slds-theme--offline a:not(.slds-button--neutral)[disabled] { color: color-mix(in oklab, var(--slds-g-color-neutral-base-100), transparent 10%); } .slds-theme_inverse-text, .slds-theme--inverse-text { color: var(--slds-g-color-neutral-base-100); } .slds-theme_inverse-text a:not(.slds-button_neutral), .slds-theme--inverse-text a:not(.slds-button--neutral) { color: var(--slds-g-color-neutral-base-100); text-decoration: underline; } .slds-theme_inverse-text a:not(.slds-button_neutral):link, .slds-theme--inverse-text a:not(.slds-button--neutral):link, .slds-theme_inverse-text a:not(.slds-button_neutral):visited, .slds-theme--inverse-text a:not(.slds-button--neutral):visited { color: var(--slds-g-color-neutral-base-100); } .slds-theme_inverse-text a:not(.slds-button_neutral):hover, .slds-theme--inverse-text a:not(.slds-button--neutral):hover, .slds-theme_inverse-text a:not(.slds-button_neutral):focus, .slds-theme--inverse-text a:not(.slds-button--neutral):focus { text-decoration: none; } .slds-theme_inverse-text a:not(.slds-button_neutral):active, .slds-theme--inverse-text a:not(.slds-button--neutral):active { color: color-mix(in oklab, var(--slds-g-color-neutral-base-100), transparent 50%); } .slds-theme_inverse-text a:not(.slds-button_neutral)[disabled], .slds-theme--inverse-text a:not(.slds-button--neutral)[disabled] { color: color-mix(in oklab, var(--slds-g-color-neutral-base-100), transparent 15%); } .slds-text-body_regular, .slds-text-body--regular { font-size: var(--slds-g-font-size-base); } .slds-text-body_small, .slds-text-body--small { font-size: var(--slds-g-font-scale-neg-1); } .slds-text-heading_large, .slds-text-heading--large { font-size: var(--slds-g-font-scale-6); line-height: var(--slds-g-font-lineheight-2); } .slds-text-heading_medium, .slds-text-heading--medium { font-size: var(--slds-g-font-scale-4); line-height: var(--slds-g-font-lineheight-2); } .slds-text-heading_small, .slds-text-heading--small { font-size: var(--slds-g-font-scale-2); line-height: var(--slds-g-font-lineheight-2); } .slds-text-title { font-size: var(--slds-g-font-scale-neg-1); line-height: var(--slds-g-font-lineheight-2); color: var(--slds-g-color-on-surface-1); } .slds-text-title_caps, .slds-text-title--caps { font-size: var(--slds-g-font-scale-neg-1); color: var(--slds-g-color-on-surface-1); font-weight: var(--slds-g-font-weight-4); text-transform: uppercase; letter-spacing: 0.0625rem; } .slds-text-title_bold, .slds-text-title--bold { font-size: var(--slds-g-font-scale-neg-1); font-weight: var(--slds-g-font-weight-7); } .slds-line-height_reset, .slds-line-height--reset { line-height: 1; } .slds-text-color_default, .slds-text-color--default { color: var(--slds-g-color-on-surface-3); } .slds-text-color_weak, .slds-text-color--weak { color: var(--slds-g-color-on-surface-1); } .slds-text-color_error, .slds-text-color--error { color: var(--slds-g-color-error-1); } .slds-text-color_destructive, .slds-text-color--destructive { color: var(--slds-g-color-error-1); } .slds-text-color_success, .slds-text-color--success { color: var(--slds-g-color-success-1); } .slds-text-color_inverse, .slds-text-color--inverse { color: var(--slds-g-color-neutral-base-100); } .slds-text-color_inverse-weak, .slds-text-color--inverse-weak { color: var(--slds-g-color-neutral-base-70); } .slds-text-align_left, .slds-text-align--left { text-align: start; } .slds-text-align_center, .slds-text-align--center { text-align: center; } .slds-text-align_right, .slds-text-align--right { text-align: end; } .slds-text-longform h1, .slds-text-longform h2, .slds-text-longform h3, .slds-text-longform p, .slds-text-longform ul, .slds-text-longform ol, .slds-text-longform dl, .slds-text-longform img { margin-block-end: var(--slds-g-spacing-4); } .slds-text-longform ul { margin-inline-start: var(--slds-g-spacing-5); list-style: disc; } .slds-text-longform ul ul { list-style: circle; } .slds-text-longform ul ul ul { list-style: square; } .slds-text-longform ol { margin-inline-start: var(--slds-g-spacing-5); list-style: decimal; } .slds-text-longform ol ol { list-style: lower-alpha; } .slds-text-longform ol ol ol { list-style: lower-roman; } .slds-text-longform .slds-video { display: block; max-width: 100%; } .slds-text-longform .slds-video.slds-video_center, .slds-text-longform .slds-video.slds-video--center { margin: 0 auto; } .slds-text-longform .slds-video.slds-video_right, .slds-text-longform .slds-video.slds-video--right { margin: 0 0 0 auto; } .slds-text-font_monospace, .slds-text-font--monospace { font-family: var(--slds-g-font-family-monospace); } .slds-color__text_gray-1, .slds-color__text--gray-1 { color: var(--slds-g-color-neutral-base-100) !important; } .slds-color__text_gray-2, .slds-color__text--gray-2 { color: var(--slds-g-color-neutral-base-95) !important; } .slds-color__text_gray-3, .slds-color__text--gray-3 { color: var(--slds-g-color-neutral-base-95) !important; } .slds-color__text_gray-4, .slds-color__text--gray-4 { color: var(--slds-g-color-neutral-base-90) !important; } .slds-color__text_gray-5, .slds-color__text--gray-5 { color: var(--slds-g-color-neutral-base-90) !important; } .slds-color__text_gray-6, .slds-color__text--gray-6 { color: var(--slds-g-color-neutral-base-80) !important; } .slds-color__text_gray-7, .slds-color__text--gray-7 { color: var(--slds-g-color-neutral-base-70) !important; } .slds-color__text_gray-8, .slds-color__text--gray-8 { color: var(--slds-g-color-neutral-base-60) !important; } .slds-color__text_gray-9, .slds-color__text--gray-9 { color: var(--slds-g-color-neutral-base-50) !important; } .slds-color__text_gray-10, .slds-color__text--gray-10 { color: var(--slds-g-color-neutral-base-30) !important; } .slds-color__text_gray-11, .slds-color__text--gray-11 { color: var(--slds-g-color-neutral-base-30) !important; } .slds-color__text_gray-12, .slds-color__text--gray-12 { color: var(--slds-g-color-neutral-base-20) !important; } .slds-color__background_gray-1, .slds-color__background--gray-1 { background-color: var(--slds-g-color-neutral-base-100) !important; } .slds-color__background_gray-2, .slds-color__background--gray-2 { background-color: var(--slds-g-color-neutral-base-95) !important; } .slds-color__background_gray-3, .slds-color__background--gray-3 { background-color: var(--slds-g-color-neutral-base-95) !important; } .slds-color__background_gray-4, .slds-color__background--gray-4 { background-color: var(--slds-g-color-neutral-base-90) !important; } .slds-color__background_gray-5, .slds-color__background--gray-5 { background-color: var(--slds-g-color-neutral-base-90) !important; } .slds-color__background_gray-6, .slds-color__background--gray-6 { background-color: var(--slds-g-color-neutral-base-80) !important; } .slds-color__background_gray-7, .slds-color__background--gray-7 { background-color: var(--slds-g-color-neutral-base-70) !important; } .slds-color__background_gray-8, .slds-color__background--gray-8 { background-color: var(--slds-g-color-neutral-base-60) !important; } .slds-color__background_gray-9, .slds-color__background--gray-9 { background-color: var(--slds-g-color-neutral-base-50) !important; } .slds-color__background_gray-10, .slds-color__background--gray-10 { background-color: var(--slds-g-color-neutral-base-30) !important; } .slds-color__background_gray-11, .slds-color__background--gray-11 { background-color: var(--slds-g-color-neutral-base-30) !important; } .slds-color__background_gray-12, .slds-color__background--gray-12 { background-color: var(--slds-g-color-neutral-base-20) !important; } .slds-color__border_gray-1, .slds-color__border--gray-1 { border-color: var(--slds-g-color-neutral-base-100) !important; } .slds-color__border_gray-2, .slds-color__border--gray-2 { border-color: var(--slds-g-color-neutral-base-95) !important; } .slds-color__border_gray-3, .slds-color__border--gray-3 { border-color: var(--slds-g-color-neutral-base-95) !important; } .slds-color__border_gray-4, .slds-color__border--gray-4 { border-color: var(--slds-g-color-neutral-base-90) !important; } .slds-color__border_gray-5, .slds-color__border--gray-5 { border-color: var(--slds-g-color-neutral-base-90) !important; } .slds-color__border_gray-6, .slds-color__border--gray-6 { border-color: var(--slds-g-color-neutral-base-80) !important; } .slds-color__border_gray-7, .slds-color__border--gray-7 { border-color: var(--slds-g-color-neutral-base-70) !important; } .slds-color__border_gray-8, .slds-color__border--gray-8 { border-color: var(--slds-g-color-neutral-base-60) !important; } .slds-color__border_gray-9, .slds-color__border--gray-9 { border-color: var(--slds-g-color-neutral-base-50) !important; } .slds-color__border_gray-10, .slds-color__border--gray-10 { border-color: var(--slds-g-color-neutral-base-30) !important; } .slds-color__border_gray-11, .slds-color__border--gray-11 { border-color: var(--slds-g-color-neutral-base-30) !important; } .slds-color__border_gray-12, .slds-color__border--gray-12 { border-color: var(--slds-g-color-neutral-base-20) !important; } .slds-color__fill_gray-1, .slds-color__fill--gray-1 { fill: var(--slds-g-color-neutral-base-100) !important; } .slds-color__fill_gray-2, .slds-color__fill--gray-2 { fill: var(--slds-g-color-neutral-base-95) !important; } .slds-color__fill_gray-3, .slds-color__fill--gray-3 { fill: var(--slds-g-color-neutral-base-95) !important; } .slds-color__fill_gray-4, .slds-color__fill--gray-4 { fill: var(--slds-g-color-neutral-base-90) !important; } .slds-color__fill_gray-5, .slds-color__fill--gray-5 { fill: var(--slds-g-color-neutral-base-90) !important; } .slds-color__fill_gray-6, .slds-color__fill--gray-6 { fill: var(--slds-g-color-neutral-base-80) !important; } .slds-color__fill_gray-7, .slds-color__fill--gray-7 { fill: var(--slds-g-color-neutral-base-70) !important; } .slds-color__fill_gray-8, .slds-color__fill--gray-8 { fill: var(--slds-g-color-neutral-base-60) !important; } .slds-color__fill_gray-9, .slds-color__fill--gray-9 { fill: var(--slds-g-color-neutral-base-50) !important; } .slds-color__fill_gray-10, .slds-color__fill--gray-10 { fill: var(--slds-g-color-neutral-base-30) !important; } .slds-color__fill_gray-11, .slds-color__fill--gray-11 { fill: var(--slds-g-color-neutral-base-30) !important; } .slds-color__fill_gray-12, .slds-color__fill--gray-12 { fill: var(--slds-g-color-neutral-base-20) !important; } .slds-scrollable { -webkit-overflow-scrolling: touch; overflow: auto; } .slds-scrollable_none, .slds-scrollable--none { overflow: hidden; } .slds-scrollable_y, .slds-scrollable--y { -webkit-overflow-scrolling: touch; max-height: 100%; overflow: hidden; overflow-y: auto; } .slds-scrollable_x, .slds-scrollable--x { -webkit-overflow-scrolling: touch; max-width: 100%; overflow: hidden; overflow-x: auto; } .slds-size_xxx-small, .slds-size--xxx-small { width: 3rem; } .slds-size_xx-small, .slds-size--xx-small { width: 6rem; } .slds-size_x-small, .slds-size--x-small { width: 12rem; } .slds-size_small, .slds-size--small { width: 15rem; } .slds-size_medium, .slds-size--medium { width: 20rem; } .slds-size_large, .slds-size--large { width: 25rem; } .slds-size_x-large, .slds-size--x-large { width: 40rem; } .slds-size_xx-large, .slds-size--xx-large { width: 60rem; } .slds-size_full, .slds-size--full { width: 100%; } .slds-size_1-of-1, .slds-size--1-of-1 { width: 100%; } .slds-size_1-of-2, .slds-size--1-of-2 { width: 50%; } .slds-size_2-of-2, .slds-size--2-of-2 { width: 100%; } .slds-size_1-of-3, .slds-size--1-of-3 { width: 33.333%; } .slds-size_2-of-3, .slds-size--2-of-3 { width: 66.6667%; } .slds-size_3-of-3, .slds-size--3-of-3 { width: 100%; } .slds-size_1-of-4, .slds-size--1-of-4 { width: 25%; } .slds-size_2-of-4, .slds-size--2-of-4 { width: 50%; } .slds-size_3-of-4, .slds-size--3-of-4 { width: 75%; } .slds-size_4-of-4, .slds-size--4-of-4 { width: 100%; } .slds-size_1-of-5, .slds-size--1-of-5 { width: 20%; } .slds-size_2-of-5, .slds-size--2-of-5 { width: 40%; } .slds-size_3-of-5, .slds-size--3-of-5 { width: 60%; } .slds-size_4-of-5, .slds-size--4-of-5 { width: 80%; } .slds-size_5-of-5, .slds-size--5-of-5 { width: 100%; } .slds-size_1-of-6, .slds-size--1-of-6 { width: 16.6667%; } .slds-size_2-of-6, .slds-size--2-of-6 { width: 33.333%; } .slds-size_3-of-6, .slds-size--3-of-6 { width: 50%; } .slds-size_4-of-6, .slds-size--4-of-6 { width: 66.6667%; } .slds-size_5-of-6, .slds-size--5-of-6 { width: 83.3333%; } .slds-size_6-of-6, .slds-size--6-of-6 { width: 100%; } .slds-size_1-of-7, .slds-size--1-of-7 { width: 14.2857%; } .slds-size_2-of-7, .slds-size--2-of-7 { width: 28.5714%; } .slds-size_3-of-7, .slds-size--3-of-7 { width: 42.8571%; } .slds-size_4-of-7, .slds-size--4-of-7 { width: 57.1429%; } .slds-size_5-of-7, .slds-size--5-of-7 { width: 71.4286%; } .slds-size_6-of-7, .slds-size--6-of-7 { width: 85.7143%; } .slds-size_7-of-7, .slds-size--7-of-7 { width: 100%; } .slds-size_1-of-8, .slds-size--1-of-8 { width: 12.5%; } .slds-size_2-of-8, .slds-size--2-of-8 { width: 25%; } .slds-size_3-of-8, .slds-size--3-of-8 { width: 37.5%; } .slds-size_4-of-8, .slds-size--4-of-8 { width: 50%; } .slds-size_5-of-8, .slds-size--5-of-8 { width: 62.5%; } .slds-size_6-of-8, .slds-size--6-of-8 { width: 75%; } .slds-size_7-of-8, .slds-size--7-of-8 { width: 87.5%; } .slds-size_8-of-8, .slds-size--8-of-8 { width: 100%; } .slds-size_1-of-12, .slds-size--1-of-12 { width: 8.3333%; } .slds-size_2-of-12, .slds-size--2-of-12 { width: 16.6667%; } .slds-size_3-of-12, .slds-size--3-of-12 { width: 25%; } .slds-size_4-of-12, .slds-size--4-of-12 { width: 33.333%; } .slds-size_5-of-12, .slds-size--5-of-12 { width: 41.6667%; } .slds-size_6-of-12, .slds-size--6-of-12 { width: 50%; } .slds-size_7-of-12, .slds-size--7-of-12 { width: 58.3333%; } .slds-size_8-of-12, .slds-size--8-of-12 { width: 66.6667%; } .slds-size_9-of-12, .slds-size--9-of-12 { width: 75%; } .slds-size_10-of-12, .slds-size--10-of-12 { width: 83.3333%; } .slds-size_11-of-12, .slds-size--11-of-12 { width: 91.6667%; } .slds-size_12-of-12, .slds-size--12-of-12 { width: 100%; } .slds-order_1, .slds-order--1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .slds-order_2, .slds-order--2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .slds-order_3, .slds-order--3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .slds-order_4, .slds-order--4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .slds-order_5, .slds-order--5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .slds-order_6, .slds-order--6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .slds-order_7, .slds-order--7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .slds-order_8, .slds-order--8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .slds-order_9, .slds-order--9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .slds-order_10, .slds-order--10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .slds-order_11, .slds-order--11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .slds-order_12, .slds-order--12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } @media (min-width: 20em) { .slds-x-small-size_xxx-small, .slds-x-small-size--xxx-small, .slds-x-small-size_xx-small, .slds-x-small-size--xx-small, .slds-x-small-size_x-small, .slds-x-small-size--x-small, .slds-x-small-size_small, .slds-x-small-size--small, .slds-x-small-size_medium, .slds-x-small-size--medium, .slds-x-small-size_large, .slds-x-small-size--large, .slds-x-small-size_x-large, .slds-x-small-size--x-large, .slds-x-small-size_xx-large, .slds-x-small-size--xx-large, .slds-x-small-size_1-of-1, .slds-x-small-size--1-of-1, .slds-x-small-size_1-of-2, .slds-x-small-size--1-of-2, .slds-x-small-size_2-of-2, .slds-x-small-size--2-of-2, .slds-x-small-size_1-of-3, .slds-x-small-size--1-of-3, .slds-x-small-size_2-of-3, .slds-x-small-size--2-of-3, .slds-x-small-size_3-of-3, .slds-x-small-size--3-of-3, .slds-x-small-size_1-of-4, .slds-x-small-size--1-of-4, .slds-x-small-size_2-of-4, .slds-x-small-size--2-of-4, .slds-x-small-size_3-of-4, .slds-x-small-size--3-of-4, .slds-x-small-size_4-of-4, .slds-x-small-size--4-of-4, .slds-x-small-size_1-of-5, .slds-x-small-size--1-of-5, .slds-x-small-size_2-of-5, .slds-x-small-size--2-of-5, .slds-x-small-size_3-of-5, .slds-x-small-size--3-of-5, .slds-x-small-size_4-of-5, .slds-x-small-size--4-of-5, .slds-x-small-size_5-of-5, .slds-x-small-size--5-of-5, .slds-x-small-size_1-of-6, .slds-x-small-size--1-of-6, .slds-x-small-size_2-of-6, .slds-x-small-size--2-of-6, .slds-x-small-size_3-of-6, .slds-x-small-size--3-of-6, .slds-x-small-size_4-of-6, .slds-x-small-size--4-of-6, .slds-x-small-size_5-of-6, .slds-x-small-size--5-of-6, .slds-x-small-size_6-of-6, .slds-x-small-size--6-of-6, .slds-x-small-size_1-of-7, .slds-x-small-size--1-of-7, .slds-x-small-size_2-of-7, .slds-x-small-size--2-of-7, .slds-x-small-size_3-of-7, .slds-x-small-size--3-of-7, .slds-x-small-size_4-of-7, .slds-x-small-size--4-of-7, .slds-x-small-size_5-of-7, .slds-x-small-size--5-of-7, .slds-x-small-size_6-of-7, .slds-x-small-size--6-of-7, .slds-x-small-size_7-of-7, .slds-x-small-size--7-of-7, .slds-x-small-size_1-of-8, .slds-x-small-size--1-of-8, .slds-x-small-size_2-of-8, .slds-x-small-size--2-of-8, .slds-x-small-size_3-of-8, .slds-x-small-size--3-of-8, .slds-x-small-size_4-of-8, .slds-x-small-size--4-of-8, .slds-x-small-size_5-of-8, .slds-x-small-size--5-of-8, .slds-x-small-size_6-of-8, .slds-x-small-size--6-of-8, .slds-x-small-size_7-of-8, .slds-x-small-size--7-of-8, .slds-x-small-size_8-of-8, .slds-x-small-size--8-of-8, .slds-x-small-size_1-of-12, .slds-x-small-size--1-of-12, .slds-x-small-size_2-of-12, .slds-x-small-size--2-of-12, .slds-x-small-size_3-of-12, .slds-x-small-size--3-of-12, .slds-x-small-size_4-of-12, .slds-x-small-size--4-of-12, .slds-x-small-size_5-of-12, .slds-x-small-size--5-of-12, .slds-x-small-size_6-of-12, .slds-x-small-size--6-of-12, .slds-x-small-size_7-of-12, .slds-x-small-size--7-of-12, .slds-x-small-size_8-of-12, .slds-x-small-size--8-of-12, .slds-x-small-size_9-of-12, .slds-x-small-size--9-of-12, .slds-x-small-size_10-of-12, .slds-x-small-size--10-of-12, .slds-x-small-size_11-of-12, .slds-x-small-size--11-of-12, .slds-x-small-size_12-of-12, .slds-x-small-size--12-of-12 { flex: none; } .slds-x-small-size_xxx-small, .slds-x-small-size--xxx-small { width: 3rem; } .slds-x-small-size_xx-small, .slds-x-small-size--xx-small { width: 6rem; } .slds-x-small-size_x-small, .slds-x-small-size--x-small { width: 12rem; } .slds-x-small-size_small, .slds-x-small-size--small { width: 15rem; } .slds-x-small-size_medium, .slds-x-small-size--medium { width: 20rem; } .slds-x-small-size_large, .slds-x-small-size--large { width: 25rem; } .slds-x-small-size_x-large, .slds-x-small-size--x-large { width: 40rem; } .slds-x-small-size_xx-large, .slds-x-small-size--xx-large { width: 60rem; } .slds-x-small-size_1-of-1, .slds-x-small-size--1-of-1 { width: 100%; } .slds-x-small-size_1-of-2, .slds-x-small-size--1-of-2 { width: 50%; } .slds-x-small-size_2-of-2, .slds-x-small-size--2-of-2 { width: 100%; } .slds-x-small-size_1-of-3, .slds-x-small-size--1-of-3 { width: 33.333%; } .slds-x-small-size_2-of-3, .slds-x-small-size--2-of-3 { width: 66.6667%; } .slds-x-small-size_3-of-3, .slds-x-small-size--3-of-3 { width: 100%; } .slds-x-small-size_1-of-4, .slds-x-small-size--1-of-4 { width: 25%; } .slds-x-small-size_2-of-4, .slds-x-small-size--2-of-4 { width: 50%; } .slds-x-small-size_3-of-4, .slds-x-small-size--3-of-4 { width: 75%; } .slds-x-small-size_4-of-4, .slds-x-small-size--4-of-4 { width: 100%; } .slds-x-small-size_1-of-5, .slds-x-small-size--1-of-5 { width: 20%; } .slds-x-small-size_2-of-5, .slds-x-small-size--2-of-5 { width: 40%; } .slds-x-small-size_3-of-5, .slds-x-small-size--3-of-5 { width: 60%; } .slds-x-small-size_4-of-5, .slds-x-small-size--4-of-5 { width: 80%; } .slds-x-small-size_5-of-5, .slds-x-small-size--5-of-5 { width: 100%; } .slds-x-small-size_1-of-6, .slds-x-small-size--1-of-6 { width: 16.6667%; } .slds-x-small-size_2-of-6, .slds-x-small-size--2-of-6 { width: 33.333%; } .slds-x-small-size_3-of-6, .slds-x-small-size--3-of-6 { width: 50%; } .slds-x-small-size_4-of-6, .slds-x-small-size--4-of-6 { width: 66.6667%; } .slds-x-small-size_5-of-6, .slds-x-small-size--5-of-6 { width: 83.3333%; } .slds-x-small-size_6-of-6, .slds-x-small-size--6-of-6 { width: 100%; } .slds-x-small-size_1-of-7, .slds-x-small-size--1-of-7 { width: 14.2857%; } .slds-x-small-size_2-of-7, .slds-x-small-size--2-of-7 { width: 28.5714%; } .slds-x-small-size_3-of-7, .slds-x-small-size--3-of-7 { width: 42.8571%; } .slds-x-small-size_4-of-7, .slds-x-small-size--4-of-7 { width: 57.1429%; } .slds-x-small-size_5-of-7, .slds-x-small-size--5-of-7 { width: 71.4286%; } .slds-x-small-size_6-of-7, .slds-x-small-size--6-of-7 { width: 85.7143%; } .slds-x-small-size_7-of-7, .slds-x-small-size--7-of-7 { width: 100%; } .slds-x-small-size_1-of-8, .slds-x-small-size--1-of-8 { width: 12.5%; } .slds-x-small-size_2-of-8, .slds-x-small-size--2-of-8 { width: 25%; } .slds-x-small-size_3-of-8, .slds-x-small-size--3-of-8 { width: 37.5%; } .slds-x-small-size_4-of-8, .slds-x-small-size--4-of-8 { width: 50%; } .slds-x-small-size_5-of-8, .slds-x-small-size--5-of-8 { width: 62.5%; } .slds-x-small-size_6-of-8, .slds-x-small-size--6-of-8 { width: 75%; } .slds-x-small-size_7-of-8, .slds-x-small-size--7-of-8 { width: 87.5%; } .slds-x-small-size_8-of-8, .slds-x-small-size--8-of-8 { width: 100%; } .slds-x-small-size_1-of-12, .slds-x-small-size--1-of-12 { width: 8.3333%; } .slds-x-small-size_2-of-12, .slds-x-small-size--2-of-12 { width: 16.6667%; } .slds-x-small-size_3-of-12, .slds-x-small-size--3-of-12 { width: 25%; } .slds-x-small-size_4-of-12, .slds-x-small-size--4-of-12 { width: 33.333%; } .slds-x-small-size_5-of-12, .slds-x-small-size--5-of-12 { width: 41.6667%; } .slds-x-small-size_6-of-12, .slds-x-small-size--6-of-12 { width: 50%; } .slds-x-small-size_7-of-12, .slds-x-small-size--7-of-12 { width: 58.3333%; } .slds-x-small-size_8-of-12, .slds-x-small-size--8-of-12 { width: 66.6667%; } .slds-x-small-size_9-of-12, .slds-x-small-size--9-of-12 { width: 75%; } .slds-x-small-size_10-of-12, .slds-x-small-size--10-of-12 { width: 83.3333%; } .slds-x-small-size_11-of-12, .slds-x-small-size--11-of-12 { width: 91.6667%; } .slds-x-small-size_12-of-12, .slds-x-small-size--12-of-12 { width: 100%; } .slds-x-small-order_1, .slds-x-small-order--1 { order: 1; } .slds-x-small-order_2, .slds-x-small-order--2 { order: 2; } .slds-x-small-order_3, .slds-x-small-order--3 { order: 3; } .slds-x-small-order_4, .slds-x-small-order--4 { order: 4; } .slds-x-small-order_5, .slds-x-small-order--5 { order: 5; } .slds-x-small-order_6, .slds-x-small-order--6 { order: 6; } .slds-x-small-order_7, .slds-x-small-order--7 { order: 7; } .slds-x-small-order_8, .slds-x-small-order--8 { order: 8; } .slds-x-small-order_9, .slds-x-small-order--9 { order: 9; } .slds-x-small-order_10, .slds-x-small-order--10 { order: 10; } .slds-x-small-order_11, .slds-x-small-order--11 { order: 11; } .slds-x-small-order_12, .slds-x-small-order--12 { order: 12; } } @media (max-width: 20em) { .slds-max-x-small-size_xxx-small, .slds-max-x-small-size--xxx-small, .slds-max-x-small-size_xx-small, .slds-max-x-small-size--xx-small, .slds-max-x-small-size_x-small, .slds-max-x-small-size--x-small, .slds-max-x-small-size_small, .slds-max-x-small-size--small, .slds-max-x-small-size_medium, .slds-max-x-small-size--medium, .slds-max-x-small-size_large, .slds-max-x-small-size--large, .slds-max-x-small-size_x-large, .slds-max-x-small-size--x-large, .slds-max-x-small-size_xx-large, .slds-max-x-small-size--xx-large { flex: none; } .slds-max-x-small-size_xxx-small, .slds-max-x-small-size--xxx-small { width: 3rem; } .slds-max-x-small-size_xx-small, .slds-max-x-small-size--xx-small { width: 6rem; } .slds-max-x-small-size_x-small, .slds-max-x-small-size--x-small { width: 12rem; } .slds-max-x-small-size_small, .slds-max-x-small-size--small { width: 15rem; } .slds-max-x-small-size_medium, .slds-max-x-small-size--medium { width: 20rem; } .slds-max-x-small-size_large, .slds-max-x-small-size--large { width: 25rem; } .slds-max-x-small-size_x-large, .slds-max-x-small-size--x-large { width: 40rem; } .slds-max-x-small-size_xx-large, .slds-max-x-small-size--xx-large { width: 60rem; } .slds-max-x-small-size_1-of-1, .slds-max-x-small-size--1-of-1 { width: 100%; } .slds-max-x-small-size_1-of-2, .slds-max-x-small-size--1-of-2 { width: 50%; } .slds-max-x-small-size_2-of-2, .slds-max-x-small-size--2-of-2 { width: 100%; } .slds-max-x-small-size_1-of-3, .slds-max-x-small-size--1-of-3 { width: 33.333%; } .slds-max-x-small-size_2-of-3, .slds-max-x-small-size--2-of-3 { width: 66.6667%; } .slds-max-x-small-size_3-of-3, .slds-max-x-small-size--3-of-3 { width: 100%; } .slds-max-x-small-size_1-of-4, .slds-max-x-small-size--1-of-4 { width: 25%; } .slds-max-x-small-size_2-of-4, .slds-max-x-small-size--2-of-4 { width: 50%; } .slds-max-x-small-size_3-of-4, .slds-max-x-small-size--3-of-4 { width: 75%; } .slds-max-x-small-size_4-of-4, .slds-max-x-small-size--4-of-4 { width: 100%; } .slds-max-x-small-size_1-of-5, .slds-max-x-small-size--1-of-5 { width: 20%; } .slds-max-x-small-size_2-of-5, .slds-max-x-small-size--2-of-5 { width: 40%; } .slds-max-x-small-size_3-of-5, .slds-max-x-small-size--3-of-5 { width: 60%; } .slds-max-x-small-size_4-of-5, .slds-max-x-small-size--4-of-5 { width: 80%; } .slds-max-x-small-size_5-of-5, .slds-max-x-small-size--5-of-5 { width: 100%; } .slds-max-x-small-size_1-of-6, .slds-max-x-small-size--1-of-6 { width: 16.6667%; } .slds-max-x-small-size_2-of-6, .slds-max-x-small-size--2-of-6 { width: 33.333%; } .slds-max-x-small-size_3-of-6, .slds-max-x-small-size--3-of-6 { width: 50%; } .slds-max-x-small-size_4-of-6, .slds-max-x-small-size--4-of-6 { width: 66.6667%; } .slds-max-x-small-size_5-of-6, .slds-max-x-small-size--5-of-6 { width: 83.3333%; } .slds-max-x-small-size_6-of-6, .slds-max-x-small-size--6-of-6 { width: 100%; } .slds-max-x-small-size_1-of-7, .slds-max-x-small-size--1-of-7 { width: 14.2857%; } .slds-max-x-small-size_2-of-7, .slds-max-x-small-size--2-of-7 { width: 28.5714%; } .slds-max-x-small-size_3-of-7, .slds-max-x-small-size--3-of-7 { width: 42.8571%; } .slds-max-x-small-size_4-of-7, .slds-max-x-small-size--4-of-7 { width: 57.1429%; } .slds-max-x-small-size_5-of-7, .slds-max-x-small-size--5-of-7 { width: 71.4286%; } .slds-max-x-small-size_6-of-7, .slds-max-x-small-size--6-of-7 { width: 85.7143%; } .slds-max-x-small-size_7-of-7, .slds-max-x-small-size--7-of-7 { width: 100%; } .slds-max-x-small-size_1-of-8, .slds-max-x-small-size--1-of-8 { width: 12.5%; } .slds-max-x-small-size_2-of-8, .slds-max-x-small-size--2-of-8 { width: 25%; } .slds-max-x-small-size_3-of-8, .slds-max-x-small-size--3-of-8 { width: 37.5%; } .slds-max-x-small-size_4-of-8, .slds-max-x-small-size--4-of-8 { width: 50%; } .slds-max-x-small-size_5-of-8, .slds-max-x-small-size--5-of-8 { width: 62.5%; } .slds-max-x-small-size_6-of-8, .slds-max-x-small-size--6-of-8 { width: 75%; } .slds-max-x-small-size_7-of-8, .slds-max-x-small-size--7-of-8 { width: 87.5%; } .slds-max-x-small-size_8-of-8, .slds-max-x-small-size--8-of-8 { width: 100%; } .slds-max-x-small-size_1-of-12, .slds-max-x-small-size--1-of-12 { width: 8.3333%; } .slds-max-x-small-size_2-of-12, .slds-max-x-small-size--2-of-12 { width: 16.6667%; } .slds-max-x-small-size_3-of-12, .slds-max-x-small-size--3-of-12 { width: 25%; } .slds-max-x-small-size_4-of-12, .slds-max-x-small-size--4-of-12 { width: 33.333%; } .slds-max-x-small-size_5-of-12, .slds-max-x-small-size--5-of-12 { width: 41.6667%; } .slds-max-x-small-size_6-of-12, .slds-max-x-small-size--6-of-12 { width: 50%; } .slds-max-x-small-size_7-of-12, .slds-max-x-small-size--7-of-12 { width: 58.3333%; } .slds-max-x-small-size_8-of-12, .slds-max-x-small-size--8-of-12 { width: 66.6667%; } .slds-max-x-small-size_9-of-12, .slds-max-x-small-size--9-of-12 { width: 75%; } .slds-max-x-small-size_10-of-12, .slds-max-x-small-size--10-of-12 { width: 83.3333%; } .slds-max-x-small-size_11-of-12, .slds-max-x-small-size--11-of-12 { width: 91.6667%; } .slds-max-x-small-size_12-of-12, .slds-max-x-small-size--12-of-12 { width: 100%; } .slds-max-x-small-order_1, .slds-max-x-small-order--1 { order: 1; } .slds-max-x-small-order_2, .slds-max-x-small-order--2 { order: 2; } .slds-max-x-small-order_3, .slds-max-x-small-order--3 { order: 3; } .slds-max-x-small-order_4, .slds-max-x-small-order--4 { order: 4; } .slds-max-x-small-order_5, .slds-max-x-small-order--5 { order: 5; } .slds-max-x-small-order_6, .slds-max-x-small-order--6 { order: 6; } .slds-max-x-small-order_7, .slds-max-x-small-order--7 { order: 7; } .slds-max-x-small-order_8, .slds-max-x-small-order--8 { order: 8; } .slds-max-x-small-order_9, .slds-max-x-small-order--9 { order: 9; } .slds-max-x-small-order_10, .slds-max-x-small-order--10 { order: 10; } .slds-max-x-small-order_11, .slds-max-x-small-order--11 { order: 11; } .slds-max-x-small-order_12, .slds-max-x-small-order--12 { order: 12; } } @media (min-width: 30em) { .slds-small-size_xxx-small, .slds-small-size--xxx-small, .slds-small-size_xx-small, .slds-small-size--xx-small, .slds-small-size_x-small, .slds-small-size--x-small, .slds-small-size_small, .slds-small-size--small, .slds-small-size_medium, .slds-small-size--medium, .slds-small-size_large, .slds-small-size--large, .slds-small-size_x-large, .slds-small-size--x-large, .slds-small-size_xx-large, .slds-small-size--xx-large, .slds-small-size_1-of-1, .slds-small-size--1-of-1, .slds-small-size_1-of-2, .slds-small-size--1-of-2, .slds-small-size_2-of-2, .slds-small-size--2-of-2, .slds-small-size_1-of-3, .slds-small-size--1-of-3, .slds-small-size_2-of-3, .slds-small-size--2-of-3, .slds-small-size_3-of-3, .slds-small-size--3-of-3, .slds-small-size_1-of-4, .slds-small-size--1-of-4, .slds-small-size_2-of-4, .slds-small-size--2-of-4, .slds-small-size_3-of-4, .slds-small-size--3-of-4, .slds-small-size_4-of-4, .slds-small-size--4-of-4, .slds-small-size_1-of-5, .slds-small-size--1-of-5, .slds-small-size_2-of-5, .slds-small-size--2-of-5, .slds-small-size_3-of-5, .slds-small-size--3-of-5, .slds-small-size_4-of-5, .slds-small-size--4-of-5, .slds-small-size_5-of-5, .slds-small-size--5-of-5, .slds-small-size_1-of-6, .slds-small-size--1-of-6, .slds-small-size_2-of-6, .slds-small-size--2-of-6, .slds-small-size_3-of-6, .slds-small-size--3-of-6, .slds-small-size_4-of-6, .slds-small-size--4-of-6, .slds-small-size_5-of-6, .slds-small-size--5-of-6, .slds-small-size_6-of-6, .slds-small-size--6-of-6, .slds-small-size_1-of-7, .slds-small-size--1-of-7, .slds-small-size_2-of-7, .slds-small-size--2-of-7, .slds-small-size_3-of-7, .slds-small-size--3-of-7, .slds-small-size_4-of-7, .slds-small-size--4-of-7, .slds-small-size_5-of-7, .slds-small-size--5-of-7, .slds-small-size_6-of-7, .slds-small-size--6-of-7, .slds-small-size_7-of-7, .slds-small-size--7-of-7, .slds-small-size_1-of-8, .slds-small-size--1-of-8, .slds-small-size_2-of-8, .slds-small-size--2-of-8, .slds-small-size_3-of-8, .slds-small-size--3-of-8, .slds-small-size_4-of-8, .slds-small-size--4-of-8, .slds-small-size_5-of-8, .slds-small-size--5-of-8, .slds-small-size_6-of-8, .slds-small-size--6-of-8, .slds-small-size_7-of-8, .slds-small-size--7-of-8, .slds-small-size_8-of-8, .slds-small-size--8-of-8, .slds-small-size_1-of-12, .slds-small-size--1-of-12, .slds-small-size_2-of-12, .slds-small-size--2-of-12, .slds-small-size_3-of-12, .slds-small-size--3-of-12, .slds-small-size_4-of-12, .slds-small-size--4-of-12, .slds-small-size_5-of-12, .slds-small-size--5-of-12, .slds-small-size_6-of-12, .slds-small-size--6-of-12, .slds-small-size_7-of-12, .slds-small-size--7-of-12, .slds-small-size_8-of-12, .slds-small-size--8-of-12, .slds-small-size_9-of-12, .slds-small-size--9-of-12, .slds-small-size_10-of-12, .slds-small-size--10-of-12, .slds-small-size_11-of-12, .slds-small-size--11-of-12, .slds-small-size_12-of-12, .slds-small-size--12-of-12 { flex: none; } .slds-small-size_xxx-small, .slds-small-size--xxx-small { width: 3rem; } .slds-small-size_xx-small, .slds-small-size--xx-small { width: 6rem; } .slds-small-size_x-small, .slds-small-size--x-small { width: 12rem; } .slds-small-size_small, .slds-small-size--small { width: 15rem; } .slds-small-size_medium, .slds-small-size--medium { width: 20rem; } .slds-small-size_large, .slds-small-size--large { width: 25rem; } .slds-small-size_x-large, .slds-small-size--x-large { width: 40rem; } .slds-small-size_xx-large, .slds-small-size--xx-large { width: 60rem; } .slds-small-size_1-of-1, .slds-small-size--1-of-1 { width: 100%; } .slds-small-size_1-of-2, .slds-small-size--1-of-2 { width: 50%; } .slds-small-size_2-of-2, .slds-small-size--2-of-2 { width: 100%; } .slds-small-size_1-of-3, .slds-small-size--1-of-3 { width: 33.333%; } .slds-small-size_2-of-3, .slds-small-size--2-of-3 { width: 66.6667%; } .slds-small-size_3-of-3, .slds-small-size--3-of-3 { width: 100%; } .slds-small-size_1-of-4, .slds-small-size--1-of-4 { width: 25%; } .slds-small-size_2-of-4, .slds-small-size--2-of-4 { width: 50%; } .slds-small-size_3-of-4, .slds-small-size--3-of-4 { width: 75%; } .slds-small-size_4-of-4, .slds-small-size--4-of-4 { width: 100%; } .slds-small-size_1-of-5, .slds-small-size--1-of-5 { width: 20%; } .slds-small-size_2-of-5, .slds-small-size--2-of-5 { width: 40%; } .slds-small-size_3-of-5, .slds-small-size--3-of-5 { width: 60%; } .slds-small-size_4-of-5, .slds-small-size--4-of-5 { width: 80%; } .slds-small-size_5-of-5, .slds-small-size--5-of-5 { width: 100%; } .slds-small-size_1-of-6, .slds-small-size--1-of-6 { width: 16.6667%; } .slds-small-size_2-of-6, .slds-small-size--2-of-6 { width: 33.333%; } .slds-small-size_3-of-6, .slds-small-size--3-of-6 { width: 50%; } .slds-small-size_4-of-6, .slds-small-size--4-of-6 { width: 66.6667%; } .slds-small-size_5-of-6, .slds-small-size--5-of-6 { width: 83.3333%; } .slds-small-size_6-of-6, .slds-small-size--6-of-6 { width: 100%; } .slds-small-size_1-of-7, .slds-small-size--1-of-7 { width: 14.2857%; } .slds-small-size_2-of-7, .slds-small-size--2-of-7 { width: 28.5714%; } .slds-small-size_3-of-7, .slds-small-size--3-of-7 { width: 42.8571%; } .slds-small-size_4-of-7, .slds-small-size--4-of-7 { width: 57.1429%; } .slds-small-size_5-of-7, .slds-small-size--5-of-7 { width: 71.4286%; } .slds-small-size_6-of-7, .slds-small-size--6-of-7 { width: 85.7143%; } .slds-small-size_7-of-7, .slds-small-size--7-of-7 { width: 100%; } .slds-small-size_1-of-8, .slds-small-size--1-of-8 { width: 12.5%; } .slds-small-size_2-of-8, .slds-small-size--2-of-8 { width: 25%; } .slds-small-size_3-of-8, .slds-small-size--3-of-8 { width: 37.5%; } .slds-small-size_4-of-8, .slds-small-size--4-of-8 { width: 50%; } .slds-small-size_5-of-8, .slds-small-size--5-of-8 { width: 62.5%; } .slds-small-size_6-of-8, .slds-small-size--6-of-8 { width: 75%; } .slds-small-size_7-of-8, .slds-small-size--7-of-8 { width: 87.5%; } .slds-small-size_8-of-8, .slds-small-size--8-of-8 { width: 100%; } .slds-small-size_1-of-12, .slds-small-size--1-of-12 { width: 8.3333%; } .slds-small-size_2-of-12, .slds-small-size--2-of-12 { width: 16.6667%; } .slds-small-size_3-of-12, .slds-small-size--3-of-12 { width: 25%; } .slds-small-size_4-of-12, .slds-small-size--4-of-12 { width: 33.333%; } .slds-small-size_5-of-12, .slds-small-size--5-of-12 { width: 41.6667%; } .slds-small-size_6-of-12, .slds-small-size--6-of-12 { width: 50%; } .slds-small-size_7-of-12, .slds-small-size--7-of-12 { width: 58.3333%; } .slds-small-size_8-of-12, .slds-small-size--8-of-12 { width: 66.6667%; } .slds-small-size_9-of-12, .slds-small-size--9-of-12 { width: 75%; } .slds-small-size_10-of-12, .slds-small-size--10-of-12 { width: 83.3333%; } .slds-small-size_11-of-12, .slds-small-size--11-of-12 { width: 91.6667%; } .slds-small-size_12-of-12, .slds-small-size--12-of-12 { width: 100%; } .slds-small-order_1, .slds-small-order--1 { order: 1; } .slds-small-order_2, .slds-small-order--2 { order: 2; } .slds-small-order_3, .slds-small-order--3 { order: 3; } .slds-small-order_4, .slds-small-order--4 { order: 4; } .slds-small-order_5, .slds-small-order--5 { order: 5; } .slds-small-order_6, .slds-small-order--6 { order: 6; } .slds-small-order_7, .slds-small-order--7 { order: 7; } .slds-small-order_8, .slds-small-order--8 { order: 8; } .slds-small-order_9, .slds-small-order--9 { order: 9; } .slds-small-order_10, .slds-small-order--10 { order: 10; } .slds-small-order_11, .slds-small-order--11 { order: 11; } .slds-small-order_12, .slds-small-order--12 { order: 12; } } @media (max-width: 30em) { .slds-max-small-size_xxx-small, .slds-max-small-size--xxx-small, .slds-max-small-size_xx-small, .slds-max-small-size--xx-small, .slds-max-small-size_x-small, .slds-max-small-size--x-small, .slds-max-small-size_small, .slds-max-small-size--small, .slds-max-small-size_medium, .slds-max-small-size--medium, .slds-max-small-size_large, .slds-max-small-size--large, .slds-max-small-size_x-large, .slds-max-small-size--x-large, .slds-max-small-size_xx-large, .slds-max-small-size--xx-large { flex: none; } .slds-max-small-size_xxx-small, .slds-max-small-size--xxx-small { width: 3rem; } .slds-max-small-size_xx-small, .slds-max-small-size--xx-small { width: 6rem; } .slds-max-small-size_x-small, .slds-max-small-size--x-small { width: 12rem; } .slds-max-small-size_small, .slds-max-small-size--small { width: 15rem; } .slds-max-small-size_medium, .slds-max-small-size--medium { width: 20rem; } .slds-max-small-size_large, .slds-max-small-size--large { width: 25rem; } .slds-max-small-size_x-large, .slds-max-small-size--x-large { width: 40rem; } .slds-max-small-size_xx-large, .slds-max-small-size--xx-large { width: 60rem; } .slds-max-small-size_1-of-1, .slds-max-small-size--1-of-1 { width: 100%; } .slds-max-small-size_1-of-2, .slds-max-small-size--1-of-2 { width: 50%; } .slds-max-small-size_2-of-2, .slds-max-small-size--2-of-2 { width: 100%; } .slds-max-small-size_1-of-3, .slds-max-small-size--1-of-3 { width: 33.333%; } .slds-max-small-size_2-of-3, .slds-max-small-size--2-of-3 { width: 66.6667%; } .slds-max-small-size_3-of-3, .slds-max-small-size--3-of-3 { width: 100%; } .slds-max-small-size_1-of-4, .slds-max-small-size--1-of-4 { width: 25%; } .slds-max-small-size_2-of-4, .slds-max-small-size--2-of-4 { width: 50%; } .slds-max-small-size_3-of-4, .slds-max-small-size--3-of-4 { width: 75%; } .slds-max-small-size_4-of-4, .slds-max-small-size--4-of-4 { width: 100%; } .slds-max-small-size_1-of-5, .slds-max-small-size--1-of-5 { width: 20%; } .slds-max-small-size_2-of-5, .slds-max-small-size--2-of-5 { width: 40%; } .slds-max-small-size_3-of-5, .slds-max-small-size--3-of-5 { width: 60%; } .slds-max-small-size_4-of-5, .slds-max-small-size--4-of-5 { width: 80%; } .slds-max-small-size_5-of-5, .slds-max-small-size--5-of-5 { width: 100%; } .slds-max-small-size_1-of-6, .slds-max-small-size--1-of-6 { width: 16.6667%; } .slds-max-small-size_2-of-6, .slds-max-small-size--2-of-6 { width: 33.333%; } .slds-max-small-size_3-of-6, .slds-max-small-size--3-of-6 { width: 50%; } .slds-max-small-size_4-of-6, .slds-max-small-size--4-of-6 { width: 66.6667%; } .slds-max-small-size_5-of-6, .slds-max-small-size--5-of-6 { width: 83.3333%; } .slds-max-small-size_6-of-6, .slds-max-small-size--6-of-6 { width: 100%; } .slds-max-small-size_1-of-7, .slds-max-small-size--1-of-7 { width: 14.2857%; } .slds-max-small-size_2-of-7, .slds-max-small-size--2-of-7 { width: 28.5714%; } .slds-max-small-size_3-of-7, .slds-max-small-size--3-of-7 { width: 42.8571%; } .slds-max-small-size_4-of-7, .slds-max-small-size--4-of-7 { width: 57.1429%; } .slds-max-small-size_5-of-7, .slds-max-small-size--5-of-7 { width: 71.4286%; } .slds-max-small-size_6-of-7, .slds-max-small-size--6-of-7 { width: 85.7143%; } .slds-max-small-size_7-of-7, .slds-max-small-size--7-of-7 { width: 100%; } .slds-max-small-size_1-of-8, .slds-max-small-size--1-of-8 { width: 12.5%; } .slds-max-small-size_2-of-8, .slds-max-small-size--2-of-8 { width: 25%; } .slds-max-small-size_3-of-8, .slds-max-small-size--3-of-8 { width: 37.5%; } .slds-max-small-size_4-of-8, .slds-max-small-size--4-of-8 { width: 50%; } .slds-max-small-size_5-of-8, .slds-max-small-size--5-of-8 { width: 62.5%; } .slds-max-small-size_6-of-8, .slds-max-small-size--6-of-8 { width: 75%; } .slds-max-small-size_7-of-8, .slds-max-small-size--7-of-8 { width: 87.5%; } .slds-max-small-size_8-of-8, .slds-max-small-size--8-of-8 { width: 100%; } .slds-max-small-size_1-of-12, .slds-max-small-size--1-of-12 { width: 8.3333%; } .slds-max-small-size_2-of-12, .slds-max-small-size--2-of-12 { width: 16.6667%; } .slds-max-small-size_3-of-12, .slds-max-small-size--3-of-12 { width: 25%; } .slds-max-small-size_4-of-12, .slds-max-small-size--4-of-12 { width: 33.333%; } .slds-max-small-size_5-of-12, .slds-max-small-size--5-of-12 { width: 41.6667%; } .slds-max-small-size_6-of-12, .slds-max-small-size--6-of-12 { width: 50%; } .slds-max-small-size_7-of-12, .slds-max-small-size--7-of-12 { width: 58.3333%; } .slds-max-small-size_8-of-12, .slds-max-small-size--8-of-12 { width: 66.6667%; } .slds-max-small-size_9-of-12, .slds-max-small-size--9-of-12 { width: 75%; } .slds-max-small-size_10-of-12, .slds-max-small-size--10-of-12 { width: 83.3333%; } .slds-max-small-size_11-of-12, .slds-max-small-size--11-of-12 { width: 91.6667%; } .slds-max-small-size_12-of-12, .slds-max-small-size--12-of-12 { width: 100%; } .slds-max-small-order_1, .slds-max-small-order--1 { order: 1; } .slds-max-small-order_2, .slds-max-small-order--2 { order: 2; } .slds-max-small-order_3, .slds-max-small-order--3 { order: 3; } .slds-max-small-order_4, .slds-max-small-order--4 { order: 4; } .slds-max-small-order_5, .slds-max-small-order--5 { order: 5; } .slds-max-small-order_6, .slds-max-small-order--6 { order: 6; } .slds-max-small-order_7, .slds-max-small-order--7 { order: 7; } .slds-max-small-order_8, .slds-max-small-order--8 { order: 8; } .slds-max-small-order_9, .slds-max-small-order--9 { order: 9; } .slds-max-small-order_10, .slds-max-small-order--10 { order: 10; } .slds-max-small-order_11, .slds-max-small-order--11 { order: 11; } .slds-max-small-order_12, .slds-max-small-order--12 { order: 12; } } @media (min-width: 48em) { .slds-medium-size_xxx-small, .slds-medium-size--xxx-small, .slds-medium-size_xx-small, .slds-medium-size--xx-small, .slds-medium-size_x-small, .slds-medium-size--x-small, .slds-medium-size_small, .slds-medium-size--small, .slds-medium-size_medium, .slds-medium-size--medium, .slds-medium-size_large, .slds-medium-size--large, .slds-medium-size_x-large, .slds-medium-size--x-large, .slds-medium-size_xx-large, .slds-medium-size--xx-large, .slds-medium-size_1-of-1, .slds-medium-size--1-of-1, .slds-medium-size_1-of-2, .slds-medium-size--1-of-2, .slds-medium-size_2-of-2, .slds-medium-size--2-of-2, .slds-medium-size_1-of-3, .slds-medium-size--1-of-3, .slds-medium-size_2-of-3, .slds-medium-size--2-of-3, .slds-medium-size_3-of-3, .slds-medium-size--3-of-3, .slds-medium-size_1-of-4, .slds-medium-size--1-of-4, .slds-medium-size_2-of-4, .slds-medium-size--2-of-4, .slds-medium-size_3-of-4, .slds-medium-size--3-of-4, .slds-medium-size_4-of-4, .slds-medium-size--4-of-4, .slds-medium-size_1-of-5, .slds-medium-size--1-of-5, .slds-medium-size_2-of-5, .slds-medium-size--2-of-5, .slds-medium-size_3-of-5, .slds-medium-size--3-of-5, .slds-medium-size_4-of-5, .slds-medium-size--4-of-5, .slds-medium-size_5-of-5, .slds-medium-size--5-of-5, .slds-medium-size_1-of-6, .slds-medium-size--1-of-6, .slds-medium-size_2-of-6, .slds-medium-size--2-of-6, .slds-medium-size_3-of-6, .slds-medium-size--3-of-6, .slds-medium-size_4-of-6, .slds-medium-size--4-of-6, .slds-medium-size_5-of-6, .slds-medium-size--5-of-6, .slds-medium-size_6-of-6, .slds-medium-size--6-of-6, .slds-medium-size_1-of-7, .slds-medium-size--1-of-7, .slds-medium-size_2-of-7, .slds-medium-size--2-of-7, .slds-medium-size_3-of-7, .slds-medium-size--3-of-7, .slds-medium-size_4-of-7, .slds-medium-size--4-of-7, .slds-medium-size_5-of-7, .slds-medium-size--5-of-7, .slds-medium-size_6-of-7, .slds-medium-size--6-of-7, .slds-medium-size_7-of-7, .slds-medium-size--7-of-7, .slds-medium-size_1-of-8, .slds-medium-size--1-of-8, .slds-medium-size_2-of-8, .slds-medium-size--2-of-8, .slds-medium-size_3-of-8, .slds-medium-size--3-of-8, .slds-medium-size_4-of-8, .slds-medium-size--4-of-8, .slds-medium-size_5-of-8, .slds-medium-size--5-of-8, .slds-medium-size_6-of-8, .slds-medium-size--6-of-8, .slds-medium-size_7-of-8, .slds-medium-size--7-of-8, .slds-medium-size_8-of-8, .slds-medium-size--8-of-8, .slds-medium-size_1-of-12, .slds-medium-size--1-of-12, .slds-medium-size_2-of-12, .slds-medium-size--2-of-12, .slds-medium-size_3-of-12, .slds-medium-size--3-of-12, .slds-medium-size_4-of-12, .slds-medium-size--4-of-12, .slds-medium-size_5-of-12, .slds-medium-size--5-of-12, .slds-medium-size_6-of-12, .slds-medium-size--6-of-12, .slds-medium-size_7-of-12, .slds-medium-size--7-of-12, .slds-medium-size_8-of-12, .slds-medium-size--8-of-12, .slds-medium-size_9-of-12, .slds-medium-size--9-of-12, .slds-medium-size_10-of-12, .slds-medium-size--10-of-12, .slds-medium-size_11-of-12, .slds-medium-size--11-of-12, .slds-medium-size_12-of-12, .slds-medium-size--12-of-12 { flex: none; } .slds-medium-size_xxx-small, .slds-medium-size--xxx-small { width: 3rem; } .slds-medium-size_xx-small, .slds-medium-size--xx-small { width: 6rem; } .slds-medium-size_x-small, .slds-medium-size--x-small { width: 12rem; } .slds-medium-size_small, .slds-medium-size--small { width: 15rem; } .slds-medium-size_medium, .slds-medium-size--medium { width: 20rem; } .slds-medium-size_large, .slds-medium-size--large { width: 25rem; } .slds-medium-size_x-large, .slds-medium-size--x-large { width: 40rem; } .slds-medium-size_xx-large, .slds-medium-size--xx-large { width: 60rem; } .slds-medium-size_1-of-1, .slds-medium-size--1-of-1 { width: 100%; } .slds-medium-size_1-of-2, .slds-medium-size--1-of-2 { width: 50%; } .slds-medium-size_2-of-2, .slds-medium-size--2-of-2 { width: 100%; } .slds-medium-size_1-of-3, .slds-medium-size--1-of-3 { width: 33.333%; } .slds-medium-size_2-of-3, .slds-medium-size--2-of-3 { width: 66.6667%; } .slds-medium-size_3-of-3, .slds-medium-size--3-of-3 { width: 100%; } .slds-medium-size_1-of-4, .slds-medium-size--1-of-4 { width: 25%; } .slds-medium-size_2-of-4, .slds-medium-size--2-of-4 { width: 50%; } .slds-medium-size_3-of-4, .slds-medium-size--3-of-4 { width: 75%; } .slds-medium-size_4-of-4, .slds-medium-size--4-of-4 { width: 100%; } .slds-medium-size_1-of-5, .slds-medium-size--1-of-5 { width: 20%; } .slds-medium-size_2-of-5, .slds-medium-size--2-of-5 { width: 40%; } .slds-medium-size_3-of-5, .slds-medium-size--3-of-5 { width: 60%; } .slds-medium-size_4-of-5, .slds-medium-size--4-of-5 { width: 80%; } .slds-medium-size_5-of-5, .slds-medium-size--5-of-5 { width: 100%; } .slds-medium-size_1-of-6, .slds-medium-size--1-of-6 { width: 16.6667%; } .slds-medium-size_2-of-6, .slds-medium-size--2-of-6 { width: 33.333%; } .slds-medium-size_3-of-6, .slds-medium-size--3-of-6 { width: 50%; } .slds-medium-size_4-of-6, .slds-medium-size--4-of-6 { width: 66.6667%; } .slds-medium-size_5-of-6, .slds-medium-size--5-of-6 { width: 83.3333%; } .slds-medium-size_6-of-6, .slds-medium-size--6-of-6 { width: 100%; } .slds-medium-size_1-of-7, .slds-medium-size--1-of-7 { width: 14.2857%; } .slds-medium-size_2-of-7, .slds-medium-size--2-of-7 { width: 28.5714%; } .slds-medium-size_3-of-7, .slds-medium-size--3-of-7 { width: 42.8571%; } .slds-medium-size_4-of-7, .slds-medium-size--4-of-7 { width: 57.1429%; } .slds-medium-size_5-of-7, .slds-medium-size--5-of-7 { width: 71.4286%; } .slds-medium-size_6-of-7, .slds-medium-size--6-of-7 { width: 85.7143%; } .slds-medium-size_7-of-7, .slds-medium-size--7-of-7 { width: 100%; } .slds-medium-size_1-of-8, .slds-medium-size--1-of-8 { width: 12.5%; } .slds-medium-size_2-of-8, .slds-medium-size--2-of-8 { width: 25%; } .slds-medium-size_3-of-8, .slds-medium-size--3-of-8 { width: 37.5%; } .slds-medium-size_4-of-8, .slds-medium-size--4-of-8 { width: 50%; } .slds-medium-size_5-of-8, .slds-medium-size--5-of-8 { width: 62.5%; } .slds-medium-size_6-of-8, .slds-medium-size--6-of-8 { width: 75%; } .slds-medium-size_7-of-8, .slds-medium-size--7-of-8 { width: 87.5%; } .slds-medium-size_8-of-8, .slds-medium-size--8-of-8 { width: 100%; } .slds-medium-size_1-of-12, .slds-medium-size--1-of-12 { width: 8.3333%; } .slds-medium-size_2-of-12, .slds-medium-size--2-of-12 { width: 16.6667%; } .slds-medium-size_3-of-12, .slds-medium-size--3-of-12 { width: 25%; } .slds-medium-size_4-of-12, .slds-medium-size--4-of-12 { width: 33.333%; } .slds-medium-size_5-of-12, .slds-medium-size--5-of-12 { width: 41.6667%; } .slds-medium-size_6-of-12, .slds-medium-size--6-of-12 { width: 50%; } .slds-medium-size_7-of-12, .slds-medium-size--7-of-12 { width: 58.3333%; } .slds-medium-size_8-of-12, .slds-medium-size--8-of-12 { width: 66.6667%; } .slds-medium-size_9-of-12, .slds-medium-size--9-of-12 { width: 75%; } .slds-medium-size_10-of-12, .slds-medium-size--10-of-12 { width: 83.3333%; } .slds-medium-size_11-of-12, .slds-medium-size--11-of-12 { width: 91.6667%; } .slds-medium-size_12-of-12, .slds-medium-size--12-of-12 { width: 100%; } .slds-medium-order_1, .slds-medium-order--1 { order: 1; } .slds-medium-order_2, .slds-medium-order--2 { order: 2; } .slds-medium-order_3, .slds-medium-order--3 { order: 3; } .slds-medium-order_4, .slds-medium-order--4 { order: 4; } .slds-medium-order_5, .slds-medium-order--5 { order: 5; } .slds-medium-order_6, .slds-medium-order--6 { order: 6; } .slds-medium-order_7, .slds-medium-order--7 { order: 7; } .slds-medium-order_8, .slds-medium-order--8 { order: 8; } .slds-medium-order_9, .slds-medium-order--9 { order: 9; } .slds-medium-order_10, .slds-medium-order--10 { order: 10; } .slds-medium-order_11, .slds-medium-order--11 { order: 11; } .slds-medium-order_12, .slds-medium-order--12 { order: 12; } } @media (max-width: 48em) { .slds-max-medium-size_xxx-small, .slds-max-medium-size--xxx-small, .slds-max-medium-size_xx-small, .slds-max-medium-size--xx-small, .slds-max-medium-size_x-small, .slds-max-medium-size--x-small, .slds-max-medium-size_small, .slds-max-medium-size--small, .slds-max-medium-size_medium, .slds-max-medium-size--medium, .slds-max-medium-size_large, .slds-max-medium-size--large, .slds-max-medium-size_x-large, .slds-max-medium-size--x-large, .slds-max-medium-size_xx-large, .slds-max-medium-size--xx-large { flex: none; } .slds-max-medium-size_xxx-small, .slds-max-medium-size--xxx-small { width: 3rem; } .slds-max-medium-size_xx-small, .slds-max-medium-size--xx-small { width: 6rem; } .slds-max-medium-size_x-small, .slds-max-medium-size--x-small { width: 12rem; } .slds-max-medium-size_small, .slds-max-medium-size--small { width: 15rem; } .slds-max-medium-size_medium, .slds-max-medium-size--medium { width: 20rem; } .slds-max-medium-size_large, .slds-max-medium-size--large { width: 25rem; } .slds-max-medium-size_x-large, .slds-max-medium-size--x-large { width: 40rem; } .slds-max-medium-size_xx-large, .slds-max-medium-size--xx-large { width: 60rem; } .slds-max-medium-size_1-of-1, .slds-max-medium-size--1-of-1 { width: 100%; } .slds-max-medium-size_1-of-2, .slds-max-medium-size--1-of-2 { width: 50%; } .slds-max-medium-size_2-of-2, .slds-max-medium-size--2-of-2 { width: 100%; } .slds-max-medium-size_1-of-3, .slds-max-medium-size--1-of-3 { width: 33.333%; } .slds-max-medium-size_2-of-3, .slds-max-medium-size--2-of-3 { width: 66.6667%; } .slds-max-medium-size_3-of-3, .slds-max-medium-size--3-of-3 { width: 100%; } .slds-max-medium-size_1-of-4, .slds-max-medium-size--1-of-4 { width: 25%; } .slds-max-medium-size_2-of-4, .slds-max-medium-size--2-of-4 { width: 50%; } .slds-max-medium-size_3-of-4, .slds-max-medium-size--3-of-4 { width: 75%; } .slds-max-medium-size_4-of-4, .slds-max-medium-size--4-of-4 { width: 100%; } .slds-max-medium-size_1-of-5, .slds-max-medium-size--1-of-5 { width: 20%; } .slds-max-medium-size_2-of-5, .slds-max-medium-size--2-of-5 { width: 40%; } .slds-max-medium-size_3-of-5, .slds-max-medium-size--3-of-5 { width: 60%; } .slds-max-medium-size_4-of-5, .slds-max-medium-size--4-of-5 { width: 80%; } .slds-max-medium-size_5-of-5, .slds-max-medium-size--5-of-5 { width: 100%; } .slds-max-medium-size_1-of-6, .slds-max-medium-size--1-of-6 { width: 16.6667%; } .slds-max-medium-size_2-of-6, .slds-max-medium-size--2-of-6 { width: 33.333%; } .slds-max-medium-size_3-of-6, .slds-max-medium-size--3-of-6 { width: 50%; } .slds-max-medium-size_4-of-6, .slds-max-medium-size--4-of-6 { width: 66.6667%; } .slds-max-medium-size_5-of-6, .slds-max-medium-size--5-of-6 { width: 83.3333%; } .slds-max-medium-size_6-of-6, .slds-max-medium-size--6-of-6 { width: 100%; } .slds-max-medium-size_1-of-7, .slds-max-medium-size--1-of-7 { width: 14.2857%; } .slds-max-medium-size_2-of-7, .slds-max-medium-size--2-of-7 { width: 28.5714%; } .slds-max-medium-size_3-of-7, .slds-max-medium-size--3-of-7 { width: 42.8571%; } .slds-max-medium-size_4-of-7, .slds-max-medium-size--4-of-7 { width: 57.1429%; } .slds-max-medium-size_5-of-7, .slds-max-medium-size--5-of-7 { width: 71.4286%; } .slds-max-medium-size_6-of-7, .slds-max-medium-size--6-of-7 { width: 85.7143%; } .slds-max-medium-size_7-of-7, .slds-max-medium-size--7-of-7 { width: 100%; } .slds-max-medium-size_1-of-8, .slds-max-medium-size--1-of-8 { width: 12.5%; } .slds-max-medium-size_2-of-8, .slds-max-medium-size--2-of-8 { width: 25%; } .slds-max-medium-size_3-of-8, .slds-max-medium-size--3-of-8 { width: 37.5%; } .slds-max-medium-size_4-of-8, .slds-max-medium-size--4-of-8 { width: 50%; } .slds-max-medium-size_5-of-8, .slds-max-medium-size--5-of-8 { width: 62.5%; } .slds-max-medium-size_6-of-8, .slds-max-medium-size--6-of-8 { width: 75%; } .slds-max-medium-size_7-of-8, .slds-max-medium-size--7-of-8 { width: 87.5%; } .slds-max-medium-size_8-of-8, .slds-max-medium-size--8-of-8 { width: 100%; } .slds-max-medium-size_1-of-12, .slds-max-medium-size--1-of-12 { width: 8.3333%; } .slds-max-medium-size_2-of-12, .slds-max-medium-size--2-of-12 { width: 16.6667%; } .slds-max-medium-size_3-of-12, .slds-max-medium-size--3-of-12 { width: 25%; } .slds-max-medium-size_4-of-12, .slds-max-medium-size--4-of-12 { width: 33.333%; } .slds-max-medium-size_5-of-12, .slds-max-medium-size--5-of-12 { width: 41.6667%; } .slds-max-medium-size_6-of-12, .slds-max-medium-size--6-of-12 { width: 50%; } .slds-max-medium-size_7-of-12, .slds-max-medium-size--7-of-12 { width: 58.3333%; } .slds-max-medium-size_8-of-12, .slds-max-medium-size--8-of-12 { width: 66.6667%; } .slds-max-medium-size_9-of-12, .slds-max-medium-size--9-of-12 { width: 75%; } .slds-max-medium-size_10-of-12, .slds-max-medium-size--10-of-12 { width: 83.3333%; } .slds-max-medium-size_11-of-12, .slds-max-medium-size--11-of-12 { width: 91.6667%; } .slds-max-medium-size_12-of-12, .slds-max-medium-size--12-of-12 { width: 100%; } .slds-max-medium-order_1, .slds-max-medium-order--1 { order: 1; } .slds-max-medium-order_2, .slds-max-medium-order--2 { order: 2; } .slds-max-medium-order_3, .slds-max-medium-order--3 { order: 3; } .slds-max-medium-order_4, .slds-max-medium-order--4 { order: 4; } .slds-max-medium-order_5, .slds-max-medium-order--5 { order: 5; } .slds-max-medium-order_6, .slds-max-medium-order--6 { order: 6; } .slds-max-medium-order_7, .slds-max-medium-order--7 { order: 7; } .slds-max-medium-order_8, .slds-max-medium-order--8 { order: 8; } .slds-max-medium-order_9, .slds-max-medium-order--9 { order: 9; } .slds-max-medium-order_10, .slds-max-medium-order--10 { order: 10; } .slds-max-medium-order_11, .slds-max-medium-order--11 { order: 11; } .slds-max-medium-order_12, .slds-max-medium-order--12 { order: 12; } } @media (min-width: 64em) { .slds-large-size_xxx-small, .slds-large-size--xxx-small, .slds-large-size_xx-small, .slds-large-size--xx-small, .slds-large-size_x-small, .slds-large-size--x-small, .slds-large-size_small, .slds-large-size--small, .slds-large-size_medium, .slds-large-size--medium, .slds-large-size_large, .slds-large-size--large, .slds-large-size_x-large, .slds-large-size--x-large, .slds-large-size_xx-large, .slds-large-size--xx-large, .slds-large-size_1-of-1, .slds-large-size--1-of-1, .slds-large-size_1-of-2, .slds-large-size--1-of-2, .slds-large-size_2-of-2, .slds-large-size--2-of-2, .slds-large-size_1-of-3, .slds-large-size--1-of-3, .slds-large-size_2-of-3, .slds-large-size--2-of-3, .slds-large-size_3-of-3, .slds-large-size--3-of-3, .slds-large-size_1-of-4, .slds-large-size--1-of-4, .slds-large-size_2-of-4, .slds-large-size--2-of-4, .slds-large-size_3-of-4, .slds-large-size--3-of-4, .slds-large-size_4-of-4, .slds-large-size--4-of-4, .slds-large-size_1-of-5, .slds-large-size--1-of-5, .slds-large-size_2-of-5, .slds-large-size--2-of-5, .slds-large-size_3-of-5, .slds-large-size--3-of-5, .slds-large-size_4-of-5, .slds-large-size--4-of-5, .slds-large-size_5-of-5, .slds-large-size--5-of-5, .slds-large-size_1-of-6, .slds-large-size--1-of-6, .slds-large-size_2-of-6, .slds-large-size--2-of-6, .slds-large-size_3-of-6, .slds-large-size--3-of-6, .slds-large-size_4-of-6, .slds-large-size--4-of-6, .slds-large-size_5-of-6, .slds-large-size--5-of-6, .slds-large-size_6-of-6, .slds-large-size--6-of-6, .slds-large-size_1-of-7, .slds-large-size--1-of-7, .slds-large-size_2-of-7, .slds-large-size--2-of-7, .slds-large-size_3-of-7, .slds-large-size--3-of-7, .slds-large-size_4-of-7, .slds-large-size--4-of-7, .slds-large-size_5-of-7, .slds-large-size--5-of-7, .slds-large-size_6-of-7, .slds-large-size--6-of-7, .slds-large-size_7-of-7, .slds-large-size--7-of-7, .slds-large-size_1-of-8, .slds-large-size--1-of-8, .slds-large-size_2-of-8, .slds-large-size--2-of-8, .slds-large-size_3-of-8, .slds-large-size--3-of-8, .slds-large-size_4-of-8, .slds-large-size--4-of-8, .slds-large-size_5-of-8, .slds-large-size--5-of-8, .slds-large-size_6-of-8, .slds-large-size--6-of-8, .slds-large-size_7-of-8, .slds-large-size--7-of-8, .slds-large-size_8-of-8, .slds-large-size--8-of-8, .slds-large-size_1-of-12, .slds-large-size--1-of-12, .slds-large-size_2-of-12, .slds-large-size--2-of-12, .slds-large-size_3-of-12, .slds-large-size--3-of-12, .slds-large-size_4-of-12, .slds-large-size--4-of-12, .slds-large-size_5-of-12, .slds-large-size--5-of-12, .slds-large-size_6-of-12, .slds-large-size--6-of-12, .slds-large-size_7-of-12, .slds-large-size--7-of-12, .slds-large-size_8-of-12, .slds-large-size--8-of-12, .slds-large-size_9-of-12, .slds-large-size--9-of-12, .slds-large-size_10-of-12, .slds-large-size--10-of-12, .slds-large-size_11-of-12, .slds-large-size--11-of-12, .slds-large-size_12-of-12, .slds-large-size--12-of-12 { flex: none; } .slds-large-size_xxx-small, .slds-large-size--xxx-small { width: 3rem; } .slds-large-size_xx-small, .slds-large-size--xx-small { width: 6rem; } .slds-large-size_x-small, .slds-large-size--x-small { width: 12rem; } .slds-large-size_small, .slds-large-size--small { width: 15rem; } .slds-large-size_medium, .slds-large-size--medium { width: 20rem; } .slds-large-size_large, .slds-large-size--large { width: 25rem; } .slds-large-size_x-large, .slds-large-size--x-large { width: 40rem; } .slds-large-size_xx-large, .slds-large-size--xx-large { width: 60rem; } .slds-large-size_1-of-1, .slds-large-size--1-of-1 { width: 100%; } .slds-large-size_1-of-2, .slds-large-size--1-of-2 { width: 50%; } .slds-large-size_2-of-2, .slds-large-size--2-of-2 { width: 100%; } .slds-large-size_1-of-3, .slds-large-size--1-of-3 { width: 33.333%; } .slds-large-size_2-of-3, .slds-large-size--2-of-3 { width: 66.6667%; } .slds-large-size_3-of-3, .slds-large-size--3-of-3 { width: 100%; } .slds-large-size_1-of-4, .slds-large-size--1-of-4 { width: 25%; } .slds-large-size_2-of-4, .slds-large-size--2-of-4 { width: 50%; } .slds-large-size_3-of-4, .slds-large-size--3-of-4 { width: 75%; } .slds-large-size_4-of-4, .slds-large-size--4-of-4 { width: 100%; } .slds-large-size_1-of-5, .slds-large-size--1-of-5 { width: 20%; } .slds-large-size_2-of-5, .slds-large-size--2-of-5 { width: 40%; } .slds-large-size_3-of-5, .slds-large-size--3-of-5 { width: 60%; } .slds-large-size_4-of-5, .slds-large-size--4-of-5 { width: 80%; } .slds-large-size_5-of-5, .slds-large-size--5-of-5 { width: 100%; } .slds-large-size_1-of-6, .slds-large-size--1-of-6 { width: 16.6667%; } .slds-large-size_2-of-6, .slds-large-size--2-of-6 { width: 33.333%; } .slds-large-size_3-of-6, .slds-large-size--3-of-6 { width: 50%; } .slds-large-size_4-of-6, .slds-large-size--4-of-6 { width: 66.6667%; } .slds-large-size_5-of-6, .slds-large-size--5-of-6 { width: 83.3333%; } .slds-large-size_6-of-6, .slds-large-size--6-of-6 { width: 100%; } .slds-large-size_1-of-7, .slds-large-size--1-of-7 { width: 14.2857%; } .slds-large-size_2-of-7, .slds-large-size--2-of-7 { width: 28.5714%; } .slds-large-size_3-of-7, .slds-large-size--3-of-7 { width: 42.8571%; } .slds-large-size_4-of-7, .slds-large-size--4-of-7 { width: 57.1429%; } .slds-large-size_5-of-7, .slds-large-size--5-of-7 { width: 71.4286%; } .slds-large-size_6-of-7, .slds-large-size--6-of-7 { width: 85.7143%; } .slds-large-size_7-of-7, .slds-large-size--7-of-7 { width: 100%; } .slds-large-size_1-of-8, .slds-large-size--1-of-8 { width: 12.5%; } .slds-large-size_2-of-8, .slds-large-size--2-of-8 { width: 25%; } .slds-large-size_3-of-8, .slds-large-size--3-of-8 { width: 37.5%; } .slds-large-size_4-of-8, .slds-large-size--4-of-8 { width: 50%; } .slds-large-size_5-of-8, .slds-large-size--5-of-8 { width: 62.5%; } .slds-large-size_6-of-8, .slds-large-size--6-of-8 { width: 75%; } .slds-large-size_7-of-8, .slds-large-size--7-of-8 { width: 87.5%; } .slds-large-size_8-of-8, .slds-large-size--8-of-8 { width: 100%; } .slds-large-size_1-of-12, .slds-large-size--1-of-12 { width: 8.3333%; } .slds-large-size_2-of-12, .slds-large-size--2-of-12 { width: 16.6667%; } .slds-large-size_3-of-12, .slds-large-size--3-of-12 { width: 25%; } .slds-large-size_4-of-12, .slds-large-size--4-of-12 { width: 33.333%; } .slds-large-size_5-of-12, .slds-large-size--5-of-12 { width: 41.6667%; } .slds-large-size_6-of-12, .slds-large-size--6-of-12 { width: 50%; } .slds-large-size_7-of-12, .slds-large-size--7-of-12 { width: 58.3333%; } .slds-large-size_8-of-12, .slds-large-size--8-of-12 { width: 66.6667%; } .slds-large-size_9-of-12, .slds-large-size--9-of-12 { width: 75%; } .slds-large-size_10-of-12, .slds-large-size--10-of-12 { width: 83.3333%; } .slds-large-size_11-of-12, .slds-large-size--11-of-12 { width: 91.6667%; } .slds-large-size_12-of-12, .slds-large-size--12-of-12 { width: 100%; } .slds-large-order_1, .slds-large-order--1 { order: 1; } .slds-large-order_2, .slds-large-order--2 { order: 2; } .slds-large-order_3, .slds-large-order--3 { order: 3; } .slds-large-order_4, .slds-large-order--4 { order: 4; } .slds-large-order_5, .slds-large-order--5 { order: 5; } .slds-large-order_6, .slds-large-order--6 { order: 6; } .slds-large-order_7, .slds-large-order--7 { order: 7; } .slds-large-order_8, .slds-large-order--8 { order: 8; } .slds-large-order_9, .slds-large-order--9 { order: 9; } .slds-large-order_10, .slds-large-order--10 { order: 10; } .slds-large-order_11, .slds-large-order--11 { order: 11; } .slds-large-order_12, .slds-large-order--12 { order: 12; } } @media (max-width: 64em) { .slds-max-large-size_xxx-small, .slds-max-large-size--xxx-small, .slds-max-large-size_xx-small, .slds-max-large-size--xx-small, .slds-max-large-size_x-small, .slds-max-large-size--x-small, .slds-max-large-size_small, .slds-max-large-size--small, .slds-max-large-size_medium, .slds-max-large-size--medium, .slds-max-large-size_large, .slds-max-large-size--large, .slds-max-large-size_x-large, .slds-max-large-size--x-large, .slds-max-large-size_xx-large, .slds-max-large-size--xx-large { flex: none; } .slds-max-large-size_xxx-small, .slds-max-large-size--xxx-small { width: 3rem; } .slds-max-large-size_xx-small, .slds-max-large-size--xx-small { width: 6rem; } .slds-max-large-size_x-small, .slds-max-large-size--x-small { width: 12rem; } .slds-max-large-size_small, .slds-max-large-size--small { width: 15rem; } .slds-max-large-size_medium, .slds-max-large-size--medium { width: 20rem; } .slds-max-large-size_large, .slds-max-large-size--large { width: 25rem; } .slds-max-large-size_x-large, .slds-max-large-size--x-large { width: 40rem; } .slds-max-large-size_xx-large, .slds-max-large-size--xx-large { width: 60rem; } .slds-max-large-size_1-of-1, .slds-max-large-size--1-of-1 { width: 100%; } .slds-max-large-size_1-of-2, .slds-max-large-size--1-of-2 { width: 50%; } .slds-max-large-size_2-of-2, .slds-max-large-size--2-of-2 { width: 100%; } .slds-max-large-size_1-of-3, .slds-max-large-size--1-of-3 { width: 33.333%; } .slds-max-large-size_2-of-3, .slds-max-large-size--2-of-3 { width: 66.6667%; } .slds-max-large-size_3-of-3, .slds-max-large-size--3-of-3 { width: 100%; } .slds-max-large-size_1-of-4, .slds-max-large-size--1-of-4 { width: 25%; } .slds-max-large-size_2-of-4, .slds-max-large-size--2-of-4 { width: 50%; } .slds-max-large-size_3-of-4, .slds-max-large-size--3-of-4 { width: 75%; } .slds-max-large-size_4-of-4, .slds-max-large-size--4-of-4 { width: 100%; } .slds-max-large-size_1-of-5, .slds-max-large-size--1-of-5 { width: 20%; } .slds-max-large-size_2-of-5, .slds-max-large-size--2-of-5 { width: 40%; } .slds-max-large-size_3-of-5, .slds-max-large-size--3-of-5 { width: 60%; } .slds-max-large-size_4-of-5, .slds-max-large-size--4-of-5 { width: 80%; } .slds-max-large-size_5-of-5, .slds-max-large-size--5-of-5 { width: 100%; } .slds-max-large-size_1-of-6, .slds-max-large-size--1-of-6 { width: 16.6667%; } .slds-max-large-size_2-of-6, .slds-max-large-size--2-of-6 { width: 33.333%; } .slds-max-large-size_3-of-6, .slds-max-large-size--3-of-6 { width: 50%; } .slds-max-large-size_4-of-6, .slds-max-large-size--4-of-6 { width: 66.6667%; } .slds-max-large-size_5-of-6, .slds-max-large-size--5-of-6 { width: 83.3333%; } .slds-max-large-size_6-of-6, .slds-max-large-size--6-of-6 { width: 100%; } .slds-max-large-size_1-of-7, .slds-max-large-size--1-of-7 { width: 14.2857%; } .slds-max-large-size_2-of-7, .slds-max-large-size--2-of-7 { width: 28.5714%; } .slds-max-large-size_3-of-7, .slds-max-large-size--3-of-7 { width: 42.8571%; } .slds-max-large-size_4-of-7, .slds-max-large-size--4-of-7 { width: 57.1429%; } .slds-max-large-size_5-of-7, .slds-max-large-size--5-of-7 { width: 71.4286%; } .slds-max-large-size_6-of-7, .slds-max-large-size--6-of-7 { width: 85.7143%; } .slds-max-large-size_7-of-7, .slds-max-large-size--7-of-7 { width: 100%; } .slds-max-large-size_1-of-8, .slds-max-large-size--1-of-8 { width: 12.5%; } .slds-max-large-size_2-of-8, .slds-max-large-size--2-of-8 { width: 25%; } .slds-max-large-size_3-of-8, .slds-max-large-size--3-of-8 { width: 37.5%; } .slds-max-large-size_4-of-8, .slds-max-large-size--4-of-8 { width: 50%; } .slds-max-large-size_5-of-8, .slds-max-large-size--5-of-8 { width: 62.5%; } .slds-max-large-size_6-of-8, .slds-max-large-size--6-of-8 { width: 75%; } .slds-max-large-size_7-of-8, .slds-max-large-size--7-of-8 { width: 87.5%; } .slds-max-large-size_8-of-8, .slds-max-large-size--8-of-8 { width: 100%; } .slds-max-large-size_1-of-12, .slds-max-large-size--1-of-12 { width: 8.3333%; } .slds-max-large-size_2-of-12, .slds-max-large-size--2-of-12 { width: 16.6667%; } .slds-max-large-size_3-of-12, .slds-max-large-size--3-of-12 { width: 25%; } .slds-max-large-size_4-of-12, .slds-max-large-size--4-of-12 { width: 33.333%; } .slds-max-large-size_5-of-12, .slds-max-large-size--5-of-12 { width: 41.6667%; } .slds-max-large-size_6-of-12, .slds-max-large-size--6-of-12 { width: 50%; } .slds-max-large-size_7-of-12, .slds-max-large-size--7-of-12 { width: 58.3333%; } .slds-max-large-size_8-of-12, .slds-max-large-size--8-of-12 { width: 66.6667%; } .slds-max-large-size_9-of-12, .slds-max-large-size--9-of-12 { width: 75%; } .slds-max-large-size_10-of-12, .slds-max-large-size--10-of-12 { width: 83.3333%; } .slds-max-large-size_11-of-12, .slds-max-large-size--11-of-12 { width: 91.6667%; } .slds-max-large-size_12-of-12, .slds-max-large-size--12-of-12 { width: 100%; } .slds-max-large-order_1, .slds-max-large-order--1 { order: 1; } .slds-max-large-order_2, .slds-max-large-order--2 { order: 2; } .slds-max-large-order_3, .slds-max-large-order--3 { order: 3; } .slds-max-large-order_4, .slds-max-large-order--4 { order: 4; } .slds-max-large-order_5, .slds-max-large-order--5 { order: 5; } .slds-max-large-order_6, .slds-max-large-order--6 { order: 6; } .slds-max-large-order_7, .slds-max-large-order--7 { order: 7; } .slds-max-large-order_8, .slds-max-large-order--8 { order: 8; } .slds-max-large-order_9, .slds-max-large-order--9 { order: 9; } .slds-max-large-order_10, .slds-max-large-order--10 { order: 10; } .slds-max-large-order_11, .slds-max-large-order--11 { order: 11; } .slds-max-large-order_12, .slds-max-large-order--12 { order: 12; } } .slds-size_xxx-small, .slds-size--xxx-small, .slds-size_xx-small, .slds-size--xx-small, .slds-size_x-small, .slds-size--x-small, .slds-size_small, .slds-size--small, .slds-size_medium, .slds-size--medium, .slds-size_large, .slds-size--large, .slds-size_x-large, .slds-size--x-large, .slds-size_xx-large, .slds-size--xx-large, .slds-size_1-of-1, .slds-size--1-of-1, .slds-size_1-of-2, .slds-size--1-of-2, .slds-size_2-of-2, .slds-size--2-of-2, .slds-size_1-of-3, .slds-size--1-of-3, .slds-size_2-of-3, .slds-size--2-of-3, .slds-size_3-of-3, .slds-size--3-of-3, .slds-size_1-of-4, .slds-size--1-of-4, .slds-size_2-of-4, .slds-size--2-of-4, .slds-size_3-of-4, .slds-size--3-of-4, .slds-size_4-of-4, .slds-size--4-of-4, .slds-size_1-of-5, .slds-size--1-of-5, .slds-size_2-of-5, .slds-size--2-of-5, .slds-size_3-of-5, .slds-size--3-of-5, .slds-size_4-of-5, .slds-size--4-of-5, .slds-size_5-of-5, .slds-size--5-of-5, .slds-size_1-of-6, .slds-size--1-of-6, .slds-size_2-of-6, .slds-size--2-of-6, .slds-size_3-of-6, .slds-size--3-of-6, .slds-size_4-of-6, .slds-size--4-of-6, .slds-size_5-of-6, .slds-size--5-of-6, .slds-size_6-of-6, .slds-size--6-of-6, .slds-size_1-of-7, .slds-size--1-of-7, .slds-size_2-of-7, .slds-size--2-of-7, .slds-size_3-of-7, .slds-size--3-of-7, .slds-size_4-of-7, .slds-size--4-of-7, .slds-size_5-of-7, .slds-size--5-of-7, .slds-size_6-of-7, .slds-size--6-of-7, .slds-size_7-of-7, .slds-size--7-of-7, .slds-size_1-of-8, .slds-size--1-of-8, .slds-size_2-of-8, .slds-size--2-of-8, .slds-size_3-of-8, .slds-size--3-of-8, .slds-size_4-of-8, .slds-size--4-of-8, .slds-size_5-of-8, .slds-size--5-of-8, .slds-size_6-of-8, .slds-size--6-of-8, .slds-size_7-of-8, .slds-size--7-of-8, .slds-size_8-of-8, .slds-size--8-of-8, .slds-size_1-of-12, .slds-size--1-of-12, .slds-size_2-of-12, .slds-size--2-of-12, .slds-size_3-of-12, .slds-size--3-of-12, .slds-size_4-of-12, .slds-size--4-of-12, .slds-size_5-of-12, .slds-size--5-of-12, .slds-size_6-of-12, .slds-size--6-of-12, .slds-size_7-of-12, .slds-size--7-of-12, .slds-size_8-of-12, .slds-size--8-of-12, .slds-size_9-of-12, .slds-size--9-of-12, .slds-size_10-of-12, .slds-size--10-of-12, .slds-size_11-of-12, .slds-size--11-of-12, .slds-size_12-of-12, .slds-size--12-of-12 { flex: none; } .slds-has-buffer { margin: var(--slds-g-spacing-3); } .slds-has-full-bleed { margin: 0; } .slds-has-bottom-magnet { margin-block-end: 0 !important; border-end-start-radius: 0 !important; border-end-end-radius: 0 !important; } .slds-has-top-magnet { margin-block-start: 0 !important; border-start-start-radius: 0 !important; border-start-end-radius: 0 !important; } .slds-has-top-magnet.slds-has-buffer { margin-block-end: 0; border-radius: 0; border-block-start: 0; box-shadow: none; } .slds-is-static { position: static; } .slds-is-relative { position: relative; } .slds-is-fixed { position: fixed; } .slds-is-absolute { position: absolute; } @media print { .slds-no-print { display: none; } } .slds-assistive-text { position: absolute !important; margin: -1px !important; border: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; text-transform: none !important; white-space: nowrap !important; } .slds-assistive-text_focus:focus, .slds-assistive-text--focus:focus { margin: inherit !important; border: inherit !important; padding: inherit !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; } .slds-is-collapsed { height: 0; overflow: hidden; } .slds-is-expanded { height: auto; overflow: visible; } .slds-hidden { visibility: hidden !important; } .slds-visible { visibility: visible; } .slds-hide { display: none !important; } .slds-show { display: block; } .slds-show_inline-block, .slds-show--inline-block { display: inline-block; } .slds-show_inline, .slds-show--inline { display: inline; } .slds-transition-hide { opacity: 0; } .slds-transition-show { opacity: 1; } .slds-x-small-show { display: none; } @media (min-width: 320px) { .slds-x-small-show { display: block; } .slds-x-small-show_inline-block, .slds-x-small-show--inline-block { display: inline-block; } .slds-x-small-show_inline, .slds-x-small-show--inline { display: inline; } } .slds-x-small-show-only { display: none; } @media (min-width: 320px) and (max-width: 479px) { .slds-x-small-show-only { display: block; } .slds-x-small-show-only_inline-block, .slds-x-small-show-only--inline-block { display: inline-block; } .slds-x-small-show-only_inline, .slds-x-small-show-only--inline { display: inline; } } @media (max-width: 479px) { .slds-max-x-small-hide { display: none; } } .slds-small-show { display: none; } @media (min-width: 480px) { .slds-small-show { display: block; } .slds-small-show_inline-block, .slds-small-show--inline-block { display: inline-block; } .slds-small-show_inline, .slds-small-show--inline { display: inline; } } .slds-small-show-only { display: none; } @media (min-width: 480px) and (max-width: 767px) { .slds-small-show-only { display: block; } .slds-small-show-only_inline-block, .slds-small-show-only--inline-block { display: inline-block; } .slds-small-show-only_inline, .slds-small-show-only--inline { display: inline; } } @media (max-width: 767px) { .slds-max-small-hide { display: none; } } .slds-medium-show { display: none; } @media (min-width: 768px) { .slds-medium-show { display: block; } .slds-medium-show_inline-block, .slds-medium-show--inline-block { display: inline-block; } .slds-medium-show_inline, .slds-medium-show--inline { display: inline; } } .slds-medium-show-only { display: none; } @media (min-width: 768px) and (max-width: 1023px) { .slds-medium-show-only { display: block; } .slds-medium-show-only_inline-block, .slds-medium-show-only--inline-block { display: inline-block; } .slds-medium-show-only_inline, .slds-medium-show-only--inline { display: inline; } } @media (max-width: 1023px) { .slds-max-medium-hide { display: none; } } .slds-large-show { display: none; } @media (min-width: 1024px) { .slds-large-show { display: block; } .slds-large-show_inline-block, .slds-large-show--inline-block { display: inline-block; } .slds-large-show_inline, .slds-large-show--inline { display: inline; } } @media (min-width: 320px) { .slds-hide_x-small, .slds-hide--x-small { display: none !important; } } @media (max-width: 319px) { .slds-show_x-small, .slds-show--x-small { display: none !important; } } @media (min-width: 480px) { .slds-hide_small, .slds-hide--small { display: none !important; } } @media (max-width: 479px) { .slds-show_small, .slds-show--small { display: none !important; } } @media (min-width: 768px) { .slds-hide_medium, .slds-hide--medium { display: none !important; } } @media (max-width: 767px) { .slds-show_medium, .slds-show--medium { display: none !important; } } @media (min-width: 1024px) { .slds-hide_large, .slds-hide--large { display: none !important; } } @media (max-width: 1023px) { .slds-show_large, .slds-show--large { display: none !important; } } @media (min-width: 1280px) { .slds-hide_x-large, .slds-hide--x-large { display: none !important; } } @media (max-width: 1279px) { .slds-show_x-large, .slds-show--x-large { display: none !important; } } .slds-is-visually-empty { visibility: hidden !important; width: 0; } .slds-line-clamp { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; white-space: pre-line; } .slds-line-clamp_x-small, .slds-line-clamp--x-small { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: pre-line; } .slds-line-clamp_small, .slds-line-clamp--small { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; white-space: pre-line; } .slds-line-clamp_medium, .slds-line-clamp--medium { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; text-overflow: ellipsis; white-space: pre-line; } .slds-line-clamp_large, .slds-line-clamp--large { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; text-overflow: ellipsis; white-space: pre-line; } .slds-color-scheme--light, html:has(body.slds-color-scheme--light) { color-scheme: only light; } .slds-color-scheme--dark, html:has(body.slds-color-scheme--dark) { color-scheme: only dark; } .slds-color-scheme--system, html:has(body.slds-color-scheme--system) { color-scheme: light dark; }