@odx/foundation 0.1.0-alpha.21 → 0.1.0-alpha.22

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 (211) hide show
  1. package/dist/cdk/drag-drop/drag-events.js +1 -0
  2. package/dist/cdk/drag-drop/is-draggable.js +5 -4
  3. package/dist/cdk/main.js +1 -0
  4. package/dist/cdk/popover/popover-host.mixin.css.js +1 -1
  5. package/dist/cdk/popover/popover-host.mixin.js +8 -7
  6. package/dist/cdk/popover/popover.component.css.js +1 -1
  7. package/dist/components/accordion/accordion-header.component.css.js +1 -1
  8. package/dist/components/accordion/accordion-panel.component.css.js +1 -1
  9. package/dist/components/accordion/accordion-panel.component.js +3 -1
  10. package/dist/components/accordion/accordion.component.css.js +1 -1
  11. package/dist/components/accordion/index.js +3 -0
  12. package/dist/components/area-header/area-header.component.css.js +1 -1
  13. package/dist/components/area-header/index.js +2 -0
  14. package/dist/components/avatar/avatar.component.css.js +1 -1
  15. package/dist/components/avatar/index.js +2 -0
  16. package/dist/components/avatar-group/avatar-group.component.css.js +1 -1
  17. package/dist/components/avatar-group/index.js +1 -0
  18. package/dist/components/badge/badge.component.css.js +1 -1
  19. package/dist/components/badge/index.js +2 -0
  20. package/dist/components/breadcrumb/breadcrumb-item.component.css.js +1 -1
  21. package/dist/components/breadcrumb/breadcrumb-item.component.js +4 -1
  22. package/dist/components/breadcrumb/breadcrumb.component.css.js +1 -1
  23. package/dist/components/breadcrumb/index.js +2 -0
  24. package/dist/components/button/base-button.js +1 -0
  25. package/dist/components/button/button.component.css.js +1 -1
  26. package/dist/components/button/button.component.js +1 -1
  27. package/dist/components/button/index.js +3 -0
  28. package/dist/components/button-group/button-group.component.css.js +1 -1
  29. package/dist/components/button-group/index.js +1 -0
  30. package/dist/components/card/card.component.css.js +1 -1
  31. package/dist/components/card/card.component.js +3 -1
  32. package/dist/components/card/index.js +1 -0
  33. package/dist/components/checkbox/checkbox.component.css.js +1 -1
  34. package/dist/components/checkbox/index.js +1 -0
  35. package/dist/components/checkbox-group/checkbox-group.component.css.js +1 -1
  36. package/dist/components/checkbox-group/index.js +2 -0
  37. package/dist/components/chip/chip.component.css.js +1 -1
  38. package/dist/components/chip/chip.component.js +1 -1
  39. package/dist/components/chip/index.js +2 -0
  40. package/dist/components/content-box/content-box.component.css.js +1 -1
  41. package/dist/components/content-box/content-box.component.js +3 -1
  42. package/dist/components/content-box/index.js +1 -0
  43. package/dist/components/dropdown/dropdown.component.css.js +1 -1
  44. package/dist/components/dropdown/index.js +2 -0
  45. package/dist/components/format/format.component.js +5 -4
  46. package/dist/components/format/index.js +4 -0
  47. package/dist/components/format/relative-time.component.js +2 -2
  48. package/dist/components/header/header-actions.component.css.js +1 -1
  49. package/dist/components/header/header-actions.component.js +3 -1
  50. package/dist/components/header/header.component.css.js +1 -1
  51. package/dist/components/header/header.component.js +1 -0
  52. package/dist/components/header/index.js +2 -0
  53. package/dist/components/headline/headline.component.css.js +1 -1
  54. package/dist/components/headline/index.js +2 -0
  55. package/dist/components/icon-button/icon-button.component.js +1 -0
  56. package/dist/components/icon-button/index.js +1 -0
  57. package/dist/components/inline-message/index.js +2 -0
  58. package/dist/components/inline-message/inline-message.component.css.js +1 -1
  59. package/dist/components/link/base-link.js +9 -8
  60. package/dist/components/link/index.js +2 -0
  61. package/dist/components/link/link.component.css.js +1 -1
  62. package/dist/components/list/index.js +2 -0
  63. package/dist/components/list/list-item.component.css.js +1 -1
  64. package/dist/components/list/list-item.component.js +4 -1
  65. package/dist/components/list/list.component.css.js +1 -1
  66. package/dist/components/list/list.component.js +4 -1
  67. package/dist/components/loading-indicator/index.js +1 -0
  68. package/dist/components/loading-indicator/loading-indicator.component.css.js +1 -1
  69. package/dist/components/loading-indicator/loading-indicator.component.js +3 -1
  70. package/dist/components/loading-overlay/index.js +1 -0
  71. package/dist/components/loading-overlay/loading-overlay.component.css.js +1 -1
  72. package/dist/components/loading-overlay/loading-overlay.component.js +2 -2
  73. package/dist/components/logo/index.js +2 -0
  74. package/dist/components/logo/logo.component.css.js +1 -1
  75. package/dist/components/main-menu/index.js +5 -0
  76. package/dist/components/main-menu/main-menu-button.component.js +3 -1
  77. package/dist/components/main-menu/main-menu-link.component.css.js +1 -1
  78. package/dist/components/main-menu/main-menu-link.component.js +4 -1
  79. package/dist/components/main-menu/main-menu-subtitle.component.js +3 -1
  80. package/dist/components/main-menu/main-menu-title.component.js +3 -1
  81. package/dist/components/main-menu/main-menu.component.css.js +1 -1
  82. package/dist/components/main.js +44 -0
  83. package/dist/components/navigation-item/index.js +2 -0
  84. package/dist/components/navigation-item/navigation-item.component.css.js +1 -1
  85. package/dist/components/navigation-item/navigation-item.component.js +1 -0
  86. package/dist/components/option/index.js +1 -0
  87. package/dist/components/option/option.component.css.js +1 -1
  88. package/dist/components/page/index.js +2 -0
  89. package/dist/components/page/page.component.css.js +1 -1
  90. package/dist/components/page-layout/index.js +1 -0
  91. package/dist/components/page-layout/page-layout.component.css.js +1 -1
  92. package/dist/components/page-layout/page-layout.component.js +3 -1
  93. package/dist/components/radio-button/index.js +1 -0
  94. package/dist/components/radio-button/radio-button.component.css.js +1 -1
  95. package/dist/components/radio-button/radio-button.component.js +3 -1
  96. package/dist/components/radio-group/index.js +2 -0
  97. package/dist/components/radio-group/radio-group.component.css.js +1 -1
  98. package/dist/components/rail-navigation/index.js +1 -0
  99. package/dist/components/rail-navigation/rail-navigation.component.css.js +1 -1
  100. package/dist/components/rail-navigation/rail-navigation.component.js +1 -0
  101. package/dist/components/search-bar/index.js +3 -0
  102. package/dist/components/search-bar/search-bar.component.css.js +1 -1
  103. package/dist/components/search-bar/search-bar.component.js +1 -1
  104. package/dist/components/select/index.js +1 -0
  105. package/dist/components/select/select.component.css.js +1 -1
  106. package/dist/components/select/select.component.js +2 -0
  107. package/dist/components/separator/index.js +1 -0
  108. package/dist/components/separator/separator.component.css.js +1 -1
  109. package/dist/components/spacer/index.js +1 -0
  110. package/dist/components/spacer/spacer.component.css.js +1 -1
  111. package/dist/components/spinbox/index.js +1 -0
  112. package/dist/components/spinbox/spinbox.component.css.js +1 -1
  113. package/dist/components/stack/index.js +2 -0
  114. package/dist/components/stack/stack.component.css.js +1 -1
  115. package/dist/components/switch/index.js +1 -0
  116. package/dist/components/switch/switch.component.css.js +1 -1
  117. package/dist/components/switch/switch.component.js +3 -1
  118. package/dist/components/text/index.js +2 -0
  119. package/dist/components/text/text.component.css.js +1 -1
  120. package/dist/components/title/index.js +2 -0
  121. package/dist/components/title/title.component.css.js +1 -1
  122. package/dist/components/toggle-button/index.js +1 -0
  123. package/dist/components/toggle-button/toggle-button.component.css.js +1 -1
  124. package/dist/components/visually-hidden/index.js +1 -0
  125. package/dist/components/visually-hidden/visually-hidden.component.css.js +1 -1
  126. package/dist/components/visually-hidden/visually-hidden.component.js +3 -1
  127. package/dist/elements/circular-progress-bar/circular-progress-bar.element.css.js +1 -1
  128. package/dist/elements/circular-progress-bar/circular-progress-bar.element.js +2 -1
  129. package/dist/elements/circular-progress-bar/index.js +2 -0
  130. package/dist/elements/circular-progress-bar/models/index.js +1 -0
  131. package/dist/elements/form-field/form-field.element.css.js +1 -1
  132. package/dist/elements/form-field/index.js +1 -0
  133. package/dist/elements/grid/grid.element.css.js +1 -1
  134. package/dist/elements/grid/index.js +2 -0
  135. package/dist/elements/main.js +10 -0
  136. package/dist/elements/menu/elements/menu-item/index.js +1 -0
  137. package/dist/elements/menu/elements/menu-item/menu-item.element.css.js +1 -1
  138. package/dist/elements/menu/elements/menu-item/menu-item.element.js +3 -1
  139. package/dist/elements/menu/elements/menu-label/index.js +1 -0
  140. package/dist/elements/menu/elements/menu-label/menu-label.element.css.js +1 -1
  141. package/dist/elements/menu/elements/menu-label/menu-label.element.js +3 -1
  142. package/dist/elements/menu/index.js +3 -0
  143. package/dist/elements/menu/menu.element.css.js +1 -1
  144. package/dist/elements/menu/menu.element.js +3 -1
  145. package/dist/elements/progress-bar/index.js +2 -0
  146. package/dist/elements/progress-bar/models/index.js +1 -0
  147. package/dist/elements/progress-bar/progress-bar.element.css.js +1 -1
  148. package/dist/elements/skeleton/index.js +1 -0
  149. package/dist/elements/skeleton/skeleton.element.css.js +1 -1
  150. package/dist/elements/slider/index.js +4 -0
  151. package/dist/elements/slider/models/index.js +2 -0
  152. package/dist/elements/slider/slider-context.js +1 -0
  153. package/dist/elements/slider/slider-handle.element.css.js +1 -1
  154. package/dist/elements/slider/slider-handle.element.js +4 -3
  155. package/dist/elements/slider/slider-marks.element.css.js +1 -1
  156. package/dist/elements/slider/slider.element.css.js +1 -1
  157. package/dist/elements/table/elements/table-body/index.js +1 -0
  158. package/dist/elements/table/elements/table-body/table-body.element.css.js +1 -1
  159. package/dist/elements/table/elements/table-body/table-body.element.js +3 -1
  160. package/dist/elements/table/elements/table-cell/index.js +1 -0
  161. package/dist/elements/table/elements/table-cell/table-cell.element.css.js +1 -1
  162. package/dist/elements/table/elements/table-cell/table-cell.element.js +3 -1
  163. package/dist/elements/table/elements/table-checkbox-cell/index.js +1 -0
  164. package/dist/elements/table/elements/table-checkbox-cell/table-checkbox-cell.element.css.js +1 -1
  165. package/dist/elements/table/elements/table-header/index.js +1 -0
  166. package/dist/elements/table/elements/table-header/table-header.element.css.js +1 -1
  167. package/dist/elements/table/elements/table-header/table-header.element.js +1 -0
  168. package/dist/elements/table/elements/table-header-cell/index.js +1 -0
  169. package/dist/elements/table/elements/table-header-cell/table-header-cell.element.css.js +1 -1
  170. package/dist/elements/table/elements/table-row/index.js +1 -0
  171. package/dist/elements/table/elements/table-row/table-row.element.css.js +1 -1
  172. package/dist/elements/table/elements/table-row/table-row.element.js +1 -0
  173. package/dist/elements/table/index.js +7 -0
  174. package/dist/elements/table/table.element.css.js +1 -1
  175. package/dist/elements/table/table.element.js +4 -1
  176. package/dist/elements/toast/index.js +2 -0
  177. package/dist/elements/toast/models/index.js +1 -0
  178. package/dist/elements/tooltip/index.js +2 -0
  179. package/dist/elements/tooltip/models/index.js +1 -0
  180. package/dist/elements/tooltip/tooltip.element.css.js +1 -1
  181. package/dist/elements/tooltip/tooltip.element.js +1 -0
  182. package/dist/src/lib/controllers/focus-trap.controller.js +1 -0
  183. package/dist/src/lib/controllers/index.js +1 -0
  184. package/dist/src/lib/directives/index.js +4 -0
  185. package/dist/src/lib/directives/slot-fallback.js +1 -1
  186. package/dist/src/lib/external/index.js +1 -0
  187. package/dist/src/lib/facade/checkbox-form-control.js +10 -5
  188. package/dist/src/lib/facade/checkbox-group-form-control.js +8 -5
  189. package/dist/src/lib/facade/index.js +5 -0
  190. package/dist/src/lib/facade/option-control.js +9 -5
  191. package/dist/src/lib/facade/radio-group-form-control.js +9 -5
  192. package/dist/src/lib/facade/select-form-control.js +10 -6
  193. package/dist/src/lib/mixins/can-be-disabled.js +5 -4
  194. package/dist/src/lib/mixins/can-be-readonly.js +5 -4
  195. package/dist/src/lib/mixins/can-be-required.js +5 -4
  196. package/dist/src/lib/mixins/form-control.js +7 -5
  197. package/dist/src/lib/mixins/index.js +11 -0
  198. package/dist/src/lib/mixins/is-localized.js +6 -4
  199. package/dist/src/lib/mixins/number-control.js +8 -7
  200. package/dist/src/lib/mixins/with-aria-controls.js +6 -4
  201. package/dist/src/lib/mixins/with-loading-state.js +4 -4
  202. package/dist/src/lib/models/aria-mixin-strict.js +1 -0
  203. package/dist/src/lib/models/custom-element.css.js +1 -1
  204. package/dist/src/lib/models/custom-element.js +1 -1
  205. package/dist/src/lib/models/index.js +4 -0
  206. package/dist/src/lib/models/locale.js +1 -0
  207. package/dist/src/lib/models/single-unit-identifier.js +1 -0
  208. package/dist/src/lib/utils/index.js +12 -0
  209. package/dist/src/main.js +7 -0
  210. package/dist/styles/main.css +740 -1
  211. package/package.json +2 -2
package/dist/styles/main.css CHANGED
@@ -1 +1,740 @@
1
- @layer odx-reset,odx-base,odx-component,odx-theme;@layer odx-reset{*,*:before,*:after{box-sizing:border-box}:root{font-size:150%}:where(img,picture,video,canvas,svg){display:block;max-width:100%;margin:0;padding:0}:where(input,button,textarea,select){font:inherit;margin:0;padding:0}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;margin:0;padding:0}::selection{background-color:var(--odx-color-foreground-highlight);color:var(--odx-color-foreground-inverse)}#root,#__next{isolation:isolate}input[type=search]::-webkit-search-cancel-button{appearance:none;aspect-ratio:1;background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.3,7.3l-3.3,3.3-3.3-3.3-1.4,1.4,3.3,3.3-3.3,3.3,1.4,1.4,3.3-3.3,3.3,3.3,1.4-1.4-3.3-3.3,3.3-3.3-1.4-1.4Zm-3.3-5.3C6.5,2,2,6.5,2,12s4.5,10,10,10,10-4.5,10-10S17.5,2,12,2Zm0,18c-4.4,0-8-3.6-8-8S7.6,4,12,4s8,3.6,8,8-3.6,8-8,8Z' style='fill:%23002766;'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-clip:content-box;background-position:center;background-size:var(--odx-typography-font-size-5);block-size:var(--odx-size-225);cursor:pointer;margin:0;margin-inline-end:-2px;max-block-size:100%;transition:var(--odx-transition-reduced)}input[type=search]::-webkit-search-cancel-button:hover{color:var(--odx-color-foreground-highlight)}odx-spinbox>input::-webkit-inner-spin-button{appearance:none}}@layer odx-base{:root{--odx-border-radius-circle: 9999px;--odx-border-radius-controls: var(--odx-border-radius-sm);--odx-border-radius-lg: var(--odx-size-50);--odx-border-radius-md: 5px;--odx-border-radius-ml: var(--odx-size-37);--odx-border-radius-none: 0;--odx-border-radius-sm: 3px;--odx-border-width-none: 0;--odx-border-width-thick: 2px;--odx-border-width-thickest: var(--odx-size-25);--odx-border-width-thin: var(--odx-size-px);--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 0;--odx-breakpoint-visibility-sm-down-show: 1;--odx-breakpoint-visibility-sm-show: 1;--odx-breakpoint-visibility-xl-show: 0;--odx-color-backdrop: var(--odx-palette-blue-100-30);--odx-color-background-cool: var(--odx-palette-coolgray-00);--odx-color-background-cool-contrast: var(--odx-palette-coolgray-30);--odx-color-background-draeger: var(--odx-palette-blue-80);--odx-color-background-main: var(--odx-palette-white);--odx-color-background-sand: var(--odx-palette-sandgray-10);--odx-color-background-sand-contrast: var(--odx-palette-sandgray-30);--odx-color-background-sidesheet: var(--odx-palette-white);--odx-color-background-warm: var(--odx-palette-warmgray-10);--odx-color-background-warm-contrast: var(--odx-palette-warmgray-30);--odx-color-confirmation-hover: var(--odx-palette-orange-70);--odx-color-confirmation-pressed: var(--odx-palette-orange-80);--odx-color-confirmation-rest: var(--odx-palette-orange-60);--odx-color-danger-background: var(--odx-palette-red-00);--odx-color-danger-hover: var(--odx-palette-red-70);--odx-color-danger-pressed: var(--odx-palette-red-80);--odx-color-danger-rest: var(--odx-palette-red-60);--odx-color-danger-stroke: var(--odx-palette-red-20);--odx-color-danger-stroke-hover: var(--odx-palette-red-30);--odx-color-disabled-fill: var(--odx-palette-coolgray-10);--odx-color-disabled-fill-selected: var(--odx-palette-coolgray-60);--odx-color-disabled-foreground: var(--odx-palette-coolgray-50);--odx-color-disabled-foreground-brand: var(--odx-palette-cyan-90);--odx-color-disabled-foreground-selected: var(--odx-palette-coolgray-10);--odx-color-disabled-stroke: var(--odx-palette-transparent);--odx-color-focus-inner: var(--odx-palette-white);--odx-color-focus-outer: var(--odx-palette-cyan-70);--odx-color-foreground: var(--odx-palette-blue-80);--odx-color-foreground-danger: var(--odx-palette-red-60);--odx-color-foreground-dark: var(--odx-palette-blue-80);--odx-color-foreground-highlight: var(--odx-palette-cyan-70);--odx-color-foreground-highlight-hover: var(--odx-palette-cyan-80);--odx-color-foreground-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-foreground-inverse: var(--odx-palette-white);--odx-color-foreground-light: var(--odx-palette-white);--odx-color-foreground-muted: var(--odx-palette-blue-80-60);--odx-color-highlight-hover: var(--odx-palette-cyan-70);--odx-color-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-highlight-rest: var(--odx-palette-cyan-60);--odx-color-input-control-fill: var(--odx-palette-coolgray-10);--odx-color-input-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-input-control-fill-readonly: var(--odx-palette-transparent);--odx-color-input-control-stroke: var(--odx-palette-coolgray-20);--odx-color-input-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-input-control-stroke-pressed: var(--odx-color-highlight-rest);--odx-color-input-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-neutral-hover: var(--odx-palette-coolgray-40);--odx-color-neutral-pressed: var(--odx-palette-coolgray-50);--odx-color-neutral-rest: var(--odx-palette-coolgray-30);--odx-color-overlay: var(--odx-palette-white-60);--odx-color-primary-background: var(--odx-palette-blue-00);--odx-color-primary-hover: var(--odx-palette-blue-90);--odx-color-primary-pressed: var(--odx-palette-blue-100);--odx-color-primary-rest: var(--odx-palette-blue-80);--odx-color-scrollbar: var(--odx-palette-coolgray-40);--odx-color-selected: var(--odx-palette-cyan-60-15);--odx-color-selected-hover: var(--odx-palette-cyan-60-20);--odx-color-selection-control-fill: var(--odx-palette-coolgray-10);--odx-color-selection-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-selection-control-fill-readonly: var(--odx-palette-transparent);--odx-color-selection-control-fill-selected: var(--odx-color-highlight-rest);--odx-color-selection-control-fill-selected-hover: var(--odx-color-highlight-hover);--odx-color-selection-control-fill-selected-readonly: var(--odx-palette-transparent);--odx-color-selection-control-foreground-readonly: var(--odx-color-foreground);--odx-color-selection-control-stroke: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-selection-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-selected: var(--odx-palette-transparent);--odx-color-separator: var(--odx-palette-coolgray-20);--odx-color-separator-strong: var(--odx-palette-coolgray-130);--odx-color-shadow: var(--odx-palette-blue-100-30);--odx-color-success-background: var(--odx-palette-green-00);--odx-color-success-hover: var(--odx-palette-green-70);--odx-color-success-pressed: var(--odx-palette-green-80);--odx-color-success-rest: var(--odx-palette-green-60);--odx-color-transparent-hover: var(--odx-palette-blue-80-5);--odx-color-transparent-pressed: var(--odx-palette-blue-80-15);--odx-color-warning-background: var(--odx-palette-yellow-00);--odx-color-warning-hover: var(--odx-palette-yellow-60);--odx-color-warning-pressed: var(--odx-palette-yellow-70);--odx-color-warning-rest: var(--odx-palette-yellow-50);--odx-elevation-blur: var(--odx-size-12);--odx-experience-color-secondary-foreground: var(--odx-color-foreground);--odx-experience-color-secondary-hover: var(--odx-color-neutral-hover);--odx-experience-color-secondary-pressed: var(--odx-color-neutral-pressed);--odx-experience-color-secondary-rest: var(--odx-color-neutral-rest);--odx-experience-color-secondary-stroke: var(--odx-palette-transparent);--odx-experience-dimension-control-height-base: var(--odx-size-225);--odx-experience-dimension-control-height-lg: var(--odx-size-300);--odx-experience-dimension-control-height-sm: var(--odx-size-150);--odx-focus-ring-color: var(--odx-color-focus-outer);--odx-focus-ring-offset: var(--odx-size-px);--odx-focus-ring-outline: var(--odx-border-width-thick) solid color(srgb 0 0 0 / 0);--odx-motion-duration-default: 275ms;--odx-motion-duration-fast: .15s;--odx-motion-duration-slow: 375ms;--odx-motion-easing-default: cubic-bezier(.4, 0, .2, 1);--odx-motion-easing-reduced: cubic-bezier(0, 0, 1, 1);--odx-palette-black: hsl(220 50% 5%);--odx-palette-black-60: hsl(220 50% 5% / .6);--odx-palette-blue-00: hsl(219 70% 96%);--odx-palette-blue-10: hsl(216 65% 90%);--odx-palette-blue-20: hsl(217 71% 80%);--odx-palette-blue-30: hsl(217 75% 70%);--odx-palette-blue-40: hsl(217 80% 60%);--odx-palette-blue-50: hsl(217 75% 48%);--odx-palette-blue-60: hsl(217 90% 40%);--odx-palette-blue-70: hsl(217 95% 30%);--odx-palette-blue-80: hsl(217 100% 20%);--odx-palette-blue-80-5: hsl(217 100% 20% / .05);--odx-palette-blue-80-15: hsl(217 100% 20% / .1);--odx-palette-blue-80-60: hsl(217 100% 20% / .6);--odx-palette-blue-90: hsl(216 100% 10%);--odx-palette-blue-100: hsl(216 100% 1%);--odx-palette-blue-100-30: hsl(216 100% 1% / .3);--odx-palette-coolgray-00: hsl(210 20% 98%);--odx-palette-coolgray-10: hsl(216 20% 95%);--odx-palette-coolgray-20: hsl(213 18% 90%);--odx-palette-coolgray-30: hsl(212 15% 83%);--odx-palette-coolgray-40: hsl(213 15% 76%);--odx-palette-coolgray-50: hsl(210 14.000000000000002% 69%);--odx-palette-coolgray-60: hsl(208 13% 62%);--odx-palette-coolgray-70: hsl(207 12% 55.00000000000001%);--odx-palette-coolgray-80: hsl(208 11% 47%);--odx-palette-coolgray-90: hsl(205 10% 39%);--odx-palette-coolgray-100: hsl(205 16% 31%);--odx-palette-coolgray-110: hsl(210 17% 27%);--odx-palette-coolgray-120: hsl(207 19% 23%);--odx-palette-coolgray-130: hsl(210 20% 20%);--odx-palette-coolgray-140: hsl(210 20% 16%);--odx-palette-coolgray-150: hsl(207 20% 9%);--odx-palette-cyan-00: hsl(200 90% 96%);--odx-palette-cyan-10: hsl(200 100% 92%);--odx-palette-cyan-10-5: hsl(200 100% 92% / .05);--odx-palette-cyan-10-15: hsl(200 100% 92% / .15);--odx-palette-cyan-20: hsl(201 100% 84%);--odx-palette-cyan-30: hsl(201 100% 74%);--odx-palette-cyan-40: hsl(201 100% 65%);--odx-palette-cyan-50: hsl(201 100% 55.00000000000001%);--odx-palette-cyan-60: hsl(205 100% 48%);--odx-palette-cyan-60-15: hsl(205 100% 48% / .15);--odx-palette-cyan-60-20: hsl(205 100% 48% / .2);--odx-palette-cyan-60-25: hsl(205 100% 48% / .25);--odx-palette-cyan-70: hsl(205 100% 40%);--odx-palette-cyan-80: hsl(205 100% 34%);--odx-palette-cyan-90: hsl(205 100% 27%);--odx-palette-cyan-100: hsl(205 100% 20%);--odx-palette-green-00: hsl(138 100% 91%);--odx-palette-green-10: hsl(133 100% 86%);--odx-palette-green-20: hsl(133 100% 79%);--odx-palette-green-30: hsl(133 100% 71%);--odx-palette-green-40: hsl(133 100% 61%);--odx-palette-green-50: hsl(133 91% 50%);--odx-palette-green-60: hsl(133 100% 43%);--odx-palette-green-70: hsl(133 100% 39%);--odx-palette-green-80: hsl(133 100% 33%);--odx-palette-green-90: hsl(133 100% 26%);--odx-palette-green-100: hsl(133 100% 20%);--odx-palette-orange-00: hsl(30 100% 96%);--odx-palette-orange-10: hsl(31 100% 92%);--odx-palette-orange-20: hsl(30 100% 83%);--odx-palette-orange-30: hsl(30 100% 74%);--odx-palette-orange-40: hsl(30 100% 65%);--odx-palette-orange-50: hsl(30 100% 56.00000000000001%);--odx-palette-orange-60: hsl(30 100% 48%);--odx-palette-orange-70: hsl(30 100% 40%);--odx-palette-orange-80: hsl(30 100% 32%);--odx-palette-orange-90: hsl(30 100% 24%);--odx-palette-orange-100: hsl(30 100% 16%);--odx-palette-red-00: hsl(354 100% 96%);--odx-palette-red-10: hsl(0 100% 92%);--odx-palette-red-20: hsl(0 100% 84%);--odx-palette-red-30: hsl(0 100% 74%);--odx-palette-red-40: hsl(0 100% 68%);--odx-palette-red-50: hsl(0 100% 60%);--odx-palette-red-60: hsl(0 100% 46%);--odx-palette-red-70: hsl(0 98% 43%);--odx-palette-red-80: hsl(0 100% 37%);--odx-palette-red-90: hsl(0 100% 30%);--odx-palette-red-100: hsl(0 100% 22%);--odx-palette-sandgray-00: hsl(90 20% 98%);--odx-palette-sandgray-10: hsl(90 18% 96%);--odx-palette-sandgray-20: hsl(90 15% 92%);--odx-palette-sandgray-30: hsl(86 10% 87%);--odx-palette-sandgray-40: hsl(80 7.000000000000001% 84%);--odx-palette-sandgray-50: hsl(82 7.000000000000001% 78%);--odx-palette-sandgray-60: hsl(78 7.000000000000001% 73%);--odx-palette-sandgray-70: hsl(80 7.000000000000001% 67%);--odx-palette-sandgray-80: hsl(80 8% 61%);--odx-palette-sandgray-90: hsl(80 7.000000000000001% 51%);--odx-palette-sandgray-100: hsl(78 6% 41%);--odx-palette-sandgray-110: hsl(80 7.000000000000001% 36%);--odx-palette-sandgray-120: hsl(78 6% 31%);--odx-palette-sandgray-130: hsl(75 6% 26%);--odx-palette-sandgray-140: hsl(77 6% 23%);--odx-palette-sandgray-150: hsl(72 6% 16%);--odx-palette-transparent: hsl(0 0% 100% / 0);--odx-palette-warmgray-00: hsl(0 9% 98%);--odx-palette-warmgray-10: hsl(0 9% 96%);--odx-palette-warmgray-20: hsl(0 10% 90%);--odx-palette-warmgray-30: hsl(0 7.000000000000001% 85%);--odx-palette-warmgray-40: hsl(0 7.000000000000001% 78%);--odx-palette-warmgray-50: hsl(0 3% 70%);--odx-palette-warmgray-60: hsl(0 3% 63%);--odx-palette-warmgray-70: hsl(0 2% 56.00000000000001%);--odx-palette-warmgray-80: hsl(0 2% 48%);--odx-palette-warmgray-90: hsl(0 2% 40%);--odx-palette-warmgray-100: hsl(0 2% 31%);--odx-palette-warmgray-120: hsl(0 2% 26%);--odx-palette-warmgray-130: hsl(0 2% 22%);--odx-palette-warmgray-140: hsl(0 2% 20%);--odx-palette-warmgray-150: hsl(0 2% 16%);--odx-palette-white: hsl(0 0% 100%);--odx-palette-white-05: hsl(0 0% 100% / .05);--odx-palette-white-60: hsl(0 0% 100% / .6);--odx-palette-yellow-00: hsl(53 100% 92%);--odx-palette-yellow-10: hsl(53 100% 86%);--odx-palette-yellow-20: hsl(53 100% 81%);--odx-palette-yellow-30: hsl(52 100% 75%);--odx-palette-yellow-40: hsl(53 100% 64%);--odx-palette-yellow-50: hsl(53 100% 50%);--odx-palette-yellow-60: hsl(53 100% 45%);--odx-palette-yellow-70: hsl(53 100% 37%);--odx-palette-yellow-80: hsl(53 100% 30%);--odx-palette-yellow-90: hsl(53 100% 24%);--odx-palette-yellow-100: hsl(53 100% 18%);--odx-size-12: 2px;--odx-size-25: 4px;--odx-size-37: 6px;--odx-size-50: 8px;--odx-size-75: 12px;--odx-size-100: 16px;--odx-size-125: 20px;--odx-size-150: 24px;--odx-size-175: 28px;--odx-size-200: 32px;--odx-size-225: 36px;--odx-size-250: 40px;--odx-size-300: 48px;--odx-size-350: 56px;--odx-size-400: 64px;--odx-size-450: 72px;--odx-size-500: 80px;--odx-size-600: 96px;--odx-size-700: 112px;--odx-size-800: 128px;--odx-size-900: 144px;--odx-size-1000: 160px;--odx-size-base: 16px;--odx-size-px: 1px;--odx-typography-font-family-base: Draeger Pangea Text;--odx-typography-font-family-brand: Draeger Pangea Text;--odx-typography-font-size-1: 10px;--odx-typography-font-size-2: 14px;--odx-typography-font-size-3: 16px;--odx-typography-font-size-4: 18px;--odx-typography-font-size-5: 20px;--odx-typography-font-size-6: 24px;--odx-typography-font-size-7: 30px;--odx-typography-font-size-8: 40px;--odx-typography-font-size-9: 48px;--odx-typography-font-size-10: 54px;--odx-typography-font-size-11: 68px;--odx-typography-font-size-12: 76px;--odx-typography-font-size-13: 94px;--odx-typography-font-size-base: 16px;--odx-typography-font-weight-medium: 500;--odx-typography-font-weight-normal: 400;--odx-typography-font-weight-semibold: 600;--odx-typography-line-height-1: 14px;--odx-typography-line-height-2: 19px;--odx-typography-line-height-3: 22px;--odx-typography-line-height-4: 24px;--odx-typography-line-height-5: 26px;--odx-typography-line-height-6: 31px;--odx-typography-line-height-7: 39px;--odx-typography-line-height-8: 49px;--odx-typography-line-height-9: 59px;--odx-typography-line-height-10: 64px;--odx-typography-line-height-11: 80px;--odx-typography-line-height-12: 89px;--odx-typography-line-height-13: 110px;--odx-typography-line-height-base: 24px;--odx-typography-weight-fontWeightMedium: Medium;--odx-typography-weight-fontWeightNormal: Regular;--odx-typography-weight-fontWeightSemibold: Semibold}@media (min-width: 479px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 0;--odx-breakpoint-visibility-sm-down-show: 1;--odx-breakpoint-visibility-sm-show: 1;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 768px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-12);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-150);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 1;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 990px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-150);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-200);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-250);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 1;--odx-breakpoint-visibility-md-down-hide: 1;--odx-breakpoint-visibility-md-down-show: 0;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 1280px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-13);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-12);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-13);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-200);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-250);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-300);--odx-breakpoint-visibility-lg-down-hide: 1;--odx-breakpoint-visibility-lg-down-show: 0;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 1;--odx-breakpoint-visibility-md-down-show: 0;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 1}}}@layer odx-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-base{html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0}*{scrollbar-color:var(--odx-color-neutral-rest) var(--odx-palette-transparent)}*:not(body){scrollbar-width:thin}h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height);color:inherit}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@layer odx-base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px}}
1
+ @layer odx-reset, odx-base, odx-component, odx-theme;
2
+
3
+ @layer odx-reset{
4
+
5
+ *,
6
+ *::before,
7
+ *::after {
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ :root {
12
+ font-size: 150%;
13
+ }
14
+
15
+ :where(img, picture, video, canvas, svg) {
16
+ display: block;
17
+ max-width: 100%;
18
+ margin: 0;
19
+ padding: 0;
20
+ }
21
+
22
+ :where(input, button, textarea, select) {
23
+ font: inherit;
24
+ margin: 0;
25
+ padding: 0;
26
+ }
27
+
28
+ :where(p, h1, h2, h3, h4, h5, h6) {
29
+ overflow-wrap: break-word;
30
+ margin: 0;
31
+ padding: 0;
32
+ }
33
+
34
+ ::selection {
35
+ background-color: var(--odx-color-foreground-highlight);
36
+ color: var(--odx-color-foreground-inverse);
37
+ }
38
+
39
+ #root,
40
+ #__next {
41
+ isolation: isolate;
42
+ }
43
+
44
+ input[type="search"]::-webkit-search-cancel-button {
45
+ appearance: none;
46
+ aspect-ratio: 1;
47
+ background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.3,7.3l-3.3,3.3-3.3-3.3-1.4,1.4,3.3,3.3-3.3,3.3,1.4,1.4,3.3-3.3,3.3,3.3,1.4-1.4-3.3-3.3,3.3-3.3-1.4-1.4Zm-3.3-5.3C6.5,2,2,6.5,2,12s4.5,10,10,10,10-4.5,10-10S17.5,2,12,2Zm0,18c-4.4,0-8-3.6-8-8S7.6,4,12,4s8,3.6,8,8-3.6,8-8,8Z' style='fill:%23002766;'/%3E%3C/svg%3E%0A");
48
+ background-repeat: no-repeat;
49
+ background-clip: content-box;
50
+ background-position: center;
51
+ background-size: var(--odx-typography-font-size-5);
52
+ block-size: var(--odx-size-225);
53
+ cursor: pointer;
54
+ margin: 0;
55
+ margin-inline-end: -2px;
56
+ max-block-size: 100%;
57
+ transition: var(--odx-transition-reduced);
58
+ }
59
+
60
+ input[type="search"]::-webkit-search-cancel-button:hover {
61
+ color: var(--odx-color-foreground-highlight);
62
+ }
63
+
64
+ odx-spinbox > input::-webkit-inner-spin-button {
65
+ appearance: none;
66
+ }
67
+ }
68
+
69
+ @layer odx-base{
70
+
71
+ /* -------------------------------------------
72
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
73
+ * ------------------------------------------- */
74
+
75
+ :root {
76
+ --odx-border-radius-circle: 9999px;
77
+ --odx-border-radius-controls: var(--odx-border-radius-sm);
78
+ --odx-border-radius-lg: var(--odx-size-50);
79
+ --odx-border-radius-md: 5px;
80
+ --odx-border-radius-ml: var(--odx-size-37);
81
+ --odx-border-radius-none: 0;
82
+ --odx-border-radius-sm: 3px;
83
+ --odx-border-width-none: 0;
84
+ --odx-border-width-thick: 2px;
85
+ --odx-border-width-thickest: var(--odx-size-25);
86
+ --odx-border-width-thin: var(--odx-size-px);
87
+ --odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);
88
+ --odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);
89
+ --odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);
90
+ --odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);
91
+ --odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);
92
+ --odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);
93
+ --odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);
94
+ --odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);
95
+ --odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);
96
+ --odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);
97
+ --odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);
98
+ --odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);
99
+ --odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);
100
+ --odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);
101
+ --odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);
102
+ --odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);
103
+ --odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);
104
+ --odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);
105
+ --odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);
106
+ --odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);
107
+ --odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);
108
+ --odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);
109
+ --odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);
110
+ --odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);
111
+ --odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);
112
+ --odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);
113
+ --odx-breakpoint-spacing-12: var(--odx-size-12);
114
+ --odx-breakpoint-spacing-25: var(--odx-size-25);
115
+ --odx-breakpoint-spacing-37: var(--odx-size-37);
116
+ --odx-breakpoint-spacing-50: var(--odx-size-50);
117
+ --odx-breakpoint-spacing-75: var(--odx-size-75);
118
+ --odx-breakpoint-spacing-100: var(--odx-size-100);
119
+ --odx-breakpoint-spacing-150: var(--odx-size-150);
120
+ --odx-breakpoint-spacing-150-responsive: var(--odx-size-100);
121
+ --odx-breakpoint-spacing-200: var(--odx-size-200);
122
+ --odx-breakpoint-spacing-200-responsive: var(--odx-size-100);
123
+ --odx-breakpoint-spacing-250: var(--odx-size-250);
124
+ --odx-breakpoint-spacing-250-responsive: var(--odx-size-150);
125
+ --odx-breakpoint-spacing-300: var(--odx-size-300);
126
+ --odx-breakpoint-spacing-300-responsive: var(--odx-size-200);
127
+ --odx-breakpoint-visibility-lg-down-hide: 0;
128
+ --odx-breakpoint-visibility-lg-down-show: 1;
129
+ --odx-breakpoint-visibility-lg-show: 0;
130
+ --odx-breakpoint-visibility-md-down-hide: 0;
131
+ --odx-breakpoint-visibility-md-down-show: 1;
132
+ --odx-breakpoint-visibility-md-show: 0;
133
+ --odx-breakpoint-visibility-sm-down-hide: 0;
134
+ --odx-breakpoint-visibility-sm-down-show: 1;
135
+ --odx-breakpoint-visibility-sm-show: 1;
136
+ --odx-breakpoint-visibility-xl-show: 0;
137
+ --odx-color-backdrop: var(--odx-palette-blue-100-30);
138
+ --odx-color-background-cool: var(--odx-palette-coolgray-00);
139
+ --odx-color-background-cool-contrast: var(--odx-palette-coolgray-30);
140
+ --odx-color-background-draeger: var(--odx-palette-blue-80);
141
+ --odx-color-background-main: var(--odx-palette-white);
142
+ --odx-color-background-sand: var(--odx-palette-sandgray-10);
143
+ --odx-color-background-sand-contrast: var(--odx-palette-sandgray-30);
144
+ --odx-color-background-sidesheet: var(--odx-palette-white);
145
+ --odx-color-background-warm: var(--odx-palette-warmgray-10);
146
+ --odx-color-background-warm-contrast: var(--odx-palette-warmgray-30);
147
+ --odx-color-confirmation-hover: var(--odx-palette-orange-70);
148
+ --odx-color-confirmation-pressed: var(--odx-palette-orange-80);
149
+ --odx-color-confirmation-rest: var(--odx-palette-orange-60);
150
+ --odx-color-danger-background: var(--odx-palette-red-00);
151
+ --odx-color-danger-hover: var(--odx-palette-red-70);
152
+ --odx-color-danger-pressed: var(--odx-palette-red-80);
153
+ --odx-color-danger-rest: var(--odx-palette-red-60);
154
+ --odx-color-danger-stroke: var(--odx-palette-red-20);
155
+ --odx-color-danger-stroke-hover: var(--odx-palette-red-30);
156
+ --odx-color-disabled-fill: var(--odx-palette-coolgray-10);
157
+ --odx-color-disabled-fill-selected: var(--odx-palette-coolgray-60);
158
+ --odx-color-disabled-foreground: var(--odx-palette-coolgray-50);
159
+ --odx-color-disabled-foreground-brand: var(--odx-palette-cyan-90);
160
+ --odx-color-disabled-foreground-selected: var(--odx-palette-coolgray-10);
161
+ --odx-color-disabled-stroke: var(--odx-palette-transparent);
162
+ --odx-color-focus-inner: var(--odx-palette-white);
163
+ --odx-color-focus-outer: var(--odx-palette-cyan-70);
164
+ --odx-color-foreground: var(--odx-palette-blue-80);
165
+ --odx-color-foreground-danger: var(--odx-palette-red-60);
166
+ --odx-color-foreground-dark: var(--odx-palette-blue-80);
167
+ --odx-color-foreground-highlight: var(--odx-palette-cyan-70);
168
+ --odx-color-foreground-highlight-hover: var(--odx-palette-cyan-80);
169
+ --odx-color-foreground-highlight-pressed: var(--odx-palette-cyan-80);
170
+ --odx-color-foreground-inverse: var(--odx-palette-white);
171
+ --odx-color-foreground-light: var(--odx-palette-white);
172
+ --odx-color-foreground-muted: var(--odx-palette-blue-80-60);
173
+ --odx-color-highlight-hover: var(--odx-palette-cyan-70);
174
+ --odx-color-highlight-pressed: var(--odx-palette-cyan-80);
175
+ --odx-color-highlight-rest: var(--odx-palette-cyan-60);
176
+ --odx-color-input-control-fill: var(--odx-palette-coolgray-10);
177
+ --odx-color-input-control-fill-hover: var(--odx-palette-coolgray-20);
178
+ --odx-color-input-control-fill-readonly: var(--odx-palette-transparent);
179
+ --odx-color-input-control-stroke: var(--odx-palette-coolgray-20);
180
+ --odx-color-input-control-stroke-hover: var(--odx-palette-coolgray-30);
181
+ --odx-color-input-control-stroke-pressed: var(--odx-color-highlight-rest);
182
+ --odx-color-input-control-stroke-readonly: var(--odx-palette-coolgray-20);
183
+ --odx-color-neutral-hover: var(--odx-palette-coolgray-40);
184
+ --odx-color-neutral-pressed: var(--odx-palette-coolgray-50);
185
+ --odx-color-neutral-rest: var(--odx-palette-coolgray-30);
186
+ --odx-color-overlay: var(--odx-palette-white-60);
187
+ --odx-color-primary-background: var(--odx-palette-blue-00);
188
+ --odx-color-primary-hover: var(--odx-palette-blue-90);
189
+ --odx-color-primary-pressed: var(--odx-palette-blue-100);
190
+ --odx-color-primary-rest: var(--odx-palette-blue-80);
191
+ --odx-color-scrollbar: var(--odx-palette-coolgray-40);
192
+ --odx-color-selected: var(--odx-palette-cyan-60-15);
193
+ --odx-color-selected-hover: var(--odx-palette-cyan-60-20);
194
+ --odx-color-selection-control-fill: var(--odx-palette-coolgray-10);
195
+ --odx-color-selection-control-fill-hover: var(--odx-palette-coolgray-20);
196
+ --odx-color-selection-control-fill-readonly: var(--odx-palette-transparent);
197
+ --odx-color-selection-control-fill-selected: var(--odx-color-highlight-rest);
198
+ --odx-color-selection-control-fill-selected-hover: var(--odx-color-highlight-hover);
199
+ --odx-color-selection-control-fill-selected-readonly: var(--odx-palette-transparent);
200
+ --odx-color-selection-control-foreground-readonly: var(--odx-color-foreground);
201
+ --odx-color-selection-control-stroke: var(--odx-palette-coolgray-20);
202
+ --odx-color-selection-control-stroke-hover: var(--odx-palette-coolgray-30);
203
+ --odx-color-selection-control-stroke-readonly: var(--odx-palette-coolgray-20);
204
+ --odx-color-selection-control-stroke-selected: var(--odx-palette-transparent);
205
+ --odx-color-separator: var(--odx-palette-coolgray-20);
206
+ --odx-color-separator-strong: var(--odx-palette-coolgray-130);
207
+ --odx-color-shadow: var(--odx-palette-blue-100-30);
208
+ --odx-color-success-background: var(--odx-palette-green-00);
209
+ --odx-color-success-hover: var(--odx-palette-green-70);
210
+ --odx-color-success-pressed: var(--odx-palette-green-80);
211
+ --odx-color-success-rest: var(--odx-palette-green-60);
212
+ --odx-color-transparent-hover: var(--odx-palette-blue-80-5);
213
+ --odx-color-transparent-pressed: var(--odx-palette-blue-80-15);
214
+ --odx-color-warning-background: var(--odx-palette-yellow-00);
215
+ --odx-color-warning-hover: var(--odx-palette-yellow-60);
216
+ --odx-color-warning-pressed: var(--odx-palette-yellow-70);
217
+ --odx-color-warning-rest: var(--odx-palette-yellow-50);
218
+ --odx-elevation-blur: var(--odx-size-12);
219
+ --odx-experience-color-secondary-foreground: var(--odx-color-foreground);
220
+ --odx-experience-color-secondary-hover: var(--odx-color-neutral-hover);
221
+ --odx-experience-color-secondary-pressed: var(--odx-color-neutral-pressed);
222
+ --odx-experience-color-secondary-rest: var(--odx-color-neutral-rest);
223
+ --odx-experience-color-secondary-stroke: var(--odx-palette-transparent);
224
+ --odx-experience-dimension-control-height-base: var(--odx-size-225);
225
+ --odx-experience-dimension-control-height-lg: var(--odx-size-300);
226
+ --odx-experience-dimension-control-height-sm: var(--odx-size-150);
227
+ --odx-focus-ring-color: var(--odx-color-focus-outer);
228
+ --odx-focus-ring-offset: var(--odx-size-px);
229
+ --odx-focus-ring-outline: var(--odx-border-width-thick) solid color(srgb 0 0 0 / 0);
230
+ --odx-motion-duration-default: 275ms;
231
+ --odx-motion-duration-fast: 150ms;
232
+ --odx-motion-duration-slow: 375ms;
233
+ --odx-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
234
+ --odx-motion-easing-reduced: cubic-bezier(0, 0, 1, 1);
235
+ --odx-palette-black: hsl(220 50% 5%);
236
+ --odx-palette-black-60: hsl(220 50% 5% / 0.6);
237
+ --odx-palette-blue-00: hsl(219 70% 96%);
238
+ --odx-palette-blue-10: hsl(216 65% 90%);
239
+ --odx-palette-blue-20: hsl(217 71% 80%);
240
+ --odx-palette-blue-30: hsl(217 75% 70%);
241
+ --odx-palette-blue-40: hsl(217 80% 60%);
242
+ --odx-palette-blue-50: hsl(217 75% 48%);
243
+ --odx-palette-blue-60: hsl(217 90% 40%);
244
+ --odx-palette-blue-70: hsl(217 95% 30%);
245
+ --odx-palette-blue-80: hsl(217 100% 20%);
246
+ --odx-palette-blue-80-5: hsl(217 100% 20% / 0.05);
247
+ --odx-palette-blue-80-15: hsl(217 100% 20% / 0.1);
248
+ --odx-palette-blue-80-60: hsl(217 100% 20% / 0.6);
249
+ --odx-palette-blue-90: hsl(216 100% 10%);
250
+ --odx-palette-blue-100: hsl(216 100% 1%);
251
+ --odx-palette-blue-100-30: hsl(216 100% 1% / 0.3);
252
+ --odx-palette-coolgray-00: hsl(210 20% 98%);
253
+ --odx-palette-coolgray-10: hsl(216 20% 95%);
254
+ --odx-palette-coolgray-20: hsl(213 18% 90%);
255
+ --odx-palette-coolgray-30: hsl(212 15% 83%);
256
+ --odx-palette-coolgray-40: hsl(213 15% 76%);
257
+ --odx-palette-coolgray-50: hsl(210 14.000000000000002% 69%);
258
+ --odx-palette-coolgray-60: hsl(208 13% 62%);
259
+ --odx-palette-coolgray-70: hsl(207 12% 55.00000000000001%);
260
+ --odx-palette-coolgray-80: hsl(208 11% 47%);
261
+ --odx-palette-coolgray-90: hsl(205 10% 39%);
262
+ --odx-palette-coolgray-100: hsl(205 16% 31%);
263
+ --odx-palette-coolgray-110: hsl(210 17% 27%);
264
+ --odx-palette-coolgray-120: hsl(207 19% 23%);
265
+ --odx-palette-coolgray-130: hsl(210 20% 20%);
266
+ --odx-palette-coolgray-140: hsl(210 20% 16%);
267
+ --odx-palette-coolgray-150: hsl(207 20% 9%);
268
+ --odx-palette-cyan-00: hsl(200 90% 96%);
269
+ --odx-palette-cyan-10: hsl(200 100% 92%);
270
+ --odx-palette-cyan-10-5: hsl(200 100% 92% / 0.05);
271
+ --odx-palette-cyan-10-15: hsl(200 100% 92% / 0.15);
272
+ --odx-palette-cyan-20: hsl(201 100% 84%);
273
+ --odx-palette-cyan-30: hsl(201 100% 74%);
274
+ --odx-palette-cyan-40: hsl(201 100% 65%);
275
+ --odx-palette-cyan-50: hsl(201 100% 55.00000000000001%);
276
+ --odx-palette-cyan-60: hsl(205 100% 48%);
277
+ --odx-palette-cyan-60-15: hsl(205 100% 48% / 0.15);
278
+ --odx-palette-cyan-60-20: hsl(205 100% 48% / 0.2);
279
+ --odx-palette-cyan-60-25: hsl(205 100% 48% / 0.25);
280
+ --odx-palette-cyan-70: hsl(205 100% 40%);
281
+ --odx-palette-cyan-80: hsl(205 100% 34%);
282
+ --odx-palette-cyan-90: hsl(205 100% 27%);
283
+ --odx-palette-cyan-100: hsl(205 100% 20%);
284
+ --odx-palette-green-00: hsl(138 100% 91%);
285
+ --odx-palette-green-10: hsl(133 100% 86%);
286
+ --odx-palette-green-20: hsl(133 100% 79%);
287
+ --odx-palette-green-30: hsl(133 100% 71%);
288
+ --odx-palette-green-40: hsl(133 100% 61%);
289
+ --odx-palette-green-50: hsl(133 91% 50%);
290
+ --odx-palette-green-60: hsl(133 100% 43%);
291
+ --odx-palette-green-70: hsl(133 100% 39%);
292
+ --odx-palette-green-80: hsl(133 100% 33%);
293
+ --odx-palette-green-90: hsl(133 100% 26%);
294
+ --odx-palette-green-100: hsl(133 100% 20%);
295
+ --odx-palette-orange-00: hsl(30 100% 96%);
296
+ --odx-palette-orange-10: hsl(31 100% 92%);
297
+ --odx-palette-orange-20: hsl(30 100% 83%);
298
+ --odx-palette-orange-30: hsl(30 100% 74%);
299
+ --odx-palette-orange-40: hsl(30 100% 65%);
300
+ --odx-palette-orange-50: hsl(30 100% 56.00000000000001%);
301
+ --odx-palette-orange-60: hsl(30 100% 48%);
302
+ --odx-palette-orange-70: hsl(30 100% 40%);
303
+ --odx-palette-orange-80: hsl(30 100% 32%);
304
+ --odx-palette-orange-90: hsl(30 100% 24%);
305
+ --odx-palette-orange-100: hsl(30 100% 16%);
306
+ --odx-palette-red-00: hsl(354 100% 96%);
307
+ --odx-palette-red-10: hsl(0 100% 92%);
308
+ --odx-palette-red-20: hsl(0 100% 84%);
309
+ --odx-palette-red-30: hsl(0 100% 74%);
310
+ --odx-palette-red-40: hsl(0 100% 68%);
311
+ --odx-palette-red-50: hsl(0 100% 60%);
312
+ --odx-palette-red-60: hsl(0 100% 46%);
313
+ --odx-palette-red-70: hsl(0 98% 43%);
314
+ --odx-palette-red-80: hsl(0 100% 37%);
315
+ --odx-palette-red-90: hsl(0 100% 30%);
316
+ --odx-palette-red-100: hsl(0 100% 22%);
317
+ --odx-palette-sandgray-00: hsl(90 20% 98%);
318
+ --odx-palette-sandgray-10: hsl(90 18% 96%);
319
+ --odx-palette-sandgray-20: hsl(90 15% 92%);
320
+ --odx-palette-sandgray-30: hsl(86 10% 87%);
321
+ --odx-palette-sandgray-40: hsl(80 7.000000000000001% 84%);
322
+ --odx-palette-sandgray-50: hsl(82 7.000000000000001% 78%);
323
+ --odx-palette-sandgray-60: hsl(78 7.000000000000001% 73%);
324
+ --odx-palette-sandgray-70: hsl(80 7.000000000000001% 67%);
325
+ --odx-palette-sandgray-80: hsl(80 8% 61%);
326
+ --odx-palette-sandgray-90: hsl(80 7.000000000000001% 51%);
327
+ --odx-palette-sandgray-100: hsl(78 6% 41%);
328
+ --odx-palette-sandgray-110: hsl(80 7.000000000000001% 36%);
329
+ --odx-palette-sandgray-120: hsl(78 6% 31%);
330
+ --odx-palette-sandgray-130: hsl(75 6% 26%);
331
+ --odx-palette-sandgray-140: hsl(77 6% 23%);
332
+ --odx-palette-sandgray-150: hsl(72 6% 16%);
333
+ --odx-palette-transparent: hsl(0 0% 100% / 0);
334
+ --odx-palette-warmgray-00: hsl(0 9% 98%);
335
+ --odx-palette-warmgray-10: hsl(0 9% 96%);
336
+ --odx-palette-warmgray-20: hsl(0 10% 90%);
337
+ --odx-palette-warmgray-30: hsl(0 7.000000000000001% 85%);
338
+ --odx-palette-warmgray-40: hsl(0 7.000000000000001% 78%);
339
+ --odx-palette-warmgray-50: hsl(0 3% 70%);
340
+ --odx-palette-warmgray-60: hsl(0 3% 63%);
341
+ --odx-palette-warmgray-70: hsl(0 2% 56.00000000000001%);
342
+ --odx-palette-warmgray-80: hsl(0 2% 48%);
343
+ --odx-palette-warmgray-90: hsl(0 2% 40%);
344
+ --odx-palette-warmgray-100: hsl(0 2% 31%);
345
+ --odx-palette-warmgray-120: hsl(0 2% 26%);
346
+ --odx-palette-warmgray-130: hsl(0 2% 22%);
347
+ --odx-palette-warmgray-140: hsl(0 2% 20%);
348
+ --odx-palette-warmgray-150: hsl(0 2% 16%);
349
+ --odx-palette-white: hsl(0 0% 100%);
350
+ --odx-palette-white-05: hsl(0 0% 100% / 0.05);
351
+ --odx-palette-white-60: hsl(0 0% 100% / 0.6);
352
+ --odx-palette-yellow-00: hsl(53 100% 92%);
353
+ --odx-palette-yellow-10: hsl(53 100% 86%);
354
+ --odx-palette-yellow-20: hsl(53 100% 81%);
355
+ --odx-palette-yellow-30: hsl(52 100% 75%);
356
+ --odx-palette-yellow-40: hsl(53 100% 64%);
357
+ --odx-palette-yellow-50: hsl(53 100% 50%);
358
+ --odx-palette-yellow-60: hsl(53 100% 45%);
359
+ --odx-palette-yellow-70: hsl(53 100% 37%);
360
+ --odx-palette-yellow-80: hsl(53 100% 30%);
361
+ --odx-palette-yellow-90: hsl(53 100% 24%);
362
+ --odx-palette-yellow-100: hsl(53 100% 18%);
363
+ --odx-size-12: 2px;
364
+ --odx-size-25: 4px;
365
+ --odx-size-37: 6px;
366
+ --odx-size-50: 8px;
367
+ --odx-size-75: 12px;
368
+ --odx-size-100: 16px;
369
+ --odx-size-125: 20px;
370
+ --odx-size-150: 24px;
371
+ --odx-size-175: 28px;
372
+ --odx-size-200: 32px;
373
+ --odx-size-225: 36px;
374
+ --odx-size-250: 40px;
375
+ --odx-size-300: 48px;
376
+ --odx-size-350: 56px;
377
+ --odx-size-400: 64px;
378
+ --odx-size-450: 72px;
379
+ --odx-size-500: 80px;
380
+ --odx-size-600: 96px;
381
+ --odx-size-700: 112px;
382
+ --odx-size-800: 128px;
383
+ --odx-size-900: 144px;
384
+ --odx-size-1000: 160px;
385
+ --odx-size-base: 16px;
386
+ --odx-size-px: 1px;
387
+ --odx-typography-font-family-base: Draeger Pangea Text;
388
+ --odx-typography-font-family-brand: Draeger Pangea Text;
389
+ --odx-typography-font-size-1: 10px;
390
+ --odx-typography-font-size-2: 14px;
391
+ --odx-typography-font-size-3: 16px;
392
+ --odx-typography-font-size-4: 18px;
393
+ --odx-typography-font-size-5: 20px;
394
+ --odx-typography-font-size-6: 24px;
395
+ --odx-typography-font-size-7: 30px;
396
+ --odx-typography-font-size-8: 40px;
397
+ --odx-typography-font-size-9: 48px;
398
+ --odx-typography-font-size-10: 54px;
399
+ --odx-typography-font-size-11: 68px;
400
+ --odx-typography-font-size-12: 76px;
401
+ --odx-typography-font-size-13: 94px;
402
+ --odx-typography-font-size-base: 16px;
403
+ --odx-typography-font-weight-medium: 500;
404
+ --odx-typography-font-weight-normal: 400;
405
+ --odx-typography-font-weight-semibold: 600;
406
+ --odx-typography-line-height-1: 14px;
407
+ --odx-typography-line-height-2: 19px;
408
+ --odx-typography-line-height-3: 22px;
409
+ --odx-typography-line-height-4: 24px;
410
+ --odx-typography-line-height-5: 26px;
411
+ --odx-typography-line-height-6: 31px;
412
+ --odx-typography-line-height-7: 39px;
413
+ --odx-typography-line-height-8: 49px;
414
+ --odx-typography-line-height-9: 59px;
415
+ --odx-typography-line-height-10: 64px;
416
+ --odx-typography-line-height-11: 80px;
417
+ --odx-typography-line-height-12: 89px;
418
+ --odx-typography-line-height-13: 110px;
419
+ --odx-typography-line-height-base: 24px;
420
+ --odx-typography-weight-fontWeightMedium: Medium;
421
+ --odx-typography-weight-fontWeightNormal: Regular;
422
+ --odx-typography-weight-fontWeightSemibold: Semibold;
423
+ }
424
+
425
+ @media (min-width: 479px) {
426
+ :root {
427
+ --odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);
428
+ --odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);
429
+ --odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);
430
+ --odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);
431
+ --odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);
432
+ --odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);
433
+ --odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);
434
+ --odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);
435
+ --odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);
436
+ --odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);
437
+ --odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);
438
+ --odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);
439
+ --odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);
440
+ --odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);
441
+ --odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);
442
+ --odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);
443
+ --odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);
444
+ --odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);
445
+ --odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);
446
+ --odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);
447
+ --odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);
448
+ --odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);
449
+ --odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);
450
+ --odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);
451
+ --odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);
452
+ --odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);
453
+ --odx-breakpoint-spacing-12: var(--odx-size-12);
454
+ --odx-breakpoint-spacing-25: var(--odx-size-25);
455
+ --odx-breakpoint-spacing-37: var(--odx-size-37);
456
+ --odx-breakpoint-spacing-50: var(--odx-size-50);
457
+ --odx-breakpoint-spacing-75: var(--odx-size-75);
458
+ --odx-breakpoint-spacing-100: var(--odx-size-100);
459
+ --odx-breakpoint-spacing-150: var(--odx-size-150);
460
+ --odx-breakpoint-spacing-150-responsive: var(--odx-size-100);
461
+ --odx-breakpoint-spacing-200: var(--odx-size-200);
462
+ --odx-breakpoint-spacing-200-responsive: var(--odx-size-100);
463
+ --odx-breakpoint-spacing-250: var(--odx-size-250);
464
+ --odx-breakpoint-spacing-250-responsive: var(--odx-size-150);
465
+ --odx-breakpoint-spacing-300: var(--odx-size-300);
466
+ --odx-breakpoint-spacing-300-responsive: var(--odx-size-200);
467
+ --odx-breakpoint-visibility-lg-down-hide: 0;
468
+ --odx-breakpoint-visibility-lg-down-show: 1;
469
+ --odx-breakpoint-visibility-lg-show: 0;
470
+ --odx-breakpoint-visibility-md-down-hide: 0;
471
+ --odx-breakpoint-visibility-md-down-show: 1;
472
+ --odx-breakpoint-visibility-md-show: 0;
473
+ --odx-breakpoint-visibility-sm-down-hide: 0;
474
+ --odx-breakpoint-visibility-sm-down-show: 1;
475
+ --odx-breakpoint-visibility-sm-show: 1;
476
+ --odx-breakpoint-visibility-xl-show: 0;
477
+ }
478
+ }
479
+
480
+ @media (min-width: 768px) {
481
+ :root {
482
+ --odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);
483
+ --odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);
484
+ --odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);
485
+ --odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);
486
+ --odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);
487
+ --odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);
488
+ --odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);
489
+ --odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);
490
+ --odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);
491
+ --odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);
492
+ --odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);
493
+ --odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);
494
+ --odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);
495
+ --odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);
496
+ --odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);
497
+ --odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);
498
+ --odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-12);
499
+ --odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);
500
+ --odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);
501
+ --odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);
502
+ --odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);
503
+ --odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);
504
+ --odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);
505
+ --odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);
506
+ --odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);
507
+ --odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);
508
+ --odx-breakpoint-spacing-12: var(--odx-size-12);
509
+ --odx-breakpoint-spacing-25: var(--odx-size-25);
510
+ --odx-breakpoint-spacing-37: var(--odx-size-37);
511
+ --odx-breakpoint-spacing-50: var(--odx-size-50);
512
+ --odx-breakpoint-spacing-75: var(--odx-size-75);
513
+ --odx-breakpoint-spacing-100: var(--odx-size-100);
514
+ --odx-breakpoint-spacing-150: var(--odx-size-150);
515
+ --odx-breakpoint-spacing-150-responsive: var(--odx-size-100);
516
+ --odx-breakpoint-spacing-200: var(--odx-size-200);
517
+ --odx-breakpoint-spacing-200-responsive: var(--odx-size-150);
518
+ --odx-breakpoint-spacing-250: var(--odx-size-250);
519
+ --odx-breakpoint-spacing-250-responsive: var(--odx-size-150);
520
+ --odx-breakpoint-spacing-300: var(--odx-size-300);
521
+ --odx-breakpoint-spacing-300-responsive: var(--odx-size-200);
522
+ --odx-breakpoint-visibility-lg-down-hide: 0;
523
+ --odx-breakpoint-visibility-lg-down-show: 1;
524
+ --odx-breakpoint-visibility-lg-show: 0;
525
+ --odx-breakpoint-visibility-md-down-hide: 0;
526
+ --odx-breakpoint-visibility-md-down-show: 1;
527
+ --odx-breakpoint-visibility-md-show: 1;
528
+ --odx-breakpoint-visibility-sm-down-hide: 1;
529
+ --odx-breakpoint-visibility-sm-down-show: 0;
530
+ --odx-breakpoint-visibility-sm-show: 0;
531
+ --odx-breakpoint-visibility-xl-show: 0;
532
+ }
533
+ }
534
+
535
+ @media (min-width: 990px) {
536
+ :root {
537
+ --odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);
538
+ --odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);
539
+ --odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);
540
+ --odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);
541
+ --odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);
542
+ --odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);
543
+ --odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);
544
+ --odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);
545
+ --odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);
546
+ --odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);
547
+ --odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);
548
+ --odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);
549
+ --odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);
550
+ --odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);
551
+ --odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);
552
+ --odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);
553
+ --odx-breakpoint-line-height-display-xl: var(--odx-typography-font-size-12);
554
+ --odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);
555
+ --odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);
556
+ --odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);
557
+ --odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);
558
+ --odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);
559
+ --odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);
560
+ --odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);
561
+ --odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);
562
+ --odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);
563
+ --odx-breakpoint-spacing-12: var(--odx-size-12);
564
+ --odx-breakpoint-spacing-25: var(--odx-size-25);
565
+ --odx-breakpoint-spacing-37: var(--odx-size-37);
566
+ --odx-breakpoint-spacing-50: var(--odx-size-50);
567
+ --odx-breakpoint-spacing-75: var(--odx-size-75);
568
+ --odx-breakpoint-spacing-100: var(--odx-size-100);
569
+ --odx-breakpoint-spacing-150: var(--odx-size-150);
570
+ --odx-breakpoint-spacing-150-responsive: var(--odx-size-150);
571
+ --odx-breakpoint-spacing-200: var(--odx-size-200);
572
+ --odx-breakpoint-spacing-200-responsive: var(--odx-size-150);
573
+ --odx-breakpoint-spacing-250: var(--odx-size-250);
574
+ --odx-breakpoint-spacing-250-responsive: var(--odx-size-200);
575
+ --odx-breakpoint-spacing-300: var(--odx-size-300);
576
+ --odx-breakpoint-spacing-300-responsive: var(--odx-size-250);
577
+ --odx-breakpoint-visibility-lg-down-hide: 0;
578
+ --odx-breakpoint-visibility-lg-down-show: 1;
579
+ --odx-breakpoint-visibility-lg-show: 1;
580
+ --odx-breakpoint-visibility-md-down-hide: 1;
581
+ --odx-breakpoint-visibility-md-down-show: 0;
582
+ --odx-breakpoint-visibility-md-show: 0;
583
+ --odx-breakpoint-visibility-sm-down-hide: 1;
584
+ --odx-breakpoint-visibility-sm-down-show: 0;
585
+ --odx-breakpoint-visibility-sm-show: 0;
586
+ --odx-breakpoint-visibility-xl-show: 0;
587
+ }
588
+ }
589
+
590
+ @media (min-width: 1280px) {
591
+ :root {
592
+ --odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-12);
593
+ --odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-11);
594
+ --odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-10);
595
+ --odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-13);
596
+ --odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-11);
597
+ --odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-10);
598
+ --odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-8);
599
+ --odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-7);
600
+ --odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);
601
+ --odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);
602
+ --odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);
603
+ --odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);
604
+ --odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);
605
+ --odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-12);
606
+ --odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-11);
607
+ --odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-10);
608
+ --odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-13);
609
+ --odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-11);
610
+ --odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-10);
611
+ --odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-8);
612
+ --odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-7);
613
+ --odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);
614
+ --odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);
615
+ --odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);
616
+ --odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);
617
+ --odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);
618
+ --odx-breakpoint-spacing-12: var(--odx-size-12);
619
+ --odx-breakpoint-spacing-25: var(--odx-size-25);
620
+ --odx-breakpoint-spacing-37: var(--odx-size-37);
621
+ --odx-breakpoint-spacing-50: var(--odx-size-50);
622
+ --odx-breakpoint-spacing-75: var(--odx-size-75);
623
+ --odx-breakpoint-spacing-100: var(--odx-size-100);
624
+ --odx-breakpoint-spacing-150: var(--odx-size-150);
625
+ --odx-breakpoint-spacing-150-responsive: var(--odx-size-150);
626
+ --odx-breakpoint-spacing-200: var(--odx-size-200);
627
+ --odx-breakpoint-spacing-200-responsive: var(--odx-size-200);
628
+ --odx-breakpoint-spacing-250: var(--odx-size-250);
629
+ --odx-breakpoint-spacing-250-responsive: var(--odx-size-250);
630
+ --odx-breakpoint-spacing-300: var(--odx-size-300);
631
+ --odx-breakpoint-spacing-300-responsive: var(--odx-size-300);
632
+ --odx-breakpoint-visibility-lg-down-hide: 1;
633
+ --odx-breakpoint-visibility-lg-down-show: 0;
634
+ --odx-breakpoint-visibility-lg-show: 0;
635
+ --odx-breakpoint-visibility-md-down-hide: 1;
636
+ --odx-breakpoint-visibility-md-down-show: 0;
637
+ --odx-breakpoint-visibility-md-show: 0;
638
+ --odx-breakpoint-visibility-sm-down-hide: 1;
639
+ --odx-breakpoint-visibility-sm-down-show: 0;
640
+ --odx-breakpoint-visibility-sm-show: 0;
641
+ --odx-breakpoint-visibility-xl-show: 1;
642
+ }
643
+ }
644
+ }
645
+
646
+ @layer odx-base{
647
+ [odxPreventTextOverflow] {
648
+ white-space: nowrap;
649
+ overflow: hidden;
650
+ text-overflow: ellipsis;
651
+ }
652
+ }
653
+
654
+ @layer odx-base{
655
+
656
+ html,
657
+ body {
658
+ background-color: var(--odx-color-background-cool);
659
+ }
660
+
661
+ html {
662
+ font-family: sans-serif;
663
+ margin: 0;
664
+ padding: 0;
665
+ }
666
+
667
+ body {
668
+ -webkit-font-smoothing: antialiased;
669
+ color: var(--odx-color-foreground);
670
+ font-family: var(--odx-typography-font-family-base), "Noto Sans", "Kanit", sans-serif;
671
+ font-size: var(--odx-breakpoint-font-size-p-base);
672
+ line-height: var(--odx-breakpoint-line-height-p-md);
673
+ margin: 0;
674
+ padding: 0;
675
+ }
676
+
677
+ * {
678
+ scrollbar-color: var(--odx-color-neutral-rest) var(--odx-palette-transparent);
679
+ }
680
+
681
+ *:not(body) {
682
+ scrollbar-width: thin;
683
+ }
684
+
685
+ h1,
686
+ h2,
687
+ h3,
688
+ h4,
689
+ h5,
690
+ h6 {
691
+ display: block;
692
+ font-family: var(--odx-typography-font-family-brand);
693
+ font-size: var(--_font-size);
694
+ font-weight: var(--odx-typography-font-weight-semibold);
695
+ line-height: var(--_line-height);
696
+ color: inherit;
697
+ }
698
+
699
+ h6 {
700
+ --_font-size: var(--odx-breakpoint-font-size-heading-6);
701
+ --_line-height: var(--odx-breakpoint-line-height-heading-6);
702
+ }
703
+
704
+ h5 {
705
+ --_font-size: var(--odx-breakpoint-font-size-heading-5);
706
+ --_line-height: var(--odx-breakpoint-line-height-heading-5);
707
+ }
708
+
709
+ h4 {
710
+ --_font-size: var(--odx-breakpoint-font-size-heading-4);
711
+ --_line-height: var(--odx-breakpoint-line-height-heading-4);
712
+ }
713
+
714
+ h3 {
715
+ --_font-size: var(--odx-breakpoint-font-size-heading-3);
716
+ --_line-height: var(--odx-breakpoint-line-height-heading-3);
717
+ }
718
+
719
+ h2 {
720
+ --_font-size: var(--odx-breakpoint-font-size-heading-2);
721
+ --_line-height: var(--odx-breakpoint-line-height-heading-2);
722
+ }
723
+
724
+ h1 {
725
+ --_font-size: var(--odx-breakpoint-font-size-heading-1);
726
+ --_line-height: var(--odx-breakpoint-line-height-heading-1);
727
+ }
728
+ }
729
+
730
+ @layer odx-base {
731
+ :root {
732
+ --odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);
733
+ --odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);
734
+ --odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);
735
+
736
+ --odx-page-max-inline-size: 1600px;
737
+ --odx-page-max-inline-size-narrow: 1200px;
738
+ --odx-page-max-inline-size-wide: 2400px;
739
+ }
740
+ }