@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +7 -7
  2. package/build/components/Breadcrumbs/style.css +1 -1
  3. package/build/components/Breadcrumbs/style.css.map +1 -1
  4. package/build/components/PromoBanner/style.css +1 -1
  5. package/build/components/PromoBanner/style.css.map +1 -1
  6. package/build/components/index.js +1 -1
  7. package/build/components/index.js.map +1 -1
  8. package/build/components/tsconfig.tsbuildinfo +1 -1
  9. package/build/lib/base.css.map +1 -1
  10. package/build/lib/components.css +1 -1
  11. package/build/lib/components.css.map +1 -1
  12. package/build/lib/scripts.js +1 -1
  13. package/build/lib/scripts.js.map +1 -1
  14. package/build/lib/style.css +1 -1
  15. package/build/lib/style.css.map +1 -1
  16. package/build/lib/tsconfig.tsbuildinfo +1 -1
  17. package/build/lib/utilities.css +1 -1
  18. package/build/lib/utilities.css.map +1 -1
  19. package/build/search-index.json +1 -1
  20. package/package.json +6 -6
  21. package/src/components/Breadcrumbs/styles/mixins.scss +6 -1
  22. package/src/components/PromoBanner/PromoBanner.tsx +4 -1
  23. package/src/components/PromoBanner/styles/mixins.scss +12 -0
  24. package/src/components/PromoBanner/styles/style.scss +12 -0
  25. package/src/components/PromoBanner/tests/PromoBanner.conformance.test.js +11 -0
  26. package/src/components/PromoBanner/tests/PromoBanner.unit.test.js +25 -0
  27. package/src/styles/utilities/horizontal-scroll.scss +28 -11
package/build/lib/utilities.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["utilities.scss"],"names":[],"mappings":"AAAA,iBACE,oBACE,0DACF,CACA,sBACE,4DACF,CACA,qBACE,2DACF,CACA,mBACE,yDACF,CACA,yBACE,+DACF,CACA,yBACE,+DACF,CACA,iBACE,uDACF,CACA,mBACE,yDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,kBACE,wDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,cACE,oDACF,CACA,gBACE,sDACF,CACA,eACE,qDACF,CACA,aACE,mDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,kBACE,wDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,eACE,qDACF,CACA,eACE,iDACF,CACA,eACE,iDACF,CACA,iBACE,mDACF,CACA,eACE,iDACF,CACA,oBACE,sDACF,CACA,iBACE,mDACF,CACA,gBACE,kDACF,CACA,iBACE,mDACF,CACA,cACE,yCACF,CACA,gBACE,2CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,aACE,wCACF,CACA,cACE,yCACF,CACA,cACE,yCACF,CACA,YACE,uCACF,CACA,aACE,wCACF,CACA,eACE,0CACF,CACA,kBACE,6CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,eACE,0CACF,CACA,aACE,oBACF,CACA,cACE,wCACF,CACA,YACE,oBACF,CACA,aACE,oBACF,CACA,YACE,6CACF,CACA,cACE,0CACF,CACA,UACE,+BAAoC,CACpC,+BACF,CACA,2CACE,6CACF,CACA,UACE,kCAAoC,CACpC,+BACF,CACA,2CACE,oBACF,CACA,2CACE,uBACF,CACA,WACE,yDAA2D,CAC3D,oBACF,CACA,gBACE,wDAA0D,CAC1D,yCACF,CACA,SACE,sDACF,CACA,iBACE,4DACF,CACA,SACE,oDAEF,CACA,mBAFE,oBAKF,CAHA,UACE,oDAEF,CACA,SACE,oDAEF,CACA,oBAFE,oBAKF,CAHA,WACE,oDAEF,CACA,WACE,oDAAsD,CACtD,oBACF,CACA,mBACE,kCAAoC,CACpC,oBACF,CACA,QACE,kCAAoC,CACpC,oBACF,CACA,WACE,yDAEF,CACA,4BAFE,yCAKF,CAHA,iBACE,+DAEF,CACA,iBACE,+DAAiE,CACjE,yCACF,CACA,4GAIE,iDAAkD,CAClD,+BACF,CACA,uBACE,+BACF,CAIA,0BACE,yBACF,CAMA,aAEE,yBACF,CACA,QACE,yBACF,CACA,MACE,yBACF,CACA,WAEE,2BACF,CACA,WACE,mCAAqC,CACrC,oCACF,CAIA,+BACE,8BACF,CACA,uBACE,mCACF,CACA,WACE,uBAAyB,CACzB,yBACF,CACA,aAEE,iBAAmB,CAEnB,eAAgB,CAChB,gBAAoB,CAFpB,mBAGF,CA1CF,CAIA,iBAuCE,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,OACE,kBAAmB,CAEnB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,aACE,4BACF,CACA,WACE,4BACF,CACA,eACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CACA,YACE,yBACF,CACA,cACE,2BACF,CACA,aACE,0BACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,iBACE,0BACF,CACA,gBACE,yBACF,CACA,kBACE,2BACF,CACF,CACA,uBACE,8BACF,CACA,cACE,+BACF,CACA,WACE,4BACF,CACA,cACE,+BACF,CACA,gBACE,iCACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,mBACE,+BACF,CACA,gBACE,4BACF,CACA,mBACE,+BACF,CACA,qBACE,iCACF,CACF,CACA,mBACE,yBACF,CACA,iBACE,wBAA0B,CAC1B,0BACF,CACA,gBACE,cACF,CACA,eACE,cACF,CACA,aACE,cACF,CAGA,uBACE,kBACF,CACA,QACE,6CACF,CACA,mBACE,mDACF,CACA,cACE,uCACF,CACA,mEACE,wCACF,CACA,gBACE,uCACF,CAGA,IACE,qBACF,CAIA,WACE,2BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,SACE,yBACF,CA7CF,CAqBA,iBAyBE,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,eACE,2BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,aACE,yBACF,CACF,CACA,SACE,sBACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,SACE,yBACF,CACA,SACE,0BACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,QACE,kBACF,CACA,QACE,mBACF,CACA,iCACE,UAAW,CACX,aACF,CAIA,uBACE,UACF,CACA,uBACE,0BACF,CACA,qBACE,wBACF,CACA,wBACE,sBACF,CACA,8BACE,4BACF,CACA,+BACE,6BACF,CACA,mBACE,sBACF,CACA,iBACE,oBACF,CACA,oBACE,kBACF,CACA,qBACE,mBACF,CACA,iBACE,aAAc,CACd,iBACF,CACA,kBACE,gBAAiB,CACjB,cACF,CACA,mBACE,gBAAiB,CACjB,iBACF,CACA,gBACE,qBACF,CACA,mBACE,mBACF,CACA,mBACE,iBACF,CACA,oBACE,kBACF,CACA,iBACE,SACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,4BACE,0BACF,CACA,0BACE,wBACF,CACA,6BACE,sBACF,CACA,mCACE,4BACF,CACA,oCACE,6BACF,CACA,wBACE,sBACF,CACA,sBACE,oBACF,CACA,yBACE,kBACF,CACA,0BACE,mBACF,CACA,sBACE,aAAc,CACd,iBACF,CACA,uBACE,gBAAiB,CACjB,cACF,CACA,wBACE,gBAAiB,CACjB,iBACF,CACA,qBACE,qBACF,CACA,wBACE,mBACF,CACA,wBACE,iBACF,CACA,yBACE,kBACF,CACA,sBACE,SACF,CACF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,SACE,aACF,CACA,gBACE,oBACF,CACA,UACE,cACF,CACA,QACE,YACF,CACA,eACE,mBACF,CACA,aACE,qBACF,CACA,WACE,oBACF,CACA,yDACE,mBACE,oBACF,CACF,CACA,YACE,qBACF,CACA,cACE,0BAA4B,CAC5B,2BACF,CACA,UACE,2BACF,CACA,UACE,2BACF,CAGA,0BASE,0BAA2B,CAC3B,0BAA8B,CAJ9B,QAAS,CAJT,UAAW,CAEX,WAAY,CAIZ,eAAgB,CAHhB,SAAU,CAEV,iBAAkB,CAJlB,SAQF,CACA,MACE,sBACF,CACA,WACE,iBACF,CAnBF,CACA,iBAmBE,oCACE,cACE,sBACF,CACF,CACA,yDACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,8DACE,cACE,sBACF,CACF,CACA,wCACE,SACE,sBACF,CACF,CACA,qCACE,SACE,sBACF,CACF,CACA,wCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,+DACE,cACE,sBACF,CACF,CACA,wCACE,UACE,sBACF,CACF,CACA,qCACE,UACE,sBACF,CACF,CACA,wCACE,eACE,sBACF,CACF,CACF,CACA,iBACE,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,aACE,iBACF,CAGA,aACE,iBACF,CAJF,CAMF,CACA,iBACE,6CAIE,4BAA6B,CAF7B,wEAAyE,CACzE,oBAEF,CACA,iDAEE,uBACF,CACA,mFAGE,eAAgB,CAChB,8CAA+C,CAC/C,kBAAmB,CAHnB,cAIF,CACA,+FAGE,2CAA4C,CAC5C,kBAAmB,CAFnB,SAGF,CACA,mBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,2BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,wBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,gCAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACF,CACA,iBAKE,mDAIE,YAAa,CADb,cAEF,CACA,4DAIE,eAAgB,CADhB,YAEF,CACF","file":"utilities.css","sourcesContent":["@layer utilities {\n .background-primary {\n background-color: var(--color-background-primary) !important;\n }\n .background-secondary {\n background-color: var(--color-background-secondary) !important;\n }\n .background-contrast {\n background-color: var(--color-background-contrast) !important;\n }\n .background-accent {\n background-color: var(--color-background-accent) !important;\n }\n .background-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n }\n .background-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n }\n .surface-primary {\n background-color: var(--color-surface-primary) !important;\n }\n .surface-secondary {\n background-color: var(--color-surface-secondary) !important;\n }\n .surface-tertiary {\n background-color: var(--color-surface-tertiary) !important;\n }\n .surface-subtle {\n background-color: var(--color-surface-subtle) !important;\n }\n .surface-moderate {\n background-color: var(--color-surface-moderate) !important;\n }\n .surface-contrast {\n background-color: var(--color-surface-contrast) !important;\n }\n .surface-accent {\n background-color: var(--color-surface-accent) !important;\n }\n .fill-primary {\n background-color: var(--color-fill-primary) !important;\n }\n .fill-secondary {\n background-color: var(--color-fill-secondary) !important;\n }\n .fill-tertiary {\n background-color: var(--color-fill-tertiary) !important;\n }\n .fill-subtle {\n background-color: var(--color-fill-subtle) !important;\n }\n .fill-moderate {\n background-color: var(--color-fill-moderate) !important;\n }\n .fill-disabled {\n background-color: var(--color-fill-disabled) !important;\n }\n .fill-contrast {\n background-color: var(--color-fill-contrast) !important;\n }\n .fill-accent1 {\n background-color: var(--color-fill-accent1) !important;\n }\n .fill-accent2 {\n background-color: var(--color-fill-accent2) !important;\n }\n .fill-accent3 {\n background-color: var(--color-fill-accent3) !important;\n }\n .fill-accent4 {\n background-color: var(--color-fill-accent4) !important;\n }\n .fill-accent5 {\n background-color: var(--color-fill-accent5) !important;\n }\n .fill-information {\n background-color: var(--color-fill-information) !important;\n }\n .fill-positive {\n background-color: var(--color-fill-positive) !important;\n }\n .fill-warning {\n background-color: var(--color-fill-warning) !important;\n }\n .fill-negative {\n background-color: var(--color-fill-negative) !important;\n }\n .border-subtle {\n border-color: var(--color-border-subtle) !important;\n }\n .border-strong {\n border-color: var(--color-border-strong) !important;\n }\n .border-contrast {\n border-color: var(--color-border-contrast) !important;\n }\n .border-accent {\n border-color: var(--color-border-accent) !important;\n }\n .border-information {\n border-color: var(--color-border-information) !important;\n }\n .border-positive {\n border-color: var(--color-border-positive) !important;\n }\n .border-warning {\n border-color: var(--color-border-warning) !important;\n }\n .border-negative {\n border-color: var(--color-border-negative) !important;\n }\n .text-default {\n color: var(--color-text-default) !important;\n }\n .text-secondary {\n color: var(--color-text-secondary) !important;\n }\n .text-disabled {\n color: var(--color-text-disabled) !important;\n }\n .text-inverse {\n color: var(--color-text-inverse) !important;\n }\n .text-accent {\n color: var(--color-text-accent) !important;\n }\n .icon-default {\n color: var(--color-icon-default) !important;\n }\n .icon-inverse {\n color: var(--color-icon-inverse) !important;\n }\n .icon-brand {\n color: var(--color-icon-brand) !important;\n }\n .icon-accent {\n color: var(--color-icon-accent) !important;\n }\n .icon-disabled {\n color: var(--color-icon-disabled) !important;\n }\n .icon-information {\n color: var(--color-icon-information) !important;\n }\n .icon-positive {\n color: var(--color-icon-positive) !important;\n }\n .icon-warning {\n color: var(--color-icon-warning) !important;\n }\n .icon-negative {\n color: var(--color-icon-negative) !important;\n }\n .color-black {\n color: #000000 !important;\n }\n .color-orange {\n color: var(--color-text-accent) !important;\n }\n .color-gray {\n color: #666666 !important;\n }\n .color-white {\n color: #ffffff !important;\n }\n .color-blue {\n color: var(--color-icon-information) !important;\n }\n .color-danger {\n color: var(--color-icon-negative) !important;\n }\n .bg-white {\n background-color: #ffffff !important;\n color: var(--color-text-default);\n }\n .bg-white .color-blue, .bg-white.color-blue {\n color: var(--color-icon-information) !important;\n }\n .bg-black {\n background-color: #141414 !important;\n color: var(--color-text-inverse);\n }\n .bg-black .color-gray, .bg-black.color-gray {\n color: #dddddd !important;\n }\n .bg-black .color-blue, .bg-black.color-blue {\n color: #4bb4e6 !important;\n }\n .bg-orange {\n background-color: var(--color-surface-secondary) !important;\n color: #000000 !important;\n }\n .bg-orange-dark {\n background-color: var(--color-surface-tertiary) !important;\n color: var(--color-text-inverse) !important;\n }\n .bg-gray {\n background-color: var(--color-surface-subtle) !important;\n }\n .bg-gray-lighter {\n background-color: var(--color-background-secondary) !important;\n }\n .bg-blue {\n background-color: var(--color-fill-accent1) !important;\n color: #000000 !important;\n }\n .bg-green {\n background-color: var(--color-fill-accent2) !important;\n color: #000000 !important;\n }\n .bg-pink {\n background-color: var(--color-fill-accent3) !important;\n color: #000000 !important;\n }\n .bg-violet {\n background-color: var(--color-fill-accent4) !important;\n color: #000000 !important;\n }\n .bg-yellow {\n background-color: var(--color-fill-accent5) !important;\n color: #000000 !important;\n }\n .bg-yellow-lighter {\n background-color: #fff6b6 !important;\n color: #000000 !important;\n }\n .bg-red {\n background-color: #ff4d4d !important;\n color: #000000 !important;\n }\n .bg-accent {\n background-color: var(--color-background-accent) !important;\n color: var(--color-text-default) !important;\n }\n .bg-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n color: var(--color-text-default) !important;\n }\n .bg-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n color: var(--color-text-default) !important;\n }\n .bg-orange::selection,\n .bg-orange-dark::selection,\n .surface-secondary::selection,\n .surface-tertiary::selection {\n background-color: var(--color-background-contrast);\n color: var(--color-text-inverse);\n }\n .color-gray::selection {\n color: var(--color-text-default);\n }\n .bg-none {\n background: none !important;\n }\n .background-none {\n background: none !important;\n }\n}\n/**\n * Resets margin-bottom of the last child to zero\n */\n@layer utilities {\n strong,\n .bold {\n font-weight: 700 !important;\n }\n .normal {\n font-weight: 400 !important;\n }\n .thin {\n font-weight: 300 !important;\n }\n em,\n .italic {\n font-style: italic !important;\n }\n .underline {\n text-decoration: underline !important;\n text-underline-offset: 0.1em !important;\n }\n .no-underline {\n text-decoration: none !important;\n }\n .underline-hover {\n text-decoration: none !important;\n }\n .underline-hover:hover {\n text-decoration: underline !important;\n }\n .no-accent {\n color: inherit !important;\n text-decoration: underline;\n }\n small,\n .small {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n letter-spacing: 0rem;\n }\n @media screen and (min-width: 768px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n @media screen and (min-width: 992px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n .large {\n font-size: 1.125rem;\n line-height: 1.625rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n @media screen and (min-width: 768px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n @media screen and (min-width: 992px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n .text-nowrap {\n white-space: nowrap !important;\n }\n .text-wrap {\n white-space: normal !important;\n }\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .align-left {\n text-align: left !important;\n }\n .align-center {\n text-align: center !important;\n }\n .align-right {\n text-align: right !important;\n }\n @media screen and (min-width: 480px) {\n .align-sm-right {\n text-align: right !important;\n }\n .align-sm-left {\n text-align: left !important;\n }\n .align-sm-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-md-right {\n text-align: right !important;\n }\n .align-md-left {\n text-align: left !important;\n }\n .align-md-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-lg-right {\n text-align: right !important;\n }\n .align-lg-left {\n text-align: left !important;\n }\n .align-lg-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-xl-right {\n text-align: right !important;\n }\n .align-xl-left {\n text-align: left !important;\n }\n .align-xl-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-xxl-right {\n text-align: right !important;\n }\n .align-xxl-left {\n text-align: left !important;\n }\n .align-xxl-center {\n text-align: center !important;\n }\n }\n .reset-text-decoration {\n text-decoration: none !important;\n }\n .align-middle {\n vertical-align: middle !important;\n }\n .align-top {\n vertical-align: top !important;\n }\n .align-bottom {\n vertical-align: bottom !important;\n }\n .align-baseline {\n vertical-align: baseline !important;\n }\n @media screen and (min-width: 480px) {\n .align-middle--sm {\n vertical-align: middle !important;\n }\n .align-top--sm {\n vertical-align: top !important;\n }\n .align-bottom--sm {\n vertical-align: bottom !important;\n }\n .align-baseline--sm {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-middle--md {\n vertical-align: middle !important;\n }\n .align-top--md {\n vertical-align: top !important;\n }\n .align-bottom--md {\n vertical-align: bottom !important;\n }\n .align-baseline--md {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-middle--lg {\n vertical-align: middle !important;\n }\n .align-top--lg {\n vertical-align: top !important;\n }\n .align-bottom--lg {\n vertical-align: bottom !important;\n }\n .align-baseline--lg {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-middle--xl {\n vertical-align: middle !important;\n }\n .align-top--xl {\n vertical-align: top !important;\n }\n .align-bottom--xl {\n vertical-align: bottom !important;\n }\n .align-baseline--xl {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-middle--xxl {\n vertical-align: middle !important;\n }\n .align-top--xxl {\n vertical-align: top !important;\n }\n .align-bottom--xxl {\n vertical-align: bottom !important;\n }\n .align-baseline--xxl {\n vertical-align: baseline !important;\n }\n }\n .reset-font-weight {\n font-weight: normal !important;\n }\n .reset-font-size {\n font-size: 16px !important;\n line-height: 1.25 !important;\n }\n .text-fullwidth {\n max-width: none;\n }\n .text-readable {\n max-width: 35em;\n }\n .text-narrow {\n max-width: 22em;\n }\n}\n@layer utilities {\n .border-radius--medium {\n border-radius: 10px;\n }\n .border {\n border: 2px solid var(--color-border-contrast);\n }\n .border.is-invalid {\n border-color: var(--color-border-negative) !important;\n }\n .border--gray {\n border-color: var(--color-border-subtle);\n }\n .border--gray.border-hover:hover, .border--gray.is-indicating:hover {\n border-color: var(--color-text-secondary);\n }\n .border--orange {\n border-color: var(--color-border-accent);\n }\n}\n@layer utilities {\n .mb {\n margin-bottom: 1.25rem;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n .mb-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-small {\n margin-bottom: 10px !important;\n }\n .mb-medium {\n margin-bottom: 20px !important;\n }\n .mb-large {\n margin-bottom: 30px !important;\n }\n .mb-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n @media screen and (min-width: 480px) {\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n .mb-sm-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-sm-small {\n margin-bottom: 10px !important;\n }\n .mb-sm-medium {\n margin-bottom: 20px !important;\n }\n .mb-sm-large {\n margin-bottom: 30px !important;\n }\n .mb-sm-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n .mb-md-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-md-small {\n margin-bottom: 10px !important;\n }\n .mb-md-medium {\n margin-bottom: 20px !important;\n }\n .mb-md-large {\n margin-bottom: 30px !important;\n }\n .mb-md-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n .mb-lg-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-lg-small {\n margin-bottom: 10px !important;\n }\n .mb-lg-medium {\n margin-bottom: 20px !important;\n }\n .mb-lg-large {\n margin-bottom: 30px !important;\n }\n .mb-lg-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n .mb-xl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xl-small {\n margin-bottom: 10px !important;\n }\n .mb-xl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xl-large {\n margin-bottom: 30px !important;\n }\n .mb-xl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n .mb-xxl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xxl-small {\n margin-bottom: 10px !important;\n }\n .mb-xxl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xxl-large {\n margin-bottom: 30px !important;\n }\n .mb-xxl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n }\n .mt-none {\n margin-top: 0 !important;\n }\n .pt-none {\n padding-top: 0 !important;\n }\n .mr-none {\n margin-right: 0 !important;\n }\n .pr-none {\n padding-right: 0 !important;\n }\n .pb-none {\n padding-bottom: 0 !important;\n }\n .ml-none {\n margin-left: 0 !important;\n }\n .pl-none {\n padding-left: 0 !important;\n }\n .no-mrg {\n margin: 0 !important;\n }\n .no-pad {\n padding: 0 !important;\n }\n .clearfix::before, .clearfix::after {\n content: \"\";\n display: table;\n }\n .clearfix::after {\n clear: both;\n }\n .clear {\n clear: both;\n }\n .justify-content-start {\n justify-content: flex-start;\n }\n .justify-content-end {\n justify-content: flex-end;\n }\n .justify-content-center {\n justify-content: center;\n }\n .justify-content-space-around {\n justify-content: space-around;\n }\n .justify-content-space-between {\n justify-content: space-between;\n }\n .align-items-start {\n align-items: flex-start;\n }\n .align-items-end {\n align-items: flex-end;\n }\n .align-items-center {\n align-items: center;\n }\n .align-items-stretch {\n align-items: stretch;\n }\n .align-self-left {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top {\n align-self: flex-start;\n }\n .align-self-bottom {\n align-self: flex-end;\n }\n .align-self-middle {\n align-self: center;\n }\n .align-self-stretch {\n align-self: stretch;\n }\n .align-self-last {\n order: 999;\n }\n @media screen and (min-width: 480px) {\n .justify-content-start--sm {\n justify-content: flex-start;\n }\n .justify-content-end--sm {\n justify-content: flex-end;\n }\n .justify-content-center--sm {\n justify-content: center;\n }\n .justify-content-space-around--sm {\n justify-content: space-around;\n }\n .justify-content-space-between--sm {\n justify-content: space-between;\n }\n .align-items-start--sm {\n align-items: flex-start;\n }\n .align-items-end--sm {\n align-items: flex-end;\n }\n .align-items-center--sm {\n align-items: center;\n }\n .align-items-stretch--sm {\n align-items: stretch;\n }\n .align-self-left--sm {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--sm {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--sm {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--sm {\n align-self: flex-start;\n }\n .align-self-bottom--sm {\n align-self: flex-end;\n }\n .align-self-middle--sm {\n align-self: center;\n }\n .align-self-stretch--sm {\n align-self: stretch;\n }\n .align-self-last--sm {\n order: 999;\n }\n }\n @media screen and (min-width: 768px) {\n .justify-content-start--md {\n justify-content: flex-start;\n }\n .justify-content-end--md {\n justify-content: flex-end;\n }\n .justify-content-center--md {\n justify-content: center;\n }\n .justify-content-space-around--md {\n justify-content: space-around;\n }\n .justify-content-space-between--md {\n justify-content: space-between;\n }\n .align-items-start--md {\n align-items: flex-start;\n }\n .align-items-end--md {\n align-items: flex-end;\n }\n .align-items-center--md {\n align-items: center;\n }\n .align-items-stretch--md {\n align-items: stretch;\n }\n .align-self-left--md {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--md {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--md {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--md {\n align-self: flex-start;\n }\n .align-self-bottom--md {\n align-self: flex-end;\n }\n .align-self-middle--md {\n align-self: center;\n }\n .align-self-stretch--md {\n align-self: stretch;\n }\n .align-self-last--md {\n order: 999;\n }\n }\n @media screen and (min-width: 992px) {\n .justify-content-start--lg {\n justify-content: flex-start;\n }\n .justify-content-end--lg {\n justify-content: flex-end;\n }\n .justify-content-center--lg {\n justify-content: center;\n }\n .justify-content-space-around--lg {\n justify-content: space-around;\n }\n .justify-content-space-between--lg {\n justify-content: space-between;\n }\n .align-items-start--lg {\n align-items: flex-start;\n }\n .align-items-end--lg {\n align-items: flex-end;\n }\n .align-items-center--lg {\n align-items: center;\n }\n .align-items-stretch--lg {\n align-items: stretch;\n }\n .align-self-left--lg {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--lg {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--lg {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--lg {\n align-self: flex-start;\n }\n .align-self-bottom--lg {\n align-self: flex-end;\n }\n .align-self-middle--lg {\n align-self: center;\n }\n .align-self-stretch--lg {\n align-self: stretch;\n }\n .align-self-last--lg {\n order: 999;\n }\n }\n @media screen and (min-width: 1240px) {\n .justify-content-start--xl {\n justify-content: flex-start;\n }\n .justify-content-end--xl {\n justify-content: flex-end;\n }\n .justify-content-center--xl {\n justify-content: center;\n }\n .justify-content-space-around--xl {\n justify-content: space-around;\n }\n .justify-content-space-between--xl {\n justify-content: space-between;\n }\n .align-items-start--xl {\n align-items: flex-start;\n }\n .align-items-end--xl {\n align-items: flex-end;\n }\n .align-items-center--xl {\n align-items: center;\n }\n .align-items-stretch--xl {\n align-items: stretch;\n }\n .align-self-left--xl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xl {\n align-self: flex-start;\n }\n .align-self-bottom--xl {\n align-self: flex-end;\n }\n .align-self-middle--xl {\n align-self: center;\n }\n .align-self-stretch--xl {\n align-self: stretch;\n }\n .align-self-last--xl {\n order: 999;\n }\n }\n @media screen and (min-width: 1380px) {\n .justify-content-start--xxl {\n justify-content: flex-start;\n }\n .justify-content-end--xxl {\n justify-content: flex-end;\n }\n .justify-content-center--xxl {\n justify-content: center;\n }\n .justify-content-space-around--xxl {\n justify-content: space-around;\n }\n .justify-content-space-between--xxl {\n justify-content: space-between;\n }\n .align-items-start--xxl {\n align-items: flex-start;\n }\n .align-items-end--xxl {\n align-items: flex-end;\n }\n .align-items-center--xxl {\n align-items: center;\n }\n .align-items-stretch--xxl {\n align-items: stretch;\n }\n .align-self-left--xxl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xxl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xxl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xxl {\n align-self: flex-start;\n }\n .align-self-bottom--xxl {\n align-self: flex-end;\n }\n .align-self-middle--xxl {\n align-self: center;\n }\n .align-self-stretch--xxl {\n align-self: stretch;\n }\n .align-self-last--xxl {\n order: 999;\n }\n }\n .aspect-ratio-21-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 21/9;\n }\n .aspect-ratio-16-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 16/9;\n }\n .aspect-ratio-4-3 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 4/3;\n }\n .aspect-ratio-1-1 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 1/1;\n }\n .aspect-ratio-3-2 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 3/2;\n }\n .d-block {\n display: block;\n }\n .d-inline-block {\n display: inline-block;\n }\n .d-inline {\n display: inline;\n }\n .d-flex {\n display: flex;\n }\n .d-inline-flex {\n display: inline-flex;\n }\n .flex-column {\n flex-direction: column;\n }\n .fullwidth {\n width: 100% !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .fullwidth-xs-only {\n width: 100% !important;\n }\n }\n .fullheight {\n height: 100% !important;\n }\n .center-block {\n margin-left: auto !important;\n margin-right: auto !important;\n }\n .relative {\n position: relative !important;\n }\n .absolute {\n position: absolute !important;\n }\n}\n@layer utilities {\n .visually-hidden,\n .sr-only {\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n position: absolute;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n }\n .hide {\n display: none !important;\n }\n .invisible {\n visibility: hidden;\n }\n @media screen and (min-width: 480px) {\n .show-xs-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .hide-xs-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) {\n .hide-sm {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .hide-sm-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .hide-md {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .hide-md-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .hide-lg {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .hide-lg-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .hide-xl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .hide-xl-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .hide-xxl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl-only {\n display: none !important;\n }\n }\n}\n@layer utilities {\n .order-1 {\n order: 1 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-1-xs-only {\n order: 1 !important;\n }\n }\n .order-2 {\n order: 2 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-2-xs-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-1-sm {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-1-sm-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-2-sm {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-2-sm-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-1-md {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-1-md-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-2-md {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-2-md-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-1-lg {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-1-lg-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-2-lg {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-2-lg-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-1-xl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-1-xl-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-2-xl {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-2-xl-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-1-xxl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-2-xxl {\n order: 2 !important;\n }\n }\n}\n@layer utilities {\n [class*=horizontal-scroll],\n .table-scrollable {\n scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);\n scrollbar-width: thin;\n scroll-snap-type: x mandatory;\n }\n [class*=horizontal-scroll] > *,\n .table-scrollable > * {\n scroll-snap-align: start;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar,\n .table-scrollable::-webkit-scrollbar {\n height: 0.375rem;\n appearance: none;\n background-color: var(--color-surface-moderate);\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb {\n opacity: 1;\n background-color: var(--color-fill-contrast);\n border-radius: 99px;\n }\n .horizontal-scroll {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n @media screen and (min-width: 480px) {\n .horizontal-scroll--sm {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--sm-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 768px) {\n .horizontal-scroll--md {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--md-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 992px) {\n .horizontal-scroll--lg {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--lg-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1240px) {\n .horizontal-scroll--xl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1380px) {\n .horizontal-scroll--xxl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xxl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n}\n@layer utilities {\n /**\n * Resets for megamenu and footer\n * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.\n **/\n .osk-footer-menu,\n .mm-header ul,\n .megamenu-header ul {\n max-width: none;\n margin-top: 0;\n }\n .osk-footer-menu li,\n .mm-header ul li,\n .megamenu-header ul li {\n margin-top: 0;\n margin-bottom: 0;\n }\n}"]}
1
+ {"version":3,"sources":["utilities.scss"],"names":[],"mappings":"AAAA,iBACE,oBACE,0DACF,CACA,sBACE,4DACF,CACA,qBACE,2DACF,CACA,mBACE,yDACF,CACA,yBACE,+DACF,CACA,yBACE,+DACF,CACA,iBACE,uDACF,CACA,mBACE,yDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,kBACE,wDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,cACE,oDACF,CACA,gBACE,sDACF,CACA,eACE,qDACF,CACA,aACE,mDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,kBACE,wDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,eACE,qDACF,CACA,eACE,iDACF,CACA,eACE,iDACF,CACA,iBACE,mDACF,CACA,eACE,iDACF,CACA,oBACE,sDACF,CACA,iBACE,mDACF,CACA,gBACE,kDACF,CACA,iBACE,mDACF,CACA,cACE,yCACF,CACA,gBACE,2CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,aACE,wCACF,CACA,cACE,yCACF,CACA,cACE,yCACF,CACA,YACE,uCACF,CACA,aACE,wCACF,CACA,eACE,0CACF,CACA,kBACE,6CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,eACE,0CACF,CACA,aACE,oBACF,CACA,cACE,wCACF,CACA,YACE,oBACF,CACA,aACE,oBACF,CACA,YACE,6CACF,CACA,cACE,0CACF,CACA,UACE,+BAAoC,CACpC,+BACF,CACA,2CACE,6CACF,CACA,UACE,kCAAoC,CACpC,+BACF,CACA,2CACE,oBACF,CACA,2CACE,uBACF,CACA,WACE,yDAA2D,CAC3D,oBACF,CACA,gBACE,wDAA0D,CAC1D,yCACF,CACA,SACE,sDACF,CACA,iBACE,4DACF,CACA,SACE,oDAEF,CACA,mBAFE,oBAKF,CAHA,UACE,oDAEF,CACA,SACE,oDAEF,CACA,oBAFE,oBAKF,CAHA,WACE,oDAEF,CACA,WACE,oDAAsD,CACtD,oBACF,CACA,mBACE,kCAAoC,CACpC,oBACF,CACA,QACE,kCAAoC,CACpC,oBACF,CACA,WACE,yDAEF,CACA,4BAFE,yCAKF,CAHA,iBACE,+DAEF,CACA,iBACE,+DAAiE,CACjE,yCACF,CACA,4GAIE,iDAAkD,CAClD,+BACF,CACA,uBACE,+BACF,CAIA,0BACE,yBACF,CAMA,aAEE,yBACF,CACA,QACE,yBACF,CACA,MACE,yBACF,CACA,WAEE,2BACF,CACA,WACE,mCAAqC,CACrC,oCACF,CAIA,+BACE,8BACF,CACA,uBACE,mCACF,CACA,WACE,uBAAyB,CACzB,yBACF,CACA,aAEE,iBAAmB,CAEnB,eAAgB,CAChB,gBAAoB,CAFpB,mBAGF,CA1CF,CAIA,iBAuCE,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,OACE,kBAAmB,CAEnB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,aACE,4BACF,CACA,WACE,4BACF,CACA,eACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CACA,YACE,yBACF,CACA,cACE,2BACF,CACA,aACE,0BACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,iBACE,0BACF,CACA,gBACE,yBACF,CACA,kBACE,2BACF,CACF,CACA,uBACE,8BACF,CACA,cACE,+BACF,CACA,WACE,4BACF,CACA,cACE,+BACF,CACA,gBACE,iCACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,mBACE,+BACF,CACA,gBACE,4BACF,CACA,mBACE,+BACF,CACA,qBACE,iCACF,CACF,CACA,mBACE,yBACF,CACA,iBACE,wBAA0B,CAC1B,0BACF,CACA,gBACE,cACF,CACA,eACE,cACF,CACA,aACE,cACF,CAGA,uBACE,kBACF,CACA,QACE,6CACF,CACA,mBACE,mDACF,CACA,cACE,uCACF,CACA,mEACE,wCACF,CACA,gBACE,uCACF,CAGA,IACE,qBACF,CAIA,WACE,2BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,SACE,yBACF,CA7CF,CAqBA,iBAyBE,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,eACE,2BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,aACE,yBACF,CACF,CACA,SACE,sBACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,SACE,yBACF,CACA,SACE,0BACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,QACE,kBACF,CACA,QACE,mBACF,CACA,iCACE,UAAW,CACX,aACF,CAIA,uBACE,UACF,CACA,uBACE,0BACF,CACA,qBACE,wBACF,CACA,wBACE,sBACF,CACA,8BACE,4BACF,CACA,+BACE,6BACF,CACA,mBACE,sBACF,CACA,iBACE,oBACF,CACA,oBACE,kBACF,CACA,qBACE,mBACF,CACA,iBACE,aAAc,CACd,iBACF,CACA,kBACE,gBAAiB,CACjB,cACF,CACA,mBACE,gBAAiB,CACjB,iBACF,CACA,gBACE,qBACF,CACA,mBACE,mBACF,CACA,mBACE,iBACF,CACA,oBACE,kBACF,CACA,iBACE,SACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,4BACE,0BACF,CACA,0BACE,wBACF,CACA,6BACE,sBACF,CACA,mCACE,4BACF,CACA,oCACE,6BACF,CACA,wBACE,sBACF,CACA,sBACE,oBACF,CACA,yBACE,kBACF,CACA,0BACE,mBACF,CACA,sBACE,aAAc,CACd,iBACF,CACA,uBACE,gBAAiB,CACjB,cACF,CACA,wBACE,gBAAiB,CACjB,iBACF,CACA,qBACE,qBACF,CACA,wBACE,mBACF,CACA,wBACE,iBACF,CACA,yBACE,kBACF,CACA,sBACE,SACF,CACF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,SACE,aACF,CACA,gBACE,oBACF,CACA,UACE,cACF,CACA,QACE,YACF,CACA,eACE,mBACF,CACA,aACE,qBACF,CACA,WACE,oBACF,CACA,yDACE,mBACE,oBACF,CACF,CACA,YACE,qBACF,CACA,cACE,0BAA4B,CAC5B,2BACF,CACA,UACE,2BACF,CACA,UACE,2BACF,CAGA,0BASE,0BAA2B,CAC3B,0BAA8B,CAJ9B,QAAS,CAJT,UAAW,CAEX,WAAY,CAIZ,eAAgB,CAHhB,SAAU,CAEV,iBAAkB,CAJlB,SAQF,CACA,MACE,sBACF,CACA,WACE,iBACF,CAnBF,CACA,iBAmBE,oCACE,cACE,sBACF,CACF,CACA,yDACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,8DACE,cACE,sBACF,CACF,CACA,wCACE,SACE,sBACF,CACF,CACA,qCACE,SACE,sBACF,CACF,CACA,wCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,+DACE,cACE,sBACF,CACF,CACA,wCACE,UACE,sBACF,CACF,CACA,qCACE,UACE,sBACF,CACF,CACA,wCACE,eACE,sBACF,CACF,CACF,CACA,iBACE,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,aACE,iBACF,CAGA,aACE,iBACF,CAJF,CAMF,CACA,iBACE,6CAEE,4BACF,CACA,iDAEE,uBACF,CACA,wCACE,mFAGE,eAAgB,CAChB,8CAA+C,CAC/C,kBAAmB,CAHnB,cAIF,CACA,+FAEE,8CAA+C,CAC/C,kBACF,CACA,+FAGE,2CAA4C,CAC5C,kBAAmB,CAFnB,SAGF,CACA,gbAKE,qDACF,CACF,CACA,4CACE,6CAEE,wEAAyE,CACzE,oBACF,CACF,CACA,mBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,2BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,wBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,gCAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACF,CACA,iBAKE,mDAIE,YAAa,CADb,cAEF,CACA,4DAIE,eAAgB,CADhB,YAEF,CACF","file":"utilities.css","sourcesContent":["@layer utilities {\n .background-primary {\n background-color: var(--color-background-primary) !important;\n }\n .background-secondary {\n background-color: var(--color-background-secondary) !important;\n }\n .background-contrast {\n background-color: var(--color-background-contrast) !important;\n }\n .background-accent {\n background-color: var(--color-background-accent) !important;\n }\n .background-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n }\n .background-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n }\n .surface-primary {\n background-color: var(--color-surface-primary) !important;\n }\n .surface-secondary {\n background-color: var(--color-surface-secondary) !important;\n }\n .surface-tertiary {\n background-color: var(--color-surface-tertiary) !important;\n }\n .surface-subtle {\n background-color: var(--color-surface-subtle) !important;\n }\n .surface-moderate {\n background-color: var(--color-surface-moderate) !important;\n }\n .surface-contrast {\n background-color: var(--color-surface-contrast) !important;\n }\n .surface-accent {\n background-color: var(--color-surface-accent) !important;\n }\n .fill-primary {\n background-color: var(--color-fill-primary) !important;\n }\n .fill-secondary {\n background-color: var(--color-fill-secondary) !important;\n }\n .fill-tertiary {\n background-color: var(--color-fill-tertiary) !important;\n }\n .fill-subtle {\n background-color: var(--color-fill-subtle) !important;\n }\n .fill-moderate {\n background-color: var(--color-fill-moderate) !important;\n }\n .fill-disabled {\n background-color: var(--color-fill-disabled) !important;\n }\n .fill-contrast {\n background-color: var(--color-fill-contrast) !important;\n }\n .fill-accent1 {\n background-color: var(--color-fill-accent1) !important;\n }\n .fill-accent2 {\n background-color: var(--color-fill-accent2) !important;\n }\n .fill-accent3 {\n background-color: var(--color-fill-accent3) !important;\n }\n .fill-accent4 {\n background-color: var(--color-fill-accent4) !important;\n }\n .fill-accent5 {\n background-color: var(--color-fill-accent5) !important;\n }\n .fill-information {\n background-color: var(--color-fill-information) !important;\n }\n .fill-positive {\n background-color: var(--color-fill-positive) !important;\n }\n .fill-warning {\n background-color: var(--color-fill-warning) !important;\n }\n .fill-negative {\n background-color: var(--color-fill-negative) !important;\n }\n .border-subtle {\n border-color: var(--color-border-subtle) !important;\n }\n .border-strong {\n border-color: var(--color-border-strong) !important;\n }\n .border-contrast {\n border-color: var(--color-border-contrast) !important;\n }\n .border-accent {\n border-color: var(--color-border-accent) !important;\n }\n .border-information {\n border-color: var(--color-border-information) !important;\n }\n .border-positive {\n border-color: var(--color-border-positive) !important;\n }\n .border-warning {\n border-color: var(--color-border-warning) !important;\n }\n .border-negative {\n border-color: var(--color-border-negative) !important;\n }\n .text-default {\n color: var(--color-text-default) !important;\n }\n .text-secondary {\n color: var(--color-text-secondary) !important;\n }\n .text-disabled {\n color: var(--color-text-disabled) !important;\n }\n .text-inverse {\n color: var(--color-text-inverse) !important;\n }\n .text-accent {\n color: var(--color-text-accent) !important;\n }\n .icon-default {\n color: var(--color-icon-default) !important;\n }\n .icon-inverse {\n color: var(--color-icon-inverse) !important;\n }\n .icon-brand {\n color: var(--color-icon-brand) !important;\n }\n .icon-accent {\n color: var(--color-icon-accent) !important;\n }\n .icon-disabled {\n color: var(--color-icon-disabled) !important;\n }\n .icon-information {\n color: var(--color-icon-information) !important;\n }\n .icon-positive {\n color: var(--color-icon-positive) !important;\n }\n .icon-warning {\n color: var(--color-icon-warning) !important;\n }\n .icon-negative {\n color: var(--color-icon-negative) !important;\n }\n .color-black {\n color: #000000 !important;\n }\n .color-orange {\n color: var(--color-text-accent) !important;\n }\n .color-gray {\n color: #666666 !important;\n }\n .color-white {\n color: #ffffff !important;\n }\n .color-blue {\n color: var(--color-icon-information) !important;\n }\n .color-danger {\n color: var(--color-icon-negative) !important;\n }\n .bg-white {\n background-color: #ffffff !important;\n color: var(--color-text-default);\n }\n .bg-white .color-blue, .bg-white.color-blue {\n color: var(--color-icon-information) !important;\n }\n .bg-black {\n background-color: #141414 !important;\n color: var(--color-text-inverse);\n }\n .bg-black .color-gray, .bg-black.color-gray {\n color: #dddddd !important;\n }\n .bg-black .color-blue, .bg-black.color-blue {\n color: #4bb4e6 !important;\n }\n .bg-orange {\n background-color: var(--color-surface-secondary) !important;\n color: #000000 !important;\n }\n .bg-orange-dark {\n background-color: var(--color-surface-tertiary) !important;\n color: var(--color-text-inverse) !important;\n }\n .bg-gray {\n background-color: var(--color-surface-subtle) !important;\n }\n .bg-gray-lighter {\n background-color: var(--color-background-secondary) !important;\n }\n .bg-blue {\n background-color: var(--color-fill-accent1) !important;\n color: #000000 !important;\n }\n .bg-green {\n background-color: var(--color-fill-accent2) !important;\n color: #000000 !important;\n }\n .bg-pink {\n background-color: var(--color-fill-accent3) !important;\n color: #000000 !important;\n }\n .bg-violet {\n background-color: var(--color-fill-accent4) !important;\n color: #000000 !important;\n }\n .bg-yellow {\n background-color: var(--color-fill-accent5) !important;\n color: #000000 !important;\n }\n .bg-yellow-lighter {\n background-color: #fff6b6 !important;\n color: #000000 !important;\n }\n .bg-red {\n background-color: #ff4d4d !important;\n color: #000000 !important;\n }\n .bg-accent {\n background-color: var(--color-background-accent) !important;\n color: var(--color-text-default) !important;\n }\n .bg-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n color: var(--color-text-default) !important;\n }\n .bg-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n color: var(--color-text-default) !important;\n }\n .bg-orange::selection,\n .bg-orange-dark::selection,\n .surface-secondary::selection,\n .surface-tertiary::selection {\n background-color: var(--color-background-contrast);\n color: var(--color-text-inverse);\n }\n .color-gray::selection {\n color: var(--color-text-default);\n }\n .bg-none {\n background: none !important;\n }\n .background-none {\n background: none !important;\n }\n}\n/**\n * Resets margin-bottom of the last child to zero\n */\n@layer utilities {\n strong,\n .bold {\n font-weight: 700 !important;\n }\n .normal {\n font-weight: 400 !important;\n }\n .thin {\n font-weight: 300 !important;\n }\n em,\n .italic {\n font-style: italic !important;\n }\n .underline {\n text-decoration: underline !important;\n text-underline-offset: 0.1em !important;\n }\n .no-underline {\n text-decoration: none !important;\n }\n .underline-hover {\n text-decoration: none !important;\n }\n .underline-hover:hover {\n text-decoration: underline !important;\n }\n .no-accent {\n color: inherit !important;\n text-decoration: underline;\n }\n small,\n .small {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n letter-spacing: 0rem;\n }\n @media screen and (min-width: 768px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n @media screen and (min-width: 992px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n .large {\n font-size: 1.125rem;\n line-height: 1.625rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n @media screen and (min-width: 768px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n @media screen and (min-width: 992px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n .text-nowrap {\n white-space: nowrap !important;\n }\n .text-wrap {\n white-space: normal !important;\n }\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .align-left {\n text-align: left !important;\n }\n .align-center {\n text-align: center !important;\n }\n .align-right {\n text-align: right !important;\n }\n @media screen and (min-width: 480px) {\n .align-sm-right {\n text-align: right !important;\n }\n .align-sm-left {\n text-align: left !important;\n }\n .align-sm-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-md-right {\n text-align: right !important;\n }\n .align-md-left {\n text-align: left !important;\n }\n .align-md-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-lg-right {\n text-align: right !important;\n }\n .align-lg-left {\n text-align: left !important;\n }\n .align-lg-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-xl-right {\n text-align: right !important;\n }\n .align-xl-left {\n text-align: left !important;\n }\n .align-xl-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-xxl-right {\n text-align: right !important;\n }\n .align-xxl-left {\n text-align: left !important;\n }\n .align-xxl-center {\n text-align: center !important;\n }\n }\n .reset-text-decoration {\n text-decoration: none !important;\n }\n .align-middle {\n vertical-align: middle !important;\n }\n .align-top {\n vertical-align: top !important;\n }\n .align-bottom {\n vertical-align: bottom !important;\n }\n .align-baseline {\n vertical-align: baseline !important;\n }\n @media screen and (min-width: 480px) {\n .align-middle--sm {\n vertical-align: middle !important;\n }\n .align-top--sm {\n vertical-align: top !important;\n }\n .align-bottom--sm {\n vertical-align: bottom !important;\n }\n .align-baseline--sm {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-middle--md {\n vertical-align: middle !important;\n }\n .align-top--md {\n vertical-align: top !important;\n }\n .align-bottom--md {\n vertical-align: bottom !important;\n }\n .align-baseline--md {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-middle--lg {\n vertical-align: middle !important;\n }\n .align-top--lg {\n vertical-align: top !important;\n }\n .align-bottom--lg {\n vertical-align: bottom !important;\n }\n .align-baseline--lg {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-middle--xl {\n vertical-align: middle !important;\n }\n .align-top--xl {\n vertical-align: top !important;\n }\n .align-bottom--xl {\n vertical-align: bottom !important;\n }\n .align-baseline--xl {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-middle--xxl {\n vertical-align: middle !important;\n }\n .align-top--xxl {\n vertical-align: top !important;\n }\n .align-bottom--xxl {\n vertical-align: bottom !important;\n }\n .align-baseline--xxl {\n vertical-align: baseline !important;\n }\n }\n .reset-font-weight {\n font-weight: normal !important;\n }\n .reset-font-size {\n font-size: 16px !important;\n line-height: 1.25 !important;\n }\n .text-fullwidth {\n max-width: none;\n }\n .text-readable {\n max-width: 35em;\n }\n .text-narrow {\n max-width: 22em;\n }\n}\n@layer utilities {\n .border-radius--medium {\n border-radius: 10px;\n }\n .border {\n border: 2px solid var(--color-border-contrast);\n }\n .border.is-invalid {\n border-color: var(--color-border-negative) !important;\n }\n .border--gray {\n border-color: var(--color-border-subtle);\n }\n .border--gray.border-hover:hover, .border--gray.is-indicating:hover {\n border-color: var(--color-text-secondary);\n }\n .border--orange {\n border-color: var(--color-border-accent);\n }\n}\n@layer utilities {\n .mb {\n margin-bottom: 1.25rem;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n .mb-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-small {\n margin-bottom: 10px !important;\n }\n .mb-medium {\n margin-bottom: 20px !important;\n }\n .mb-large {\n margin-bottom: 30px !important;\n }\n .mb-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n @media screen and (min-width: 480px) {\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n .mb-sm-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-sm-small {\n margin-bottom: 10px !important;\n }\n .mb-sm-medium {\n margin-bottom: 20px !important;\n }\n .mb-sm-large {\n margin-bottom: 30px !important;\n }\n .mb-sm-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n .mb-md-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-md-small {\n margin-bottom: 10px !important;\n }\n .mb-md-medium {\n margin-bottom: 20px !important;\n }\n .mb-md-large {\n margin-bottom: 30px !important;\n }\n .mb-md-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n .mb-lg-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-lg-small {\n margin-bottom: 10px !important;\n }\n .mb-lg-medium {\n margin-bottom: 20px !important;\n }\n .mb-lg-large {\n margin-bottom: 30px !important;\n }\n .mb-lg-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n .mb-xl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xl-small {\n margin-bottom: 10px !important;\n }\n .mb-xl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xl-large {\n margin-bottom: 30px !important;\n }\n .mb-xl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n .mb-xxl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xxl-small {\n margin-bottom: 10px !important;\n }\n .mb-xxl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xxl-large {\n margin-bottom: 30px !important;\n }\n .mb-xxl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n }\n .mt-none {\n margin-top: 0 !important;\n }\n .pt-none {\n padding-top: 0 !important;\n }\n .mr-none {\n margin-right: 0 !important;\n }\n .pr-none {\n padding-right: 0 !important;\n }\n .pb-none {\n padding-bottom: 0 !important;\n }\n .ml-none {\n margin-left: 0 !important;\n }\n .pl-none {\n padding-left: 0 !important;\n }\n .no-mrg {\n margin: 0 !important;\n }\n .no-pad {\n padding: 0 !important;\n }\n .clearfix::before, .clearfix::after {\n content: \"\";\n display: table;\n }\n .clearfix::after {\n clear: both;\n }\n .clear {\n clear: both;\n }\n .justify-content-start {\n justify-content: flex-start;\n }\n .justify-content-end {\n justify-content: flex-end;\n }\n .justify-content-center {\n justify-content: center;\n }\n .justify-content-space-around {\n justify-content: space-around;\n }\n .justify-content-space-between {\n justify-content: space-between;\n }\n .align-items-start {\n align-items: flex-start;\n }\n .align-items-end {\n align-items: flex-end;\n }\n .align-items-center {\n align-items: center;\n }\n .align-items-stretch {\n align-items: stretch;\n }\n .align-self-left {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top {\n align-self: flex-start;\n }\n .align-self-bottom {\n align-self: flex-end;\n }\n .align-self-middle {\n align-self: center;\n }\n .align-self-stretch {\n align-self: stretch;\n }\n .align-self-last {\n order: 999;\n }\n @media screen and (min-width: 480px) {\n .justify-content-start--sm {\n justify-content: flex-start;\n }\n .justify-content-end--sm {\n justify-content: flex-end;\n }\n .justify-content-center--sm {\n justify-content: center;\n }\n .justify-content-space-around--sm {\n justify-content: space-around;\n }\n .justify-content-space-between--sm {\n justify-content: space-between;\n }\n .align-items-start--sm {\n align-items: flex-start;\n }\n .align-items-end--sm {\n align-items: flex-end;\n }\n .align-items-center--sm {\n align-items: center;\n }\n .align-items-stretch--sm {\n align-items: stretch;\n }\n .align-self-left--sm {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--sm {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--sm {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--sm {\n align-self: flex-start;\n }\n .align-self-bottom--sm {\n align-self: flex-end;\n }\n .align-self-middle--sm {\n align-self: center;\n }\n .align-self-stretch--sm {\n align-self: stretch;\n }\n .align-self-last--sm {\n order: 999;\n }\n }\n @media screen and (min-width: 768px) {\n .justify-content-start--md {\n justify-content: flex-start;\n }\n .justify-content-end--md {\n justify-content: flex-end;\n }\n .justify-content-center--md {\n justify-content: center;\n }\n .justify-content-space-around--md {\n justify-content: space-around;\n }\n .justify-content-space-between--md {\n justify-content: space-between;\n }\n .align-items-start--md {\n align-items: flex-start;\n }\n .align-items-end--md {\n align-items: flex-end;\n }\n .align-items-center--md {\n align-items: center;\n }\n .align-items-stretch--md {\n align-items: stretch;\n }\n .align-self-left--md {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--md {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--md {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--md {\n align-self: flex-start;\n }\n .align-self-bottom--md {\n align-self: flex-end;\n }\n .align-self-middle--md {\n align-self: center;\n }\n .align-self-stretch--md {\n align-self: stretch;\n }\n .align-self-last--md {\n order: 999;\n }\n }\n @media screen and (min-width: 992px) {\n .justify-content-start--lg {\n justify-content: flex-start;\n }\n .justify-content-end--lg {\n justify-content: flex-end;\n }\n .justify-content-center--lg {\n justify-content: center;\n }\n .justify-content-space-around--lg {\n justify-content: space-around;\n }\n .justify-content-space-between--lg {\n justify-content: space-between;\n }\n .align-items-start--lg {\n align-items: flex-start;\n }\n .align-items-end--lg {\n align-items: flex-end;\n }\n .align-items-center--lg {\n align-items: center;\n }\n .align-items-stretch--lg {\n align-items: stretch;\n }\n .align-self-left--lg {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--lg {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--lg {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--lg {\n align-self: flex-start;\n }\n .align-self-bottom--lg {\n align-self: flex-end;\n }\n .align-self-middle--lg {\n align-self: center;\n }\n .align-self-stretch--lg {\n align-self: stretch;\n }\n .align-self-last--lg {\n order: 999;\n }\n }\n @media screen and (min-width: 1240px) {\n .justify-content-start--xl {\n justify-content: flex-start;\n }\n .justify-content-end--xl {\n justify-content: flex-end;\n }\n .justify-content-center--xl {\n justify-content: center;\n }\n .justify-content-space-around--xl {\n justify-content: space-around;\n }\n .justify-content-space-between--xl {\n justify-content: space-between;\n }\n .align-items-start--xl {\n align-items: flex-start;\n }\n .align-items-end--xl {\n align-items: flex-end;\n }\n .align-items-center--xl {\n align-items: center;\n }\n .align-items-stretch--xl {\n align-items: stretch;\n }\n .align-self-left--xl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xl {\n align-self: flex-start;\n }\n .align-self-bottom--xl {\n align-self: flex-end;\n }\n .align-self-middle--xl {\n align-self: center;\n }\n .align-self-stretch--xl {\n align-self: stretch;\n }\n .align-self-last--xl {\n order: 999;\n }\n }\n @media screen and (min-width: 1380px) {\n .justify-content-start--xxl {\n justify-content: flex-start;\n }\n .justify-content-end--xxl {\n justify-content: flex-end;\n }\n .justify-content-center--xxl {\n justify-content: center;\n }\n .justify-content-space-around--xxl {\n justify-content: space-around;\n }\n .justify-content-space-between--xxl {\n justify-content: space-between;\n }\n .align-items-start--xxl {\n align-items: flex-start;\n }\n .align-items-end--xxl {\n align-items: flex-end;\n }\n .align-items-center--xxl {\n align-items: center;\n }\n .align-items-stretch--xxl {\n align-items: stretch;\n }\n .align-self-left--xxl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xxl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xxl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xxl {\n align-self: flex-start;\n }\n .align-self-bottom--xxl {\n align-self: flex-end;\n }\n .align-self-middle--xxl {\n align-self: center;\n }\n .align-self-stretch--xxl {\n align-self: stretch;\n }\n .align-self-last--xxl {\n order: 999;\n }\n }\n .aspect-ratio-21-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 21/9;\n }\n .aspect-ratio-16-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 16/9;\n }\n .aspect-ratio-4-3 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 4/3;\n }\n .aspect-ratio-1-1 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 1/1;\n }\n .aspect-ratio-3-2 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 3/2;\n }\n .d-block {\n display: block;\n }\n .d-inline-block {\n display: inline-block;\n }\n .d-inline {\n display: inline;\n }\n .d-flex {\n display: flex;\n }\n .d-inline-flex {\n display: inline-flex;\n }\n .flex-column {\n flex-direction: column;\n }\n .fullwidth {\n width: 100% !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .fullwidth-xs-only {\n width: 100% !important;\n }\n }\n .fullheight {\n height: 100% !important;\n }\n .center-block {\n margin-left: auto !important;\n margin-right: auto !important;\n }\n .relative {\n position: relative !important;\n }\n .absolute {\n position: absolute !important;\n }\n}\n@layer utilities {\n .visually-hidden,\n .sr-only {\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n position: absolute;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n }\n .hide {\n display: none !important;\n }\n .invisible {\n visibility: hidden;\n }\n @media screen and (min-width: 480px) {\n .show-xs-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .hide-xs-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) {\n .hide-sm {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .hide-sm-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .hide-md {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .hide-md-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .hide-lg {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .hide-lg-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .hide-xl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .hide-xl-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .hide-xxl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl-only {\n display: none !important;\n }\n }\n}\n@layer utilities {\n .order-1 {\n order: 1 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-1-xs-only {\n order: 1 !important;\n }\n }\n .order-2 {\n order: 2 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-2-xs-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-1-sm {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-1-sm-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-2-sm {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-2-sm-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-1-md {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-1-md-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-2-md {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-2-md-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-1-lg {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-1-lg-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-2-lg {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-2-lg-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-1-xl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-1-xl-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-2-xl {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-2-xl-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-1-xxl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-2-xxl {\n order: 2 !important;\n }\n }\n}\n@layer utilities {\n [class*=horizontal-scroll],\n .table-scrollable {\n scroll-snap-type: x mandatory;\n }\n [class*=horizontal-scroll] > *,\n .table-scrollable > * {\n scroll-snap-align: start;\n }\n @supports selector(::-webkit-scrollbar) {\n [class*=horizontal-scroll]::-webkit-scrollbar,\n .table-scrollable::-webkit-scrollbar {\n height: 0.375rem;\n appearance: none;\n background-color: var(--color-surface-moderate);\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-track,\n .table-scrollable::-webkit-scrollbar-track {\n background-color: var(--color-surface-moderate);\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb {\n opacity: 1;\n background-color: var(--color-fill-contrast);\n border-radius: 99px;\n }\n [class*=horizontal-scroll]:hover::-webkit-scrollbar-thumb, [class*=horizontal-scroll]:active::-webkit-scrollbar-thumb, [class*=horizontal-scroll]::-webkit-scrollbar-thumb:hover, [class*=horizontal-scroll]::-webkit-scrollbar-thumb:active,\n .table-scrollable:hover::-webkit-scrollbar-thumb,\n .table-scrollable:active::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb:hover,\n .table-scrollable::-webkit-scrollbar-thumb:active {\n background-color: var(--color-fill-contrast) !important;\n }\n }\n @supports not selector(::-webkit-scrollbar) {\n [class*=horizontal-scroll],\n .table-scrollable {\n scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);\n scrollbar-width: thin;\n }\n }\n .horizontal-scroll {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n @media screen and (min-width: 480px) {\n .horizontal-scroll--sm {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--sm-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 768px) {\n .horizontal-scroll--md {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--md-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 992px) {\n .horizontal-scroll--lg {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--lg-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1240px) {\n .horizontal-scroll--xl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1380px) {\n .horizontal-scroll--xxl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xxl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n}\n@layer utilities {\n /**\n * Resets for megamenu and footer\n * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.\n **/\n .osk-footer-menu,\n .mm-header ul,\n .megamenu-header ul {\n max-width: none;\n margin-top: 0;\n }\n .osk-footer-menu li,\n .mm-header ul li,\n .megamenu-header ul li {\n margin-top: 0;\n margin-bottom: 0;\n }\n}"]}
package/build/search-index.json CHANGED
@@ -81,7 +81,7 @@
81
81
  },
82
82
  {
83
83
  "href": "/components/expander",
84
- "content": "import React from \"react\"; Expander The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for. Basic Usage {This is the content that will be hidden until the user clicks the summary text.} Changing the summary text Add the summaryOpened prop to change the text displayed when the content is visible. {This is the content that will be hidden until the user clicks the summary text.} Custom Icon Use the renderSummary prop to customize the summary icon. Icon is rotating thanks to data-summary-icon attribute, which needs to be present on the icon. Custom Summary text Use the renderSummary and renderSummaryOpened props to customize the summary text. Icons do not rotate in this case. Toggle Group Use the toggleGroup prop to synchronize multiple expanders together. When one expander in the group is toggled, all others with the same toggleGroup value will toggle together. Used mostly in Product cards. Full Width Use the isFullWidth prop to make the expander take the full width of its container. Accessibility The Expander component uses the <details> and <summary> HTML elements, which are natively supported by most screen readers. This ensures that the component is accessible to users who rely on assistive technologies. The component automatically manages the aria-expanded attribute and updates the aria-label when the summary text changes between collapsed and expanded states. Important: Ensure that the summary prop provides a clear and concise description of the content that will be revealed. Use summaryOpened to provide appropriate text for the expanded state. API React Props | Prop | Type | Default | Description | | --------------------- | ------------------------------------------- | ------- | -------------------------------------------------------- | | summary | string | - | Trigger text when collapsed | | summaryOpened | string | - | Trigger text when expanded | | renderSummary | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for collapsed state | | renderSummaryOpened | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for expanded state | | isFullWidth | boolean | - | Expander takes full width of its container | | toggleGroup | string | - | Group identifier for syncing multiple expanders together | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Content to show/hide | JS module reference All elements with data-expander are initialized automatically. Custom initialization example: Expander Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | toggle | func | Toggle the expander open/closed state | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
84
+ "content": "import React from \"react\"; Expander The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for. Basic Usage {This is the content that will be hidden until the user clicks the summary text.} Changing the summary text Add the summaryOpened prop to change the text displayed when the content is visible. {This is the content that will be hidden until the user clicks the summary text.} Custom Icon Use the renderSummary prop to customize the summary icon. Icon is rotating thanks to data-summary-icon attribute, which needs to be present on the icon. Custom Summary text Use the renderSummary and renderSummaryOpened props to customize the summary text. Icons do not rotate in this case. Toggle Group Use the toggleGroup prop to synchronize multiple expanders together. When one expander in the group is toggled, all others with the same toggleGroup value will toggle together. Used mostly in Product cards. Full Width Use the isFullWidth prop to make the expander take the full width of its container. Accessibility The Expander component uses the native <details> and <summary> HTML elements, which provide built-in accessibility support. Screen readers automatically announce the expanded/collapsed state without requiring manual ARIA attributes. The native <details> element ensures: - Keyboard navigation works automatically (Enter/Space to toggle) - Screen readers announce the state changes - Focus management is handled by the browser Important: Ensure that the summary prop provides a clear and concise description of the content that will be revealed. Use summaryOpened to provide appropriate text for the expanded state to improve user experience. API React Props | Prop | Type | Default | Description | | --------------------- | ------------------------------------------- | ------- | -------------------------------------------------------- | | summary | string | - | Trigger text when collapsed | | summaryOpened | string | - | Trigger text when expanded | | renderSummary | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for collapsed state | | renderSummaryOpened | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for expanded state | | isFullWidth | boolean | - | Expander takes full width of its container | | toggleGroup | string | - | Group identifier for syncing multiple expanders together | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Content to show/hide | JS module reference All elements with data-expander are initialized automatically. Custom initialization example: Expander Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | toggle | func | Toggle the expander open/closed state | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
85
85
  },
86
86
  {
87
87
  "href": "/components/feature-accordion",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orangesk/orange-design-system",
3
- "version": "2.0.0-beta.30",
3
+ "version": "2.0.0-beta.31",
4
4
  "private": false,
5
5
  "engines": {
6
6
  "node": ">=20.x"
@@ -71,7 +71,7 @@
71
71
  "rehype-slug": "^6.0.0",
72
72
  "remark-gemoji": "^8.0.0",
73
73
  "remark-gfm": "^4.0.1",
74
- "swiper": "12.1.1",
74
+ "swiper": "12.1.2",
75
75
  "tabbable": "^6.4.0",
76
76
  "unescape-html": "^1.1.0",
77
77
  "wnumb": "^1.2.0"
@@ -81,7 +81,7 @@
81
81
  "@babel/preset-env": "^7.29.0",
82
82
  "@babel/preset-react": "^7.28.5",
83
83
  "@babel/preset-typescript": "^7.28.5",
84
- "@eslint/eslintrc": "3.3.3",
84
+ "@eslint/eslintrc": "3.3.4",
85
85
  "@rollup/plugin-alias": "6.0.0",
86
86
  "@rollup/plugin-babel": "^6.1.0",
87
87
  "@rollup/plugin-commonjs": "29.0.0",
@@ -94,7 +94,7 @@
94
94
  "@testing-library/jest-dom": "^6.9.1",
95
95
  "@testing-library/react": "^16.3.2",
96
96
  "@testing-library/user-event": "^14.6.1",
97
- "@types/node": "25.2.3",
97
+ "@types/node": "25.3.2",
98
98
  "@types/react": "19.2.14",
99
99
  "@types/react-dom": "19.2.3",
100
100
  "@types/wnumb": "^1.2.3",
@@ -104,8 +104,8 @@
104
104
  "eslint-config-prettier": "^10.1.8",
105
105
  "eslint-plugin-unused-imports": "^4.4.1",
106
106
  "fs-extra": "^11.3.3",
107
- "glob": "13.0.3",
108
- "html-validate": "10.8.0",
107
+ "glob": "13.0.6",
108
+ "html-validate": "10.9.0",
109
109
  "husky": "^9.1.7",
110
110
  "identity-obj-proxy": "^3.0.0",
111
111
  "jest": "30.2.0",
package/src/components/Breadcrumbs/styles/mixins.scss CHANGED
@@ -14,8 +14,13 @@
14
14
  background-color: var(--color-surface-primary);
15
15
  font-weight: bold;
16
16
  font-family: base.$font-family;
17
- font-size: base.$font-size;
17
+ font-size: base.$font-size !important;
18
18
  line-height: base.$line-height;
19
+
20
+ ol {
21
+ font-size: inherit !important;
22
+ line-height: inherit !important;
23
+ }
19
24
  }
20
25
 
21
26
  @mixin container {
package/src/components/PromoBanner/PromoBanner.tsx CHANGED
@@ -28,7 +28,10 @@ export const PromoBanner = ({
28
28
  variant,
29
29
  imageFullWidth,
30
30
  }: PromoBannerProps) => {
31
- const classes = cx(CLASS_ROOT, className);
31
+ const classes = cx(CLASS_ROOT, className, {
32
+ [`${CLASS_ROOT}--reverse`]: variant === "reverse",
33
+ [`${CLASS_ROOT}--vertical`]: variant === "vertical",
34
+ });
32
35
  return (
33
36
  <div className={classes}>
34
37
  <Grid columnGapSize="large">
package/src/components/PromoBanner/styles/mixins.scss CHANGED
@@ -24,6 +24,18 @@
24
24
  }
25
25
  }
26
26
 
27
+ @mixin promo-banner-item-trim-top-mobile() {
28
+ @include breakpoint.get("sm", "down") {
29
+ padding-top: 0;
30
+ }
31
+ }
32
+
33
+ @mixin promo-banner-item-trim-bottom-mobile() {
34
+ @include breakpoint.get("sm", "down") {
35
+ padding-bottom: 0;
36
+ }
37
+ }
38
+
27
39
  @mixin promo-banner-image() {
28
40
  order: 2;
29
41
  text-align: end;
package/src/components/PromoBanner/styles/style.scss CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  @layer components {
4
4
  .promo-banner {
5
+ &:not(.promo-banner--reverse):not(.promo-banner--vertical) {
6
+ .promo-banner__item {
7
+ @include mixins.promo-banner-item-trim-top-mobile;
8
+ }
9
+ }
10
+
11
+ &.promo-banner--reverse:not(.promo-banner--vertical) {
12
+ .promo-banner__item {
13
+ @include mixins.promo-banner-item-trim-bottom-mobile;
14
+ }
15
+ }
16
+
5
17
  &__item {
6
18
  @include mixins.promo-banner-item;
7
19
  }
package/src/components/PromoBanner/tests/PromoBanner.conformance.test.js CHANGED
@@ -355,10 +355,21 @@ describe("PromoBanner Component Conformance Tests", () => {
355
355
  const horizontalItem = horizontalContainer.querySelector(
356
356
  ".promo-banner__item",
357
357
  );
358
+ const horizontalBanner =
359
+ horizontalContainer.querySelector(".promo-banner");
358
360
  const verticalItem = verticalContainer.querySelector(
359
361
  ".promo-banner__item",
360
362
  );
363
+ const verticalBanner = verticalContainer.querySelector(".promo-banner");
361
364
  const reverseItem = reverseContainer.querySelector(".promo-banner__item");
365
+ const reverseBanner = reverseContainer.querySelector(".promo-banner");
366
+
367
+ expect(horizontalBanner).not.toHaveClass("promo-banner--vertical");
368
+ expect(horizontalBanner).not.toHaveClass("promo-banner--reverse");
369
+ expect(verticalBanner).toHaveClass("promo-banner--vertical");
370
+ expect(verticalBanner).not.toHaveClass("promo-banner--reverse");
371
+ expect(reverseBanner).toHaveClass("promo-banner--reverse");
372
+ expect(reverseBanner).not.toHaveClass("promo-banner--vertical");
362
373
 
363
374
  expect(horizontalItem).not.toHaveClass(
364
375
  "align-items-center",
package/src/components/PromoBanner/tests/PromoBanner.unit.test.js CHANGED
@@ -128,6 +128,13 @@ describe("PromoBanner", () => {
128
128
 
129
129
  describe("variant", () => {
130
130
  describe("default (horizontal) variant", () => {
131
+ it("does not apply variant modifier classes on root", () => {
132
+ render(<PromoBanner>Content</PromoBanner>);
133
+ const banner = document.querySelector(".promo-banner");
134
+ expect(banner).not.toHaveClass("promo-banner--reverse");
135
+ expect(banner).not.toHaveClass("promo-banner--vertical");
136
+ });
137
+
131
138
  it("uses correct column sizes without image", () => {
132
139
  render(<PromoBanner>Content</PromoBanner>);
133
140
  const contentCol = document
@@ -160,6 +167,13 @@ describe("PromoBanner", () => {
160
167
  });
161
168
 
162
169
  describe("vertical variant", () => {
170
+ it("applies vertical modifier class on root", () => {
171
+ render(<PromoBanner variant="vertical">Content</PromoBanner>);
172
+ const banner = document.querySelector(".promo-banner");
173
+ expect(banner).toHaveClass("promo-banner--vertical");
174
+ expect(banner).not.toHaveClass("promo-banner--reverse");
175
+ });
176
+
163
177
  it("applies vertical variant column layout", () => {
164
178
  render(<PromoBanner variant="vertical">Content</PromoBanner>);
165
179
  const contentCol = document
@@ -202,6 +216,17 @@ describe("PromoBanner", () => {
202
216
  });
203
217
 
204
218
  describe("reverse variant", () => {
219
+ it("applies reverse modifier class on root", () => {
220
+ render(
221
+ <PromoBanner variant="reverse" image="test.jpg">
222
+ Content
223
+ </PromoBanner>,
224
+ );
225
+ const banner = document.querySelector(".promo-banner");
226
+ expect(banner).toHaveClass("promo-banner--reverse");
227
+ expect(banner).not.toHaveClass("promo-banner--vertical");
228
+ });
229
+
205
230
  it("applies reverse variant column layout", () => {
206
231
  render(
207
232
  <PromoBanner variant="reverse" image="test.jpg">
package/src/styles/utilities/horizontal-scroll.scss CHANGED
@@ -7,25 +7,42 @@
7
7
  @layer utilities {
8
8
  [class*="horizontal-scroll"],
9
9
  .table-scrollable {
10
- scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);
11
- scrollbar-width: thin;
12
10
  scroll-snap-type: x mandatory;
13
11
 
14
12
  > * {
15
13
  scroll-snap-align: start;
16
14
  }
17
15
 
18
- &::-webkit-scrollbar {
19
- height: convert.to-rem(6px);
20
- appearance: none;
21
- background-color: var(--color-surface-moderate);
22
- border-radius: 99px;
16
+ @supports selector(::-webkit-scrollbar) {
17
+ &::-webkit-scrollbar {
18
+ height: convert.to-rem(6px);
19
+ appearance: none;
20
+ background-color: var(--color-surface-moderate);
21
+ border-radius: 99px;
22
+ }
23
+
24
+ &::-webkit-scrollbar-track {
25
+ background-color: var(--color-surface-moderate);
26
+ border-radius: 99px;
27
+ }
28
+
29
+ &::-webkit-scrollbar-thumb {
30
+ opacity: 1;
31
+ background-color: var(--color-fill-contrast);
32
+ border-radius: 99px;
33
+ }
34
+
35
+ &:hover::-webkit-scrollbar-thumb,
36
+ &:active::-webkit-scrollbar-thumb,
37
+ &::-webkit-scrollbar-thumb:hover,
38
+ &::-webkit-scrollbar-thumb:active {
39
+ background-color: var(--color-fill-contrast) !important;
40
+ }
23
41
  }
24
42
 
25
- &::-webkit-scrollbar-thumb {
26
- opacity: 1;
27
- background-color: var(--color-fill-contrast);
28
- border-radius: 99px;
43
+ @supports not selector(::-webkit-scrollbar) {
44
+ scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);
45
+ scrollbar-width: thin;
29
46
  }
30
47
  }
31
48