vue-devui 1.0.0-beta.9 → 1.0.0-rc.1

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 (294) hide show
  1. package/README.md +100 -72
  2. package/accordion/index.es.js +525 -39
  3. package/accordion/index.umd.js +1 -1
  4. package/accordion/style.css +1 -1
  5. package/alert/index.es.js +34 -37
  6. package/alert/index.umd.js +1 -1
  7. package/alert/style.css +1 -1
  8. package/{time-axis → auto-complete}/index.d.ts +0 -0
  9. package/auto-complete/index.es.js +983 -0
  10. package/auto-complete/index.umd.js +1 -0
  11. package/auto-complete/package.json +7 -0
  12. package/auto-complete/style.css +1 -0
  13. package/back-top/index.es.js +5 -3
  14. package/back-top/index.umd.js +1 -1
  15. package/badge/index.es.js +13 -19
  16. package/badge/index.umd.js +1 -1
  17. package/badge/style.css +1 -1
  18. package/breadcrumb/index.es.js +2 -1
  19. package/button/index.es.js +296 -117
  20. package/button/index.umd.js +1 -1
  21. package/button/style.css +1 -1
  22. package/carousel/index.es.js +43 -57
  23. package/carousel/index.umd.js +1 -1
  24. package/cascader/index.es.js +5412 -784
  25. package/cascader/index.umd.js +27 -1
  26. package/cascader/style.css +1 -1
  27. package/checkbox/style.css +1 -1
  28. package/{toast → color-picker}/index.d.ts +0 -0
  29. package/color-picker/index.es.js +8196 -0
  30. package/color-picker/index.umd.js +27 -0
  31. package/color-picker/package.json +7 -0
  32. package/color-picker/style.css +1 -0
  33. package/comment/index.es.js +42 -13
  34. package/comment/index.umd.js +1 -1
  35. package/comment/style.css +1 -1
  36. package/countdown/index.es.js +27 -17
  37. package/countdown/index.umd.js +1 -1
  38. package/countdown/style.css +1 -1
  39. package/date-picker/index.es.js +48 -66
  40. package/date-picker/index.umd.js +1 -1
  41. package/date-picker/style.css +1 -1
  42. package/dragdrop/index.es.js +135 -10
  43. package/dragdrop/index.umd.js +1 -1
  44. package/drawer/index.es.js +169 -223
  45. package/drawer/index.umd.js +1 -1
  46. package/drawer/style.css +1 -1
  47. package/dropdown/index.es.js +463 -300
  48. package/dropdown/index.umd.js +1 -1
  49. package/dropdown/style.css +1 -1
  50. package/editable-select/index.es.js +293 -5660
  51. package/editable-select/index.umd.js +1 -27
  52. package/editable-select/style.css +1 -1
  53. package/form/index.es.js +6210 -531
  54. package/form/index.umd.js +27 -1
  55. package/form/style.css +1 -1
  56. package/fullscreen/index.es.js +112 -133
  57. package/fullscreen/index.umd.js +1 -1
  58. package/fullscreen/style.css +1 -1
  59. package/gantt/index.es.js +6 -18
  60. package/gantt/index.umd.js +1 -1
  61. package/gantt/style.css +1 -1
  62. package/grid/index.es.js +1 -1
  63. package/grid/style.css +1 -1
  64. package/icon/index.es.js +39 -56
  65. package/icon/index.umd.js +1 -1
  66. package/image-preview/index.es.js +35 -16
  67. package/image-preview/index.umd.js +1 -1
  68. package/input/index.es.js +4 -5
  69. package/input/index.umd.js +1 -1
  70. package/input/style.css +1 -1
  71. package/input-icon/index.es.js +42 -41
  72. package/input-icon/index.umd.js +1 -1
  73. package/input-icon/style.css +1 -1
  74. package/input-number/index.es.js +46 -56
  75. package/input-number/index.umd.js +1 -1
  76. package/input-number/style.css +1 -1
  77. package/list/index.d.ts +7 -0
  78. package/list/index.es.js +39 -0
  79. package/list/index.umd.js +1 -0
  80. package/{toast → list}/package.json +1 -1
  81. package/list/style.css +1 -0
  82. package/loading/index.es.js +2 -2
  83. package/modal/index.es.js +304 -765
  84. package/modal/index.umd.js +1 -1
  85. package/modal/style.css +1 -1
  86. package/nav-sprite/index.es.js +1 -675
  87. package/nav-sprite/index.umd.js +1 -1
  88. package/notification/index.d.ts +7 -0
  89. package/notification/index.es.js +284 -0
  90. package/notification/index.umd.js +1 -0
  91. package/notification/package.json +7 -0
  92. package/notification/style.css +1 -0
  93. package/nuxt/components/Accordion.js +3 -0
  94. package/nuxt/components/Alert.js +3 -0
  95. package/nuxt/components/Anchor.js +3 -0
  96. package/nuxt/components/Aside.js +3 -0
  97. package/nuxt/components/AutoComplete.js +3 -0
  98. package/nuxt/components/Avatar.js +3 -0
  99. package/nuxt/components/BackTop.js +3 -0
  100. package/nuxt/components/Badge.js +3 -0
  101. package/nuxt/components/Breadcrumb.js +3 -0
  102. package/nuxt/components/Button.js +3 -0
  103. package/nuxt/components/Card.js +3 -0
  104. package/nuxt/components/Carousel.js +3 -0
  105. package/nuxt/components/CarouselItem.js +3 -0
  106. package/nuxt/components/Cascader.js +3 -0
  107. package/nuxt/components/Checkbox.js +3 -0
  108. package/nuxt/components/Col.js +3 -0
  109. package/nuxt/components/ColorPicker.js +3 -0
  110. package/nuxt/components/Column.js +3 -0
  111. package/nuxt/components/Comment.js +3 -0
  112. package/nuxt/components/Content.js +3 -0
  113. package/nuxt/components/Countdown.js +3 -0
  114. package/nuxt/components/DatePicker.js +3 -0
  115. package/nuxt/components/Drawer.js +3 -0
  116. package/nuxt/components/DrawerService.js +3 -0
  117. package/nuxt/components/Dropdown.js +3 -0
  118. package/nuxt/components/DropdownMenu.js +3 -0
  119. package/nuxt/components/EditableSelect.js +3 -0
  120. package/nuxt/components/FixedOverlay.js +3 -0
  121. package/nuxt/components/FlexibleOverlay.js +3 -0
  122. package/nuxt/components/Footer.js +3 -0
  123. package/nuxt/components/Form.js +3 -0
  124. package/nuxt/components/FormControl.js +3 -0
  125. package/nuxt/components/FormItem.js +3 -0
  126. package/nuxt/components/FormLabel.js +3 -0
  127. package/nuxt/components/FormOperation.js +3 -0
  128. package/nuxt/components/Fullscreen.js +3 -0
  129. package/nuxt/components/Gantt.js +3 -0
  130. package/nuxt/components/Header.js +3 -0
  131. package/nuxt/components/IFileOptions.js +3 -0
  132. package/nuxt/components/IUploadOptions.js +3 -0
  133. package/nuxt/components/Icon.js +2 -0
  134. package/nuxt/components/ImagePreviewService.js +3 -0
  135. package/nuxt/components/Input.js +3 -0
  136. package/nuxt/components/InputIcon.js +3 -0
  137. package/nuxt/components/InputNumber.js +3 -0
  138. package/nuxt/components/Layout.js +3 -0
  139. package/nuxt/components/List.js +3 -0
  140. package/nuxt/components/ListItem.js +3 -0
  141. package/nuxt/components/Loading.js +3 -0
  142. package/nuxt/components/LoadingService.js +3 -0
  143. package/nuxt/components/Modal.js +3 -0
  144. package/nuxt/components/NavSprite.js +2 -0
  145. package/nuxt/components/Notification.js +3 -0
  146. package/nuxt/components/NotificationService.js +3 -0
  147. package/nuxt/components/Pagination.js +3 -0
  148. package/nuxt/components/Panel.js +3 -0
  149. package/nuxt/components/PanelBody.js +3 -0
  150. package/nuxt/components/PanelFooter.js +3 -0
  151. package/nuxt/components/PanelHeader.js +3 -0
  152. package/nuxt/components/Popover.js +3 -0
  153. package/nuxt/components/Progress.js +3 -0
  154. package/nuxt/components/QuadrantDiagram.js +3 -0
  155. package/nuxt/components/Radio.js +3 -0
  156. package/nuxt/components/RadioGroup.js +3 -0
  157. package/nuxt/components/Rate.js +3 -0
  158. package/nuxt/components/ReadTip.js +3 -0
  159. package/nuxt/components/Result.js +3 -0
  160. package/nuxt/components/Row.js +3 -0
  161. package/nuxt/components/Search.js +3 -0
  162. package/nuxt/components/Select.js +3 -0
  163. package/nuxt/components/Skeleton.js +3 -0
  164. package/nuxt/components/SkeletonItem.js +3 -0
  165. package/nuxt/components/Slider.js +3 -0
  166. package/nuxt/components/Splitter.js +3 -0
  167. package/nuxt/components/Statistic.js +3 -0
  168. package/nuxt/components/Status.js +3 -0
  169. package/nuxt/components/StepsGuide.js +3 -0
  170. package/nuxt/components/StickSlider.js +3 -0
  171. package/nuxt/components/Sticky.js +2 -0
  172. package/nuxt/components/Switch.js +3 -0
  173. package/nuxt/components/Table.js +3 -0
  174. package/nuxt/components/Tabs.js +3 -0
  175. package/nuxt/components/Tag.js +3 -0
  176. package/nuxt/components/TagInput.js +3 -0
  177. package/nuxt/components/Textarea.js +3 -0
  178. package/nuxt/components/TimePicker.js +3 -0
  179. package/nuxt/components/Timeline.js +3 -0
  180. package/nuxt/components/TimelineItem.js +3 -0
  181. package/nuxt/components/Tooltip.js +3 -0
  182. package/nuxt/components/Transfer.js +3 -0
  183. package/nuxt/components/Tree.js +3 -0
  184. package/nuxt/components/TreeSelect.js +3 -0
  185. package/nuxt/components/Upload.js +3 -0
  186. package/nuxt/components/UploadStatus.js +3 -0
  187. package/nuxt/components/alertProps.js +3 -0
  188. package/nuxt/components/badgeProps.js +3 -0
  189. package/nuxt/components/buttonProps.js +3 -0
  190. package/nuxt/components/dropdownMenuProps.js +3 -0
  191. package/nuxt/components/fixedOverlayProps.js +3 -0
  192. package/nuxt/components/flexibleOverlayProps.js +3 -0
  193. package/nuxt/components/fullscreenProps.js +3 -0
  194. package/nuxt/components/iconProps.js +2 -0
  195. package/nuxt/components/notificationProps.js +3 -0
  196. package/nuxt/components/overlayEmits.js +3 -0
  197. package/nuxt/components/overlayProps.js +3 -0
  198. package/nuxt/components/paginationProps.js +3 -0
  199. package/nuxt/components/panelProps.js +3 -0
  200. package/nuxt/components/popoverProps.js +3 -0
  201. package/nuxt/components/searchProps.js +3 -0
  202. package/nuxt/components/tooltipProps.js +3 -0
  203. package/nuxt/components/uploadProps.js +3 -0
  204. package/nuxt/index.js +13 -0
  205. package/overlay/index.es.js +156 -205
  206. package/overlay/index.umd.js +1 -1
  207. package/overlay/style.css +1 -1
  208. package/package.json +12 -55
  209. package/pagination/index.es.js +11 -13
  210. package/pagination/index.umd.js +1 -1
  211. package/pagination/style.css +1 -1
  212. package/panel/index.es.js +48 -35
  213. package/panel/index.umd.js +1 -1
  214. package/popover/index.es.js +5954 -189
  215. package/popover/index.umd.js +27 -1
  216. package/popover/style.css +1 -1
  217. package/progress/index.es.js +8 -8
  218. package/progress/index.umd.js +3 -3
  219. package/quadrant-diagram/index.es.js +5405 -166
  220. package/quadrant-diagram/index.umd.js +27 -1
  221. package/radio/index.es.js +8 -14
  222. package/radio/index.umd.js +1 -1
  223. package/radio/style.css +1 -1
  224. package/read-tip/index.es.js +6 -3
  225. package/read-tip/style.css +1 -1
  226. package/result/index.es.js +38 -52
  227. package/result/index.umd.js +1 -1
  228. package/ripple/index.es.js +10 -6
  229. package/search/index.es.js +5428 -200
  230. package/search/index.umd.js +27 -1
  231. package/search/style.css +1 -1
  232. package/select/index.es.js +43 -42
  233. package/select/index.umd.js +1 -1
  234. package/select/style.css +1 -1
  235. package/skeleton/index.es.js +17 -17
  236. package/skeleton/index.umd.js +1 -1
  237. package/slider/index.es.js +4 -6
  238. package/slider/index.umd.js +1 -1
  239. package/slider/style.css +1 -1
  240. package/splitter/index.es.js +5896 -39
  241. package/splitter/index.umd.js +27 -1
  242. package/splitter/style.css +1 -1
  243. package/statistic/index.es.js +19 -32
  244. package/statistic/index.umd.js +1 -1
  245. package/statistic/style.css +1 -1
  246. package/status/index.es.js +1 -4
  247. package/status/index.umd.js +1 -1
  248. package/status/style.css +1 -1
  249. package/steps-guide/index.es.js +6 -3
  250. package/sticky/index.umd.js +1 -1
  251. package/style.css +1 -1
  252. package/table/index.es.js +753 -358
  253. package/table/index.umd.js +1 -1
  254. package/table/style.css +1 -1
  255. package/tabs/index.es.js +3 -4
  256. package/tabs/index.umd.js +1 -1
  257. package/tabs/style.css +1 -1
  258. package/tag/index.es.js +4 -3
  259. package/tag/index.umd.js +1 -1
  260. package/tag/style.css +1 -1
  261. package/tag-input/index.es.js +4 -14
  262. package/tag-input/index.umd.js +1 -1
  263. package/textarea/style.css +1 -1
  264. package/{theme → theme/theme.scss} +0 -0
  265. package/time-picker/index.es.js +309 -123
  266. package/time-picker/index.umd.js +1 -1
  267. package/time-picker/style.css +1 -1
  268. package/timeline/index.d.ts +7 -0
  269. package/{time-axis → timeline}/index.es.js +65 -77
  270. package/timeline/index.umd.js +1 -0
  271. package/{time-axis → timeline}/package.json +1 -1
  272. package/timeline/style.css +1 -0
  273. package/tooltip/index.es.js +5805 -141
  274. package/tooltip/index.umd.js +27 -1
  275. package/tooltip/style.css +1 -1
  276. package/transfer/index.es.js +6521 -630
  277. package/transfer/index.umd.js +27 -1
  278. package/transfer/style.css +1 -1
  279. package/tree/index.es.js +5781 -193
  280. package/tree/index.umd.js +27 -1
  281. package/tree/style.css +1 -1
  282. package/tree-select/index.es.js +138 -39
  283. package/tree-select/index.umd.js +1 -1
  284. package/tree-select/style.css +1 -1
  285. package/upload/index.es.js +450 -2669
  286. package/upload/index.umd.js +1 -1
  287. package/upload/style.css +1 -1
  288. package/vue-devui.es.js +14414 -14096
  289. package/vue-devui.umd.js +19 -19
  290. package/time-axis/index.umd.js +0 -1
  291. package/time-axis/style.css +0 -1
  292. package/toast/index.es.js +0 -2059
  293. package/toast/index.umd.js +0 -1
  294. package/toast/style.css +0 -1
@@ -1,146 +1,128 @@
1
- import { defineComponent, ref, onMounted, onBeforeUnmount, renderSlot, useSlots, createVNode } from "vue";
2
- var fullscreen = "";
1
+ import { toRefs, onMounted, onUnmounted, watch, defineComponent, ref, renderSlot, useSlots, createVNode } from "vue";
3
2
  const fullscreenProps = {
4
- fullscreenLaunch: {
5
- type: Function,
6
- default: void 0
3
+ modelValue: {
4
+ type: Boolean,
5
+ default: false
7
6
  },
8
7
  mode: {
9
8
  type: String,
10
- default: "immersive"
9
+ default: "normal"
11
10
  },
12
11
  zIndex: {
13
12
  type: Number,
14
13
  default: 10
15
14
  }
16
15
  };
16
+ const ESC_KEY_CODE = 27;
17
+ function useKeydown(props, ctx) {
18
+ const { modelValue } = toRefs(props);
19
+ const handleKeydown = (event) => {
20
+ if (event.keyCode === ESC_KEY_CODE && modelValue) {
21
+ ctx.emit("update:modelValue", false);
22
+ }
23
+ };
24
+ onMounted(() => {
25
+ document.addEventListener("keydown", handleKeydown);
26
+ });
27
+ onUnmounted(() => {
28
+ document.removeEventListener("keydown", handleKeydown);
29
+ });
30
+ }
31
+ const launchNormalFullscreen = (targetElement, props) => {
32
+ targetElement.classList.add("devui-fullscreen");
33
+ if (props.zIndex) {
34
+ targetElement.setAttribute("style", `z-index: ${props.zIndex}`);
35
+ }
36
+ };
37
+ const exitNormalFullscreen = (targetElement) => {
38
+ targetElement.classList.remove("devui-fullscreen");
39
+ targetElement.style.zIndex = "";
40
+ };
41
+ const launchImmersiveFullScreen = async (docElement) => {
42
+ let fullscreenLaunch = null;
43
+ if (docElement.requestFullscreen) {
44
+ fullscreenLaunch = docElement.requestFullscreen();
45
+ } else if (docElement.mozRequestFullScreen) {
46
+ fullscreenLaunch = docElement.mozRequestFullScreen();
47
+ } else if (docElement.webkitRequestFullScreen) {
48
+ fullscreenLaunch = Promise.resolve(docElement.webkitRequestFullScreen());
49
+ } else if (docElement.msRequestFullscreen) {
50
+ fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
51
+ }
52
+ return await (fullscreenLaunch == null ? void 0 : fullscreenLaunch.then(() => !!document.fullscreenElement));
53
+ };
54
+ const exitImmersiveFullScreen = async (doc) => {
55
+ let fullscreenExit = null;
56
+ if (doc.exitFullscreen) {
57
+ fullscreenExit = doc.exitFullscreen();
58
+ } else if (doc.mozCancelFullScreen) {
59
+ fullscreenExit = doc.mozCancelFullScreen();
60
+ } else if (doc.webkitCancelFullScreen) {
61
+ fullscreenExit = Promise.resolve(doc.webkitCancelFullScreen());
62
+ } else if (doc.msExitFullscreen) {
63
+ fullscreenExit = Promise.resolve(doc.msExitFullscreen());
64
+ }
65
+ return await (fullscreenExit == null ? void 0 : fullscreenExit.then(() => !!document.fullscreenElement));
66
+ };
67
+ const addFullScreenStyle = () => {
68
+ document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html");
69
+ };
70
+ const removeFullScreenStyle = () => {
71
+ document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html");
72
+ };
73
+ function useFullscreen(props, slotElement, ctx) {
74
+ const { modelValue, mode } = toRefs(props);
75
+ let exitByKeydown = false;
76
+ const handleNormalFullscreen = (isOpen) => {
77
+ if (isOpen) {
78
+ launchNormalFullscreen(slotElement.value, props);
79
+ addFullScreenStyle();
80
+ } else {
81
+ exitNormalFullscreen(slotElement.value);
82
+ removeFullScreenStyle();
83
+ }
84
+ };
85
+ const handleImmersiveFullscreen = (isOpen) => {
86
+ if (isOpen) {
87
+ launchImmersiveFullScreen(slotElement.value);
88
+ } else {
89
+ if (!exitByKeydown) {
90
+ exitImmersiveFullScreen(document);
91
+ }
92
+ }
93
+ };
94
+ watch(modelValue, (newVal) => {
95
+ if (mode.value === "normal") {
96
+ handleNormalFullscreen(newVal);
97
+ }
98
+ if (mode.value === "immersive") {
99
+ handleImmersiveFullscreen(newVal);
100
+ }
101
+ });
102
+ const handleFullscreenChange = () => {
103
+ if (!document.fullscreenElement) {
104
+ ctx.emit("update:modelValue");
105
+ exitByKeydown = true;
106
+ } else {
107
+ exitByKeydown = false;
108
+ }
109
+ };
110
+ onMounted(() => {
111
+ document.addEventListener("fullscreenchange", handleFullscreenChange);
112
+ });
113
+ onUnmounted(() => {
114
+ document.removeEventListener("fullscreenchange", handleFullscreenChange);
115
+ });
116
+ }
117
+ var fullscreen = "";
17
118
  var Fullscreen = defineComponent({
18
119
  name: "DFullscreen",
19
120
  props: fullscreenProps,
20
- emits: ["fullscreenLaunch"],
121
+ emits: ["update:modelValue"],
21
122
  setup(props, ctx) {
22
- let currentTarget = null;
23
- const isFullscreen = ref(false);
24
123
  const slotElement = ref(null);
25
- const onFullScreenChange = () => {
26
- if (currentTarget) {
27
- const targetElement = currentTarget;
28
- if (document.fullscreenElement) {
29
- addFullScreenStyle();
30
- launchNormalFullscreen(targetElement);
31
- } else {
32
- removeFullScreenStyle();
33
- currentTarget = null;
34
- exitNormalFullscreen(targetElement);
35
- }
36
- isFullscreen.value = !!document.fullscreenElement;
37
- ctx.emit("fullscreenLaunch", isFullscreen.value);
38
- }
39
- };
40
- const launchNormalFullscreen = (targetElement) => {
41
- targetElement.classList.add("fullscreen");
42
- if (props.zIndex) {
43
- targetElement.setAttribute("style", `z-index: ${props.zIndex}`);
44
- }
45
- };
46
- const exitNormalFullscreen = (targetElement) => {
47
- targetElement.classList.remove("fullscreen");
48
- targetElement.style.zIndex = null;
49
- };
50
- const handleFullscreen = async () => {
51
- const targetElement = slotElement.value.querySelector("[fullscreen-target]");
52
- let isFull = false;
53
- if (props.mode === "normal") {
54
- const fullscreen2 = targetElement.classList.contains("fullscreen");
55
- if (!fullscreen2) {
56
- addFullScreenStyle();
57
- launchNormalFullscreen(targetElement);
58
- isFull = true;
59
- } else {
60
- removeFullScreenStyle();
61
- exitNormalFullscreen(targetElement);
62
- isFull = false;
63
- }
64
- } else {
65
- currentTarget = targetElement;
66
- if (document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement) {
67
- isFull = await exitImmersiveFullScreen(document);
68
- } else {
69
- isFull = await launchImmersiveFullScreen(currentTarget);
70
- }
71
- }
72
- isFullscreen.value = isFull;
73
- ctx.emit("fullscreenLaunch", isFullscreen.value);
74
- };
75
- const addFullScreenStyle = () => {
76
- document.getElementsByTagName("html")[0].classList.add("devui-fullscreen");
77
- };
78
- const removeFullScreenStyle = () => {
79
- document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen");
80
- };
81
- const exitImmersiveFullScreen = async (doc) => {
82
- let fullscreenExit = null;
83
- if (doc.exitFullscreen) {
84
- fullscreenExit = doc.exitFullscreen();
85
- } else if (doc.mozCancelFullScreen) {
86
- fullscreenExit = doc.mozCancelFullScreen();
87
- } else if (doc.webkitCancelFullScreen) {
88
- fullscreenExit = Promise.resolve(doc.webkitCancelFullScreen());
89
- } else if (doc.msExitFullscreen) {
90
- fullscreenExit = Promise.resolve(doc.msExitFullscreen());
91
- }
92
- return await fullscreenExit.then(() => !!document.fullscreenElement);
93
- };
94
- const launchImmersiveFullScreen = async (docElement) => {
95
- let fullscreenLaunch = null;
96
- if (docElement.requestFullscreen) {
97
- fullscreenLaunch = docElement.requestFullscreen();
98
- } else if (docElement.mozRequestFullScreen) {
99
- fullscreenLaunch = docElement.mozRequestFullScreen();
100
- } else if (docElement.webkitRequestFullScreen) {
101
- fullscreenLaunch = Promise.resolve(docElement.webkitRequestFullScreen());
102
- } else if (docElement.msRequestFullscreen) {
103
- fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
104
- }
105
- return await fullscreenLaunch.then(() => !!document.fullscreenElement);
106
- };
107
- const handleKeyDown = (event) => {
108
- if (event.keyCode === 27) {
109
- if (isFullscreen.value) {
110
- const targetElement = slotElement.value.querySelector("[fullscreen-target]");
111
- if (props.mode === "normal") {
112
- removeFullScreenStyle();
113
- exitNormalFullscreen(targetElement);
114
- } else {
115
- if (document.fullscreenElement) {
116
- exitImmersiveFullScreen(document);
117
- }
118
- }
119
- isFullscreen.value = false;
120
- ctx.emit("fullscreenLaunch", isFullscreen.value);
121
- }
122
- }
123
- };
124
- onMounted(() => {
125
- const btnLaunch = slotElement.value.querySelector("[fullscreen-launch]");
126
- if (btnLaunch) {
127
- btnLaunch.addEventListener("click", handleFullscreen);
128
- }
129
- document.addEventListener("fullscreenchange", onFullScreenChange);
130
- document.addEventListener("MSFullscreenChange", onFullScreenChange);
131
- document.addEventListener("webkitfullscreenchange", onFullScreenChange);
132
- document.addEventListener("keydown", handleKeyDown);
133
- });
134
- onBeforeUnmount(() => {
135
- const btnLaunch = slotElement.value.querySelector("[fullscreen-launch]");
136
- if (btnLaunch) {
137
- btnLaunch.removeEventListener("click", handleFullscreen);
138
- }
139
- document.removeEventListener("fullscreenchange", onFullScreenChange);
140
- document.removeEventListener("MSFullscreenChange", onFullScreenChange);
141
- document.removeEventListener("webkitfullscreenchange", onFullScreenChange);
142
- document.removeEventListener("keydown", handleKeyDown);
143
- });
124
+ useFullscreen(props, slotElement, ctx);
125
+ useKeydown(props, ctx);
144
126
  return () => {
145
127
  const defaultSlot = renderSlot(useSlots(), "default");
146
128
  return createVNode("div", {
@@ -149,15 +131,12 @@ var Fullscreen = defineComponent({
149
131
  };
150
132
  }
151
133
  });
152
- Fullscreen.install = function(app) {
153
- app.component(Fullscreen.name, Fullscreen);
154
- };
155
134
  var index = {
156
135
  title: "Fullscreen \u5168\u5C4F",
157
136
  category: "\u901A\u7528",
158
137
  status: "100%",
159
138
  install(app) {
160
- app.use(Fullscreen);
139
+ app.component(Fullscreen.name, Fullscreen);
161
140
  }
162
141
  };
163
- export { Fullscreen, index as default };
142
+ export { Fullscreen, index as default, fullscreenProps };
@@ -1 +1 @@
1
- (function(t,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis!="undefined"?globalThis:t||self,n(t.index={},t.Vue))})(this,function(t,n){"use strict";var E="";const y={fullscreenLaunch:{type:Function,default:void 0},mode:{type:String,default:"immersive"},zIndex:{type:Number,default:10}};var c=n.defineComponent({name:"DFullscreen",props:y,emits:["fullscreenLaunch"],setup(u,o){let i=null;const s=n.ref(!1),a=n.ref(null),r=()=>{if(i){const e=i;document.fullscreenElement?(F(),d(e)):(m(),i=null,f(e)),s.value=!!document.fullscreenElement,o.emit("fullscreenLaunch",s.value)}},d=e=>{e.classList.add("fullscreen"),u.zIndex&&e.setAttribute("style",`z-index: ${u.zIndex}`)},f=e=>{e.classList.remove("fullscreen"),e.style.zIndex=null},v=async()=>{const e=a.value.querySelector("[fullscreen-target]");let l=!1;u.mode==="normal"?e.classList.contains("fullscreen")?(m(),f(e),l=!1):(F(),d(e),l=!0):(i=e,document.fullscreenElement||document.msFullscreenElement||document.webkitFullscreenElement?l=await h(document):l=await g(i)),s.value=l,o.emit("fullscreenLaunch",s.value)},F=()=>{document.getElementsByTagName("html")[0].classList.add("devui-fullscreen")},m=()=>{document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen")},h=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await l.then(()=>!!document.fullscreenElement)},g=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await l.then(()=>!!document.fullscreenElement)},S=e=>{if(e.keyCode===27&&s.value){const l=a.value.querySelector("[fullscreen-target]");u.mode==="normal"?(m(),f(l)):document.fullscreenElement&&h(document),s.value=!1,o.emit("fullscreenLaunch",s.value)}};return n.onMounted(()=>{const e=a.value.querySelector("[fullscreen-launch]");e&&e.addEventListener("click",v),document.addEventListener("fullscreenchange",r),document.addEventListener("MSFullscreenChange",r),document.addEventListener("webkitfullscreenchange",r),document.addEventListener("keydown",S)}),n.onBeforeUnmount(()=>{const e=a.value.querySelector("[fullscreen-launch]");e&&e.removeEventListener("click",v),document.removeEventListener("fullscreenchange",r),document.removeEventListener("MSFullscreenChange",r),document.removeEventListener("webkitfullscreenchange",r),document.removeEventListener("keydown",S)}),()=>{const e=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:a},[e])}}});c.install=function(u){u.component(c.name,c)};var L={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(u){u.use(c)}};t.Fullscreen=c,t.default=L,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
1
+ (function(t,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis!="undefined"?globalThis:t||self,n(t.index={},t.Vue))})(this,function(t,n){"use strict";const a={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},m=27;function f(e,l){const{modelValue:s}=n.toRefs(e),u=o=>{o.keyCode===m&&s&&l.emit("update:modelValue",!1)};n.onMounted(()=>{document.addEventListener("keydown",u)}),n.onUnmounted(()=>{document.removeEventListener("keydown",u)})}const F=(e,l)=>{e.classList.add("devui-fullscreen"),l.zIndex&&e.setAttribute("style",`z-index: ${l.zIndex}`)},y=e=>{e.classList.remove("devui-fullscreen"),e.style.zIndex=""},v=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},S=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},h=()=>{document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html")},p=()=>{document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html")};function w(e,l,s){const{modelValue:u,mode:o}=n.toRefs(e);let c=!1;const C=r=>{r?(F(l.value,e),h()):(y(l.value),p())},q=r=>{r?v(l.value):c||S(document)};n.watch(u,r=>{o.value==="normal"&&C(r),o.value==="immersive"&&q(r)});const d=()=>{document.fullscreenElement?c=!1:(s.emit("update:modelValue"),c=!0)};n.onMounted(()=>{document.addEventListener("fullscreenchange",d)}),n.onUnmounted(()=>{document.removeEventListener("fullscreenchange",d)})}var z="",i=n.defineComponent({name:"DFullscreen",props:a,emits:["update:modelValue"],setup(e,l){const s=n.ref(null);return w(e,s,l),f(e,l),()=>{const u=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:s},[u])}}}),x={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.component(i.name,i)}};t.Fullscreen=i,t.default=x,t.fullscreenProps=a,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
@@ -1 +1 @@
1
- .fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}.devui-fullscreen{overflow:hidden}:not(:root):fullscreen::backdrop{background:#ffffff}
1
+ .devui-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}.devui-fullscreen-html{overflow:hidden}:not(:root):fullscreen::backdrop{background:var(--devui-base-bg, #ffffff)}
package/gantt/index.es.js CHANGED
@@ -1,23 +1,11 @@
1
1
  import { defineComponent, toRefs, ref, onMounted, watch, createVNode, withDirectives, resolveComponent, resolveDirective, createTextVNode } from "vue";
2
2
  var ganttScale = "";
3
- var GanttScaleUnit;
4
- (function(GanttScaleUnit2) {
3
+ var GanttScaleUnit = /* @__PURE__ */ ((GanttScaleUnit2) => {
5
4
  GanttScaleUnit2["day"] = "day";
6
5
  GanttScaleUnit2["week"] = "week";
7
6
  GanttScaleUnit2["month"] = "month";
8
- })(GanttScaleUnit || (GanttScaleUnit = {}));
9
- var GanttMarkerType;
10
- (function(GanttMarkerType2) {
11
- GanttMarkerType2["milestone"] = "milestone";
12
- GanttMarkerType2["month"] = "month";
13
- GanttMarkerType2["week"] = "week";
14
- })(GanttMarkerType || (GanttMarkerType = {}));
15
- var UnitRole;
16
- (function(UnitRole2) {
17
- UnitRole2[UnitRole2["day"] = 10] = "day";
18
- UnitRole2[UnitRole2["week"] = 20] = "week";
19
- UnitRole2[UnitRole2["month"] = 30] = "month";
20
- })(UnitRole || (UnitRole = {}));
7
+ return GanttScaleUnit2;
8
+ })(GanttScaleUnit || {});
21
9
  const isSameDate = (date, compareDate) => {
22
10
  return date.getFullYear() === compareDate.getFullYear() && date.getMonth() === compareDate.getMonth() && date.getDate() === compareDate.getDate();
23
11
  };
@@ -350,7 +338,7 @@ var GanttTools = defineComponent({
350
338
  position: isFullScreen ? "fixed" : "absolute"
351
339
  }
352
340
  }, [createVNode(resolveComponent("d-button"), {
353
- "btnStyle": "common",
341
+ "variant": "common",
354
342
  "onClick": () => actionHandle("today"),
355
343
  "class": "tool"
356
344
  }, {
@@ -363,7 +351,7 @@ var GanttTools = defineComponent({
363
351
  "options": views,
364
352
  "onValueChange": selectView
365
353
  }, null)]), createVNode(resolveComponent("d-button"), {
366
- "btnStyle": "common",
354
+ "variant": "common",
367
355
  "class": ["tool", "minus", this.currentUnitLabel === GanttScaleUnit.day ? "disabled" : ""],
368
356
  "disabled": this.currentUnitLabel === GanttScaleUnit.day,
369
357
  "onClick": () => actionHandle("reduce")
@@ -372,7 +360,7 @@ var GanttTools = defineComponent({
372
360
  "name": "minus"
373
361
  }, null)]
374
362
  }), createVNode(resolveComponent("d-button"), {
375
- "btnStyle": "common",
363
+ "variant": "common",
376
364
  "class": ["tool", "add", this.currentUnitLabel === GanttScaleUnit.month ? "disabled" : ""],
377
365
  "disabled": this.currentUnitLabel === GanttScaleUnit.month,
378
366
  "onClick": () => actionHandle("increase")
@@ -1 +1 @@
1
- (function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue))})(this,function(u,t){"use strict";var U="",h;(function(e){e.day="day",e.week="week",e.month="month"})(h||(h={}));var V;(function(e){e.milestone="milestone",e.month="month",e.week="week"})(V||(V={}));var M;(function(e){e[e.day=10]="day",e[e.week=20]="week",e[e.month=30]="month"})(M||(M={}));const p=(e,o)=>e.getFullYear()===o.getFullYear()&&e.getMonth()===o.getMonth()&&e.getDate()===o.getDate(),E=e=>{const o=7,r=(a,l)=>{const i={dayOfMonthLabel:"",dayOfWeekLabel:"",monthLabel:"",yearLabel:"",date:a,monthStart:!1,weekend:!1,today:!1,milestone:"",highlightStart:!1,scaleStartVisable:!0,index:l},n=a.getDate();i.dayOfMonthLabel=n+"",n===1&&(i.monthStart=!0);const d=a.getDay();i.dayOfWeekLabel=d+"",d===6&&(i.weekend=!0);const m=a.getMonth()+1;i.monthLabel=m+"";const D=a.getFullYear();return i.yearLabel=D+"",p(a,new Date)&&(i.today=!0),new Date(D,m-1,n+o).getMonth()>m-1&&(i.scaleStartVisable=!1),e.value&&e.value.forEach(f=>{f.date&&p(f.date,i.date)&&(i.milestone=f.lable)}),i},s=a=>{const l=a.setDate(a.getDate()+1);return new Date(l)};return{generateScaleData:(a,l)=>{const i=[];let n=a,d=0;for(;!p(n,l);){const m=r(n,d);i.push(m),n=s(new Date(n)),d++}return console.log({scaleData:i}),i}}},g={en:{today:"today",monthsOfYear:["January","February","March","April","May","June","July","August","September","October","November","December"],yearDisplay(e){return`${e}`},monthDisplay(e){return this.monthsOfYear[Number(e)-1]},yearAndMonthDisplay(e,o){return this.yearDisplay(e)+this.monthDisplay(o)}},zh:{today:"\u4ECA\u5929",monthsOfYear:["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],yearDisplay(e){return`${e}\u5E74`},monthDisplay(e){return this.monthsOfYear[Number(e)-1]},yearAndMonthDisplay(e,o){return this.yearDisplay(e)+this.monthDisplay(o)}}};var L=t.defineComponent({name:"DGanttScale",props:{unit:{type:String,default:h.day},height:{type:Number},startDate:{type:Date},endDate:{type:Date},ganttScaleContainerOffsetLeft:{type:Number},milestoneList:{type:Array},scrollElement:{type:Object},ganttBarContainerElement:{type:Object}},emits:["addMilestone"],setup(e,o){const{startDate:r,endDate:s,milestoneList:c,scrollElement:a,unit:l}=t.toRefs(e),i=t.ref([]),n=t.ref([]),d=t.ref({day:40,week:30,month:20}),m=t.ref(!1),D=t.ref(""),f=t.ref(""),{generateScaleData:x}=E(c);let w=[0,0];const A=k=>{o.emit("addMilestone",k)},S=()=>{if(a.value){const k=a.value.clientWidth,W=a.value.scrollLeft,N=Math.floor(W/d.value[l.value]),F=Math.ceil(k/d.value[l.value]);w=[N-2,N+F+2],n.value=i.value.filter(C=>C.index>=w[0]&&C.index<=w[1])}};return t.onMounted(()=>{r.value&&s.value&&(i.value=x(r.value,s.value),S())}),t.watch(()=>e.scrollElement,()=>{S(),e.scrollElement.addEventListener("scroll",()=>{S()})}),{viewSCaleData:n,scaleWidth:d,addMilestone:A,highlight:m,highlightStartText:D,highlightEndText:f}},render(){const{unit:e,viewSCaleData:o,scaleWidth:r,addMilestone:s,highlight:c,highlightStartText:a,highlightEndText:l,ganttBarContainerElement:i}=this;return t.createVNode("div",{class:"devui-gantt-scale-wrapper"},[o.map((n,d)=>t.withDirectives(t.createVNode("div",{class:`devui-gantt-scale ${e} ${n.today} ${n.milestone}`,style:{left:`${r[e]*n.index}px`,width:`${r[e]}px`}},[t.createVNode("div",{class:`devui-scale-start ${n.milestone}`},[n.milestone&&e==="day"&&t.createVNode("div",null,[n.milestone]),(!n.milestone||e!=="day")&&n.scaleStartVisable&&(d===0||n.monthStart)?e==="month"?g.zh.yearDisplay(n.yearLabel):g.zh.yearAndMonthDisplay(n.yearLabel,n.monthLabel):""]),t.createVNode("div",{class:"devui-scale-unit"},[c&&n.highlightStart&&t.createVNode("div",{class:"scale-highlight"},[t.createVNode("div",{style:"float: left"},[a]),t.createVNode("div",{style:"float: right"},[l]),t.createVNode("div",{style:"clear: both"},null)]),(!c||!n.highlightStart)&&e==="day"&&t.createVNode("div",{class:`border-left ${n.today?"today":""}`},[n.today?g.zh.today:n.dayOfMonthLabel]),(!c||!n.highlightStart)&&e==="week"&&t.createVNode("div",{class:`${n.weekend||d===0?"border-left":""}`},[d===0||n.weekend?n.dayOfMonthLabel:""]),(!c||!n.highlightStart)&&e==="month"&&t.createVNode("div",{class:`${n.monthStart||d===0?"border-left":""}`},[d===0||n.monthStart?g.zh.monthDisplay(n.monthLabel):""])]),t.createVNode("div",{class:`milestone-new ${e}`,title:"milestone",onClick:()=>s(n)},[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)])]),[[t.resolveDirective("gantt-marker"),{ganttBarContainerElement:i,monthMark:n.monthMark,weekend:n.weekend,milestone:n.milestone,today:n.today,date:n.date,unit:e,last:d===o.length-1}]]))])}}),B="",b=t.defineComponent({name:"DGanttTools",props:{unit:{type:String,default:null},isFullScreen:{type:Boolean,default:!1}},emits:["goToday","reduceUnit","increaseUnit","switchView"],setup(e,o){const r=t.ref(e.unit),s=t.ref([{name:"Day",value:"day"},{name:"Week",value:"week"},{name:"Month",value:"month"}]);return{actionHandle:l=>{switch(l){case"today":o.emit("goToday");break;case"reduce":o.emit("reduceUnit");break;case"increase":o.emit("increaseUnit");break}},currentUnitLabel:r,views:s,selectView:l=>{o.emit("switchView",l.value)}}},render(){const{isFullScreen:e,actionHandle:o,views:r,selectView:s,$slots:c}=this;return t.createVNode("div",{class:"tools-container",style:{position:e?"fixed":"absolute"}},[t.createVNode(t.resolveComponent("d-button"),{btnStyle:"common",onClick:()=>o("today"),class:"tool"},{default:()=>[t.createTextVNode("Today")]}),t.createVNode("div",{class:"tool"},[t.createVNode(t.resolveComponent("d-select"),{modelValue:this.currentUnitLabel,"onUpdate:modelValue":a=>this.currentUnitLabel=a,options:r,onValueChange:s},null)]),t.createVNode(t.resolveComponent("d-button"),{btnStyle:"common",class:["tool","minus",this.currentUnitLabel===h.day?"disabled":""],disabled:this.currentUnitLabel===h.day,onClick:()=>o("reduce")},{default:()=>[t.createVNode(t.resolveComponent("d-icon"),{name:"minus"},null)]}),t.createVNode(t.resolveComponent("d-button"),{btnStyle:"common",class:["tool","add",this.currentUnitLabel===h.month?"disabled":""],disabled:this.currentUnitLabel===h.month,onClick:()=>o("increase")},{default:()=>[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)]}),c.default&&c.default()])}});const v={startDate:{type:Date},endDate:{type:Date},unit:{type:String,default:h.day},progressRate:{type:Number}};var G="";const O=(e=h.day)=>{const o=24*60*60*1e3,r=()=>{switch(e){case h.day:return 40;case h.week:return 30;case h.month:return 20}},s=(a,l)=>{if(a&&l){const n=(l.getTime()-a.getTime())/o+1;return console.log("duration => ",n),Math.round(n)}};return{getDurationWidth:(a,l)=>{if(a&&l)return s(a,l)*r()}}};var y=t.defineComponent({name:"DGantt",components:{DGanttScale:L,DGanttTools:b},props:v,setup(e,o){const{startDate:r,endDate:s}=t.toRefs(e),c=t.ref(),a=t.ref(),{getDurationWidth:l}=O();return t.onMounted(()=>{a.value=l(r.value,s.value)}),{ganttContainer:c,ganttScaleWidth:a}},render(){const{$slots:e,startDate:o,endDate:r,unit:s,ganttContainer:c,ganttScaleWidth:a}=this;return t.createVNode("div",{style:{position:"relative"}},[t.createVNode("div",{class:"devui-gantt gantt-container",ref:"ganttContainer"},[t.createVNode("div",{class:"header",style:{width:`${a}px`}},[t.createVNode(t.resolveComponent("d-gantt-scale"),{startDate:o,endDate:r,unit:s,scrollElement:c},null)]),t.createVNode(t.resolveComponent("d-gantt-tools"),{unit:s},null),t.createVNode("div",{class:"body",style:{width:`${a}px`}},null)])])}});const T={ganttBarContainerElement:null,monthMarkElement:null,weekendElement:null,todayElement:null,milestoneElement:null,monthMark:"",mounted(e,o){const{ganttBarContainerElement:r,monthMark:s}=o.value;r&&(this.ganttBarContainerElement=r),s&&(this.monthMark=this.monthMark)},updated(e,o){const{monthMark:r,weekend:s,today:c,milestone:a,unit:l}=o.value;r&&this.initMarkElement()},initMarkElement(){this.ganttBarContainerElement&&this.monthMark&&!this.monthMarkElement}};y.install=function(e){e.component(y.name,y),e.component(b.name,b),e.directive("gantt-marker",T)};var $={title:"Gantt \u7518\u7279\u56FE",category:"\u6570\u636E\u5C55\u793A",status:"10%",install(e){e.use(y)}};u.Gantt=y,u.default=$,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
1
+ (function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";var U="",h=(t=>(t.day="day",t.week="week",t.month="month",t))(h||{});const p=(t,o)=>t.getFullYear()===o.getFullYear()&&t.getMonth()===o.getMonth()&&t.getDate()===o.getDate(),N=t=>{const r=(a,l)=>{const i={dayOfMonthLabel:"",dayOfWeekLabel:"",monthLabel:"",yearLabel:"",date:a,monthStart:!1,weekend:!1,today:!1,milestone:"",highlightStart:!1,scaleStartVisable:!0,index:l},n=a.getDate();i.dayOfMonthLabel=n+"",n===1&&(i.monthStart=!0);const d=a.getDay();i.dayOfWeekLabel=d+"",d===6&&(i.weekend=!0);const m=a.getMonth()+1;i.monthLabel=m+"";const D=a.getFullYear();return i.yearLabel=D+"",p(a,new Date)&&(i.today=!0),new Date(D,m-1,n+7).getMonth()>m-1&&(i.scaleStartVisable=!1),t.value&&t.value.forEach(f=>{f.date&&p(f.date,i.date)&&(i.milestone=f.lable)}),i},s=a=>{const l=a.setDate(a.getDate()+1);return new Date(l)};return{generateScaleData:(a,l)=>{const i=[];let n=a,d=0;for(;!p(n,l);){const m=r(n,d);i.push(m),n=s(new Date(n)),d++}return console.log({scaleData:i}),i}}},g={en:{today:"today",monthsOfYear:["January","February","March","April","May","June","July","August","September","October","November","December"],yearDisplay(t){return`${t}`},monthDisplay(t){return this.monthsOfYear[Number(t)-1]},yearAndMonthDisplay(t,o){return this.yearDisplay(t)+this.monthDisplay(o)}},zh:{today:"\u4ECA\u5929",monthsOfYear:["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],yearDisplay(t){return`${t}\u5E74`},monthDisplay(t){return this.monthsOfYear[Number(t)-1]},yearAndMonthDisplay(t,o){return this.yearDisplay(t)+this.monthDisplay(o)}}};var C=e.defineComponent({name:"DGanttScale",props:{unit:{type:String,default:h.day},height:{type:Number},startDate:{type:Date},endDate:{type:Date},ganttScaleContainerOffsetLeft:{type:Number},milestoneList:{type:Array},scrollElement:{type:Object},ganttBarContainerElement:{type:Object}},emits:["addMilestone"],setup(t,o){const{startDate:r,endDate:s,milestoneList:c,scrollElement:a,unit:l}=e.toRefs(t),i=e.ref([]),n=e.ref([]),d=e.ref({day:40,week:30,month:20}),m=e.ref(!1),D=e.ref(""),f=e.ref(""),{generateScaleData:O}=N(c);let S=[0,0];const A=w=>{o.emit("addMilestone",w)},V=()=>{if(a.value){const w=a.value.clientWidth,$=a.value.scrollLeft,k=Math.floor($/d.value[l.value]),x=Math.ceil(w/d.value[l.value]);S=[k-2,k+x+2],n.value=i.value.filter(M=>M.index>=S[0]&&M.index<=S[1])}};return e.onMounted(()=>{r.value&&s.value&&(i.value=O(r.value,s.value),V())}),e.watch(()=>t.scrollElement,()=>{V(),t.scrollElement.addEventListener("scroll",()=>{V()})}),{viewSCaleData:n,scaleWidth:d,addMilestone:A,highlight:m,highlightStartText:D,highlightEndText:f}},render(){const{unit:t,viewSCaleData:o,scaleWidth:r,addMilestone:s,highlight:c,highlightStartText:a,highlightEndText:l,ganttBarContainerElement:i}=this;return e.createVNode("div",{class:"devui-gantt-scale-wrapper"},[o.map((n,d)=>e.withDirectives(e.createVNode("div",{class:`devui-gantt-scale ${t} ${n.today} ${n.milestone}`,style:{left:`${r[t]*n.index}px`,width:`${r[t]}px`}},[e.createVNode("div",{class:`devui-scale-start ${n.milestone}`},[n.milestone&&t==="day"&&e.createVNode("div",null,[n.milestone]),(!n.milestone||t!=="day")&&n.scaleStartVisable&&(d===0||n.monthStart)?t==="month"?g.zh.yearDisplay(n.yearLabel):g.zh.yearAndMonthDisplay(n.yearLabel,n.monthLabel):""]),e.createVNode("div",{class:"devui-scale-unit"},[c&&n.highlightStart&&e.createVNode("div",{class:"scale-highlight"},[e.createVNode("div",{style:"float: left"},[a]),e.createVNode("div",{style:"float: right"},[l]),e.createVNode("div",{style:"clear: both"},null)]),(!c||!n.highlightStart)&&t==="day"&&e.createVNode("div",{class:`border-left ${n.today?"today":""}`},[n.today?g.zh.today:n.dayOfMonthLabel]),(!c||!n.highlightStart)&&t==="week"&&e.createVNode("div",{class:`${n.weekend||d===0?"border-left":""}`},[d===0||n.weekend?n.dayOfMonthLabel:""]),(!c||!n.highlightStart)&&t==="month"&&e.createVNode("div",{class:`${n.monthStart||d===0?"border-left":""}`},[d===0||n.monthStart?g.zh.monthDisplay(n.monthLabel):""])]),e.createVNode("div",{class:`milestone-new ${t}`,title:"milestone",onClick:()=>s(n)},[e.createVNode(e.resolveComponent("d-icon"),{name:"add"},null)])]),[[e.resolveDirective("gantt-marker"),{ganttBarContainerElement:i,monthMark:n.monthMark,weekend:n.weekend,milestone:n.milestone,today:n.today,date:n.date,unit:t,last:d===o.length-1}]]))])}}),W="",b=e.defineComponent({name:"DGanttTools",props:{unit:{type:String,default:null},isFullScreen:{type:Boolean,default:!1}},emits:["goToday","reduceUnit","increaseUnit","switchView"],setup(t,o){const r=e.ref(t.unit),s=e.ref([{name:"Day",value:"day"},{name:"Week",value:"week"},{name:"Month",value:"month"}]);return{actionHandle:l=>{switch(l){case"today":o.emit("goToday");break;case"reduce":o.emit("reduceUnit");break;case"increase":o.emit("increaseUnit");break}},currentUnitLabel:r,views:s,selectView:l=>{o.emit("switchView",l.value)}}},render(){const{isFullScreen:t,actionHandle:o,views:r,selectView:s,$slots:c}=this;return e.createVNode("div",{class:"tools-container",style:{position:t?"fixed":"absolute"}},[e.createVNode(e.resolveComponent("d-button"),{variant:"common",onClick:()=>o("today"),class:"tool"},{default:()=>[e.createTextVNode("Today")]}),e.createVNode("div",{class:"tool"},[e.createVNode(e.resolveComponent("d-select"),{modelValue:this.currentUnitLabel,"onUpdate:modelValue":a=>this.currentUnitLabel=a,options:r,onValueChange:s},null)]),e.createVNode(e.resolveComponent("d-button"),{variant:"common",class:["tool","minus",this.currentUnitLabel===h.day?"disabled":""],disabled:this.currentUnitLabel===h.day,onClick:()=>o("reduce")},{default:()=>[e.createVNode(e.resolveComponent("d-icon"),{name:"minus"},null)]}),e.createVNode(e.resolveComponent("d-button"),{variant:"common",class:["tool","add",this.currentUnitLabel===h.month?"disabled":""],disabled:this.currentUnitLabel===h.month,onClick:()=>o("increase")},{default:()=>[e.createVNode(e.resolveComponent("d-icon"),{name:"add"},null)]}),c.default&&c.default()])}});const E={startDate:{type:Date},endDate:{type:Date},unit:{type:String,default:h.day},progressRate:{type:Number}};var F="";const L=(t=h.day)=>{const r=()=>{switch(t){case h.day:return 40;case h.week:return 30;case h.month:return 20}},s=(a,l)=>{if(a&&l){const n=(l.getTime()-a.getTime())/864e5+1;return console.log("duration => ",n),Math.round(n)}};return{getDurationWidth:(a,l)=>{if(a&&l)return s(a,l)*r()}}};var y=e.defineComponent({name:"DGantt",components:{DGanttScale:C,DGanttTools:b},props:E,setup(t,o){const{startDate:r,endDate:s}=e.toRefs(t),c=e.ref(),a=e.ref(),{getDurationWidth:l}=L();return e.onMounted(()=>{a.value=l(r.value,s.value)}),{ganttContainer:c,ganttScaleWidth:a}},render(){const{$slots:t,startDate:o,endDate:r,unit:s,ganttContainer:c,ganttScaleWidth:a}=this;return e.createVNode("div",{style:{position:"relative"}},[e.createVNode("div",{class:"devui-gantt gantt-container",ref:"ganttContainer"},[e.createVNode("div",{class:"header",style:{width:`${a}px`}},[e.createVNode(e.resolveComponent("d-gantt-scale"),{startDate:o,endDate:r,unit:s,scrollElement:c},null)]),e.createVNode(e.resolveComponent("d-gantt-tools"),{unit:s},null),e.createVNode("div",{class:"body",style:{width:`${a}px`}},null)])])}});const v={ganttBarContainerElement:null,monthMarkElement:null,weekendElement:null,todayElement:null,milestoneElement:null,monthMark:"",mounted(t,o){const{ganttBarContainerElement:r,monthMark:s}=o.value;r&&(this.ganttBarContainerElement=r),s&&(this.monthMark=this.monthMark)},updated(t,o){const{monthMark:r,weekend:s,today:c,milestone:a,unit:l}=o.value;r&&this.initMarkElement()},initMarkElement(){this.ganttBarContainerElement&&this.monthMark&&!this.monthMarkElement}};y.install=function(t){t.component(y.name,y),t.component(b.name,b),t.directive("gantt-marker",v)};var T={title:"Gantt \u7518\u7279\u56FE",category:"\u6570\u636E\u5C55\u793A",status:"10%",install(t){t.use(y)}};u.Gantt=y,u.default=T,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
package/gantt/style.css CHANGED
@@ -1 +1 @@
1
- .devui-gantt-scale-wrapper{display:block;height:36px;line-height:18px}.devui-gantt-scale{display:inline-block;color:var(--devui-placeholder, #8a8e99);text-align:center;position:absolute;height:36px;font-weight:normal}.devui-gantt-scale.day:not(.milestone):hover .devui-scale-start{display:none}.devui-gantt-scale.day.milestone{background-image:linear-gradient(180deg,rgba(254,204,85,0) 0%,rgba(62,204,166,.1) 100%)}.devui-gantt-scale .devui-scale-start{width:100%;height:18px;position:absolute;left:1px;white-space:nowrap}.devui-gantt-scale .devui-scale-start.milestone{color:var(--devui-success, #50d4ab)}.devui-gantt-scale .devui-scale-unit{height:18px;position:absolute;top:18px;width:100%}.devui-gantt-scale .devui-scale-unit .border-left{height:18px;border-left:1px solid var(--devui-list-item-selected-bg, #e9edfa)}.devui-gantt-scale .devui-scale-unit .scale-highlight{position:absolute;height:18px;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-brand, #5e7ce0);padding:0 4px}.devui-gantt-scale .devui-scale-unit .scale-highlight div{color:var(--devui-base-bg, #ffffff);font-size:var(--devui-font-size, 12px);font-weight:normal}.devui-gantt-scale .devui-scale-unit .today{background:rgba(255,121,14,.2);border-radius:var(--devui-border-radius, 2px);height:16px}.devui-gantt-scale .milestone-new{display:none;position:absolute;width:18px;height:18px;margin-left:16px;border:1px solid var(--devui-list-item-selected-bg, #e9edfa);cursor:pointer}.devui-gantt-scale .milestone-new div{line-height:16px}.devui-gantt-scale:not(.milestone):hover .milestone-new.day{display:block}.devui-mark-line{position:absolute;top:0;bottom:0;width:2px;z-index:1;background:var(--devui-line, #adb0b8);opacity:.5}.devui-mark-line.today{opacity:.2;background:#ff790e}.devui-mark-line.today.day{margin-left:24px}.devui-mark-line.today.week{margin-left:9px}.devui-mark-line.today.month{margin-left:4px}.devui-mark-line.milestone{opacity:.2;background:var(--devui-success, #50d4ab)}.devui-mark-line.milestone.day{margin-left:24px}.devui-mark-line.milestone.week{margin-left:9px}.devui-mark-line.milestone.month{margin-left:4px}.devui-mark-stripe{position:absolute;top:0;bottom:0;z-index:1;background:linear-gradient(45deg,rgba(202,207,216,.2) 0,rgba(202,207,216,.2) 10%,transparent 10%,transparent 50%,rgba(202,207,216,.2) 50%,rgba(202,207,216,.2) 60%,transparent 60%,transparent);background-size:6px 6px}.devui-mark-stripe.day{width:100px}.devui-mark-stripe.week{width:40px}.devui-mark-stripe.month{width:20px}.tools-container{position:absolute;top:70px;right:20px;z-index:10}.tools-container .devui-dropdown-origin{border:0}.tools-container .devui-dropdown-origin:hover{color:var(--devui-link, #526ecc)!important}.tools-container .devui-btn{height:32px!important;color:var(--devui-text, #252b3a)!important;padding:0 8px!important;min-width:50px}.tools-container .devui-btn:hover{color:var(--devui-link, #526ecc)!important}.tools-container .tool.minus .devui-btn,.tools-container .tool.add .devui-btn{min-width:30px}.tools-container .devui-select-selection{width:90px}.tools-container .devui-select-selection .devui-select-input{height:32px}.tool.disabled{opacity:.5}.tool .switch-view{padding:0 8px}.tool .switch-view:hover{color:var(--devui-link, #526ecc)!important}.devui-dropdown-menu{top:10px!important;left:-6px!important}.gantt-container{overflow:scroll}.gantt-container .header{position:relative;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.gantt-container .body{position:relative;min-height:400px;height:100%}.gantt-container .body .item{height:40px;padding-top:8px}.tool{display:inline-flex;align-items:center;justify-content:center;height:32px;margin-left:12px;background-color:var(--devui-base-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) #5170ff66;cursor:pointer}.tool span{border:0!important}
1
+ .devui-gantt-scale-wrapper{display:block;height:36px;line-height:18px}.devui-gantt-scale{display:inline-block;color:var(--devui-placeholder, #8a8e99);text-align:center;position:absolute;height:36px;font-weight:400}.devui-gantt-scale.day:not(.milestone):hover .devui-scale-start{display:none}.devui-gantt-scale.day.milestone{background-image:linear-gradient(180deg,rgba(254,204,85,0) 0%,rgba(62,204,166,.1) 100%)}.devui-gantt-scale .devui-scale-start{width:100%;height:18px;position:absolute;left:1px;white-space:nowrap}.devui-gantt-scale .devui-scale-start.milestone{color:var(--devui-success, #50d4ab)}.devui-gantt-scale .devui-scale-unit{height:18px;position:absolute;top:18px;width:100%}.devui-gantt-scale .devui-scale-unit .border-left{height:18px;border-left:1px solid var(--devui-list-item-selected-bg, #e9edfa)}.devui-gantt-scale .devui-scale-unit .scale-highlight{position:absolute;height:18px;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-brand, #5e7ce0);padding:0 4px}.devui-gantt-scale .devui-scale-unit .scale-highlight div{color:var(--devui-base-bg, #ffffff);font-size:var(--devui-font-size, 12px);font-weight:400}.devui-gantt-scale .devui-scale-unit .today{background:rgba(255,121,14,.2);border-radius:var(--devui-border-radius, 2px);height:16px}.devui-gantt-scale .milestone-new{display:none;position:absolute;width:18px;height:18px;margin-left:16px;border:1px solid var(--devui-list-item-selected-bg, #e9edfa);cursor:pointer}.devui-gantt-scale .milestone-new div{line-height:16px}.devui-gantt-scale:not(.milestone):hover .milestone-new.day{display:block}.devui-mark-line{position:absolute;top:0;bottom:0;width:2px;z-index:1;background:var(--devui-line, #adb0b8);opacity:.5}.devui-mark-line.today{opacity:.2;background:#ff790e}.devui-mark-line.today.day{margin-left:24px}.devui-mark-line.today.week{margin-left:9px}.devui-mark-line.today.month{margin-left:4px}.devui-mark-line.milestone{opacity:.2;background:var(--devui-success, #50d4ab)}.devui-mark-line.milestone.day{margin-left:24px}.devui-mark-line.milestone.week{margin-left:9px}.devui-mark-line.milestone.month{margin-left:4px}.devui-mark-stripe{position:absolute;top:0;bottom:0;z-index:1;background:linear-gradient(45deg,rgba(202,207,216,.2) 0,rgba(202,207,216,.2) 10%,transparent 10%,transparent 50%,rgba(202,207,216,.2) 50%,rgba(202,207,216,.2) 60%,transparent 60%,transparent);background-size:6px 6px}.devui-mark-stripe.day{width:100px}.devui-mark-stripe.week{width:40px}.devui-mark-stripe.month{width:20px}.tools-container{position:absolute;top:70px;right:20px;z-index:10}.tools-container .devui-dropdown-origin{border:0}.tools-container .devui-dropdown-origin:hover{color:var(--devui-link, #526ecc)!important}.tools-container .devui-btn{height:32px!important;color:var(--devui-text, #252b3a)!important;padding:0 8px!important;min-width:50px}.tools-container .devui-btn:hover{color:var(--devui-link, #526ecc)!important}.tools-container .tool.minus .devui-btn,.tools-container .tool.add .devui-btn{min-width:30px}.tools-container .devui-select-selection{width:90px}.tools-container .devui-select-selection .devui-select-input{height:32px}.tool.disabled{opacity:.5}.tool .switch-view{padding:0 8px}.tool .switch-view:hover{color:var(--devui-link, #526ecc)!important}.devui-dropdown-menu{top:10px!important;left:-6px!important}.gantt-container{overflow:scroll}.gantt-container .header{position:relative;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.gantt-container .body{position:relative;min-height:400px;height:100%}.gantt-container .body .item{height:40px;padding-top:8px}.tool{display:inline-flex;align-items:center;justify-content:center;height:32px;margin-left:12px;background-color:var(--devui-base-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) #5170ff66;cursor:pointer}.tool span{border:0!important}
package/grid/index.es.js CHANGED
@@ -102,7 +102,7 @@ const screenMedias = {
102
102
  xl: "screen and (min-width: 1200px)",
103
103
  xxl: "screen and (min-width: 1600px)"
104
104
  };
105
- const subscribers = new Map();
105
+ const subscribers = /* @__PURE__ */ new Map();
106
106
  let subUid = -1;
107
107
  const screen = {};
108
108
  const results = {};
package/grid/style.css CHANGED
@@ -1 +1 @@
1
- .devui-row{display:flex}.devui-row-wrap{flex-wrap:wrap}.devui-row-align-top{align-items:flex-start}.devui-row-align-middle{align-items:center}.devui-row-align-bottom{align-items:flex-end}.devui-row-justify-start{justify-content:flex-start}.devui-row-justify-center{justify-content:center}.devui-row-justify-end{justify-content:flex-end}.devui-row-justify-around{justify-content:space-around}.devui-row-justify-between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col-span-0{display:none}.devui-col-offset-1{margin-left:4.1666666667%}.devui-col-pull-1{right:4.1666666667%}.devui-col-push-1{left:4.1666666667%}.devui-col-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xs-offset-1{margin-left:4.1666666667%}.devui-col-xs-pull-1{right:4.1666666667%}.devui-col-xs-push-1{left:4.1666666667%}.devui-col-xs-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-offset-2{margin-left:8.3333333333%}.devui-col-pull-2{right:8.3333333333%}.devui-col-push-2{left:8.3333333333%}.devui-col-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xs-offset-2{margin-left:8.3333333333%}.devui-col-xs-pull-2{right:8.3333333333%}.devui-col-xs-push-2{left:8.3333333333%}.devui-col-xs-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-offset-3{margin-left:12.5%}.devui-col-pull-3{right:12.5%}.devui-col-push-3{left:12.5%}.devui-col-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xs-offset-3{margin-left:12.5%}.devui-col-xs-pull-3{right:12.5%}.devui-col-xs-push-3{left:12.5%}.devui-col-xs-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-offset-4{margin-left:16.6666666667%}.devui-col-pull-4{right:16.6666666667%}.devui-col-push-4{left:16.6666666667%}.devui-col-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xs-offset-4{margin-left:16.6666666667%}.devui-col-xs-pull-4{right:16.6666666667%}.devui-col-xs-push-4{left:16.6666666667%}.devui-col-xs-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-offset-5{margin-left:20.8333333333%}.devui-col-pull-5{right:20.8333333333%}.devui-col-push-5{left:20.8333333333%}.devui-col-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xs-offset-5{margin-left:20.8333333333%}.devui-col-xs-pull-5{right:20.8333333333%}.devui-col-xs-push-5{left:20.8333333333%}.devui-col-xs-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-offset-6{margin-left:25%}.devui-col-pull-6{right:25%}.devui-col-push-6{left:25%}.devui-col-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xs-offset-6{margin-left:25%}.devui-col-xs-pull-6{right:25%}.devui-col-xs-push-6{left:25%}.devui-col-xs-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-offset-7{margin-left:29.1666666667%}.devui-col-pull-7{right:29.1666666667%}.devui-col-push-7{left:29.1666666667%}.devui-col-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xs-offset-7{margin-left:29.1666666667%}.devui-col-xs-pull-7{right:29.1666666667%}.devui-col-xs-push-7{left:29.1666666667%}.devui-col-xs-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-offset-8{margin-left:33.3333333333%}.devui-col-pull-8{right:33.3333333333%}.devui-col-push-8{left:33.3333333333%}.devui-col-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xs-offset-8{margin-left:33.3333333333%}.devui-col-xs-pull-8{right:33.3333333333%}.devui-col-xs-push-8{left:33.3333333333%}.devui-col-xs-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-offset-9{margin-left:37.5%}.devui-col-pull-9{right:37.5%}.devui-col-push-9{left:37.5%}.devui-col-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xs-offset-9{margin-left:37.5%}.devui-col-xs-pull-9{right:37.5%}.devui-col-xs-push-9{left:37.5%}.devui-col-xs-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-offset-10{margin-left:41.6666666667%}.devui-col-pull-10{right:41.6666666667%}.devui-col-push-10{left:41.6666666667%}.devui-col-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xs-offset-10{margin-left:41.6666666667%}.devui-col-xs-pull-10{right:41.6666666667%}.devui-col-xs-push-10{left:41.6666666667%}.devui-col-xs-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-offset-11{margin-left:45.8333333333%}.devui-col-pull-11{right:45.8333333333%}.devui-col-push-11{left:45.8333333333%}.devui-col-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xs-offset-11{margin-left:45.8333333333%}.devui-col-xs-pull-11{right:45.8333333333%}.devui-col-xs-push-11{left:45.8333333333%}.devui-col-xs-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-offset-12{margin-left:50%}.devui-col-pull-12{right:50%}.devui-col-push-12{left:50%}.devui-col-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xs-offset-12{margin-left:50%}.devui-col-xs-pull-12{right:50%}.devui-col-xs-push-12{left:50%}.devui-col-xs-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-offset-13{margin-left:54.1666666667%}.devui-col-pull-13{right:54.1666666667%}.devui-col-push-13{left:54.1666666667%}.devui-col-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xs-offset-13{margin-left:54.1666666667%}.devui-col-xs-pull-13{right:54.1666666667%}.devui-col-xs-push-13{left:54.1666666667%}.devui-col-xs-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-offset-14{margin-left:58.3333333333%}.devui-col-pull-14{right:58.3333333333%}.devui-col-push-14{left:58.3333333333%}.devui-col-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xs-offset-14{margin-left:58.3333333333%}.devui-col-xs-pull-14{right:58.3333333333%}.devui-col-xs-push-14{left:58.3333333333%}.devui-col-xs-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-offset-15{margin-left:62.5%}.devui-col-pull-15{right:62.5%}.devui-col-push-15{left:62.5%}.devui-col-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xs-offset-15{margin-left:62.5%}.devui-col-xs-pull-15{right:62.5%}.devui-col-xs-push-15{left:62.5%}.devui-col-xs-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-offset-16{margin-left:66.6666666667%}.devui-col-pull-16{right:66.6666666667%}.devui-col-push-16{left:66.6666666667%}.devui-col-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xs-offset-16{margin-left:66.6666666667%}.devui-col-xs-pull-16{right:66.6666666667%}.devui-col-xs-push-16{left:66.6666666667%}.devui-col-xs-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-offset-17{margin-left:70.8333333333%}.devui-col-pull-17{right:70.8333333333%}.devui-col-push-17{left:70.8333333333%}.devui-col-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xs-offset-17{margin-left:70.8333333333%}.devui-col-xs-pull-17{right:70.8333333333%}.devui-col-xs-push-17{left:70.8333333333%}.devui-col-xs-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-offset-18{margin-left:75%}.devui-col-pull-18{right:75%}.devui-col-push-18{left:75%}.devui-col-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xs-offset-18{margin-left:75%}.devui-col-xs-pull-18{right:75%}.devui-col-xs-push-18{left:75%}.devui-col-xs-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-offset-19{margin-left:79.1666666667%}.devui-col-pull-19{right:79.1666666667%}.devui-col-push-19{left:79.1666666667%}.devui-col-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xs-offset-19{margin-left:79.1666666667%}.devui-col-xs-pull-19{right:79.1666666667%}.devui-col-xs-push-19{left:79.1666666667%}.devui-col-xs-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-offset-20{margin-left:83.3333333333%}.devui-col-pull-20{right:83.3333333333%}.devui-col-push-20{left:83.3333333333%}.devui-col-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xs-offset-20{margin-left:83.3333333333%}.devui-col-xs-pull-20{right:83.3333333333%}.devui-col-xs-push-20{left:83.3333333333%}.devui-col-xs-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-offset-21{margin-left:87.5%}.devui-col-pull-21{right:87.5%}.devui-col-push-21{left:87.5%}.devui-col-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xs-offset-21{margin-left:87.5%}.devui-col-xs-pull-21{right:87.5%}.devui-col-xs-push-21{left:87.5%}.devui-col-xs-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-offset-22{margin-left:91.6666666667%}.devui-col-pull-22{right:91.6666666667%}.devui-col-push-22{left:91.6666666667%}.devui-col-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xs-offset-22{margin-left:91.6666666667%}.devui-col-xs-pull-22{right:91.6666666667%}.devui-col-xs-push-22{left:91.6666666667%}.devui-col-xs-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-offset-23{margin-left:95.8333333333%}.devui-col-pull-23{right:95.8333333333%}.devui-col-push-23{left:95.8333333333%}.devui-col-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xs-offset-23{margin-left:95.8333333333%}.devui-col-xs-pull-23{right:95.8333333333%}.devui-col-xs-push-23{left:95.8333333333%}.devui-col-xs-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}@media screen and (min-width: 576px){.devui-col-sm-offset-1{margin-left:4.1666666667%}.devui-col-sm-pull-1{right:4.1666666667%}.devui-col-sm-push-1{left:4.1666666667%}.devui-col-sm-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-sm-offset-2{margin-left:8.3333333333%}.devui-col-sm-pull-2{right:8.3333333333%}.devui-col-sm-push-2{left:8.3333333333%}.devui-col-sm-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-sm-offset-3{margin-left:12.5%}.devui-col-sm-pull-3{right:12.5%}.devui-col-sm-push-3{left:12.5%}.devui-col-sm-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-sm-offset-4{margin-left:16.6666666667%}.devui-col-sm-pull-4{right:16.6666666667%}.devui-col-sm-push-4{left:16.6666666667%}.devui-col-sm-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-sm-offset-5{margin-left:20.8333333333%}.devui-col-sm-pull-5{right:20.8333333333%}.devui-col-sm-push-5{left:20.8333333333%}.devui-col-sm-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-sm-offset-6{margin-left:25%}.devui-col-sm-pull-6{right:25%}.devui-col-sm-push-6{left:25%}.devui-col-sm-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-sm-offset-7{margin-left:29.1666666667%}.devui-col-sm-pull-7{right:29.1666666667%}.devui-col-sm-push-7{left:29.1666666667%}.devui-col-sm-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-sm-offset-8{margin-left:33.3333333333%}.devui-col-sm-pull-8{right:33.3333333333%}.devui-col-sm-push-8{left:33.3333333333%}.devui-col-sm-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-sm-offset-9{margin-left:37.5%}.devui-col-sm-pull-9{right:37.5%}.devui-col-sm-push-9{left:37.5%}.devui-col-sm-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-sm-offset-10{margin-left:41.6666666667%}.devui-col-sm-pull-10{right:41.6666666667%}.devui-col-sm-push-10{left:41.6666666667%}.devui-col-sm-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-sm-offset-11{margin-left:45.8333333333%}.devui-col-sm-pull-11{right:45.8333333333%}.devui-col-sm-push-11{left:45.8333333333%}.devui-col-sm-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-sm-offset-12{margin-left:50%}.devui-col-sm-pull-12{right:50%}.devui-col-sm-push-12{left:50%}.devui-col-sm-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-sm-offset-13{margin-left:54.1666666667%}.devui-col-sm-pull-13{right:54.1666666667%}.devui-col-sm-push-13{left:54.1666666667%}.devui-col-sm-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-sm-offset-14{margin-left:58.3333333333%}.devui-col-sm-pull-14{right:58.3333333333%}.devui-col-sm-push-14{left:58.3333333333%}.devui-col-sm-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-sm-offset-15{margin-left:62.5%}.devui-col-sm-pull-15{right:62.5%}.devui-col-sm-push-15{left:62.5%}.devui-col-sm-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-sm-offset-16{margin-left:66.6666666667%}.devui-col-sm-pull-16{right:66.6666666667%}.devui-col-sm-push-16{left:66.6666666667%}.devui-col-sm-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-sm-offset-17{margin-left:70.8333333333%}.devui-col-sm-pull-17{right:70.8333333333%}.devui-col-sm-push-17{left:70.8333333333%}.devui-col-sm-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-sm-offset-18{margin-left:75%}.devui-col-sm-pull-18{right:75%}.devui-col-sm-push-18{left:75%}.devui-col-sm-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-sm-offset-19{margin-left:79.1666666667%}.devui-col-sm-pull-19{right:79.1666666667%}.devui-col-sm-push-19{left:79.1666666667%}.devui-col-sm-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-sm-offset-20{margin-left:83.3333333333%}.devui-col-sm-pull-20{right:83.3333333333%}.devui-col-sm-push-20{left:83.3333333333%}.devui-col-sm-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-sm-offset-21{margin-left:87.5%}.devui-col-sm-pull-21{right:87.5%}.devui-col-sm-push-21{left:87.5%}.devui-col-sm-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-sm-offset-22{margin-left:91.6666666667%}.devui-col-sm-pull-22{right:91.6666666667%}.devui-col-sm-push-22{left:91.6666666667%}.devui-col-sm-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-sm-offset-23{margin-left:95.8333333333%}.devui-col-sm-pull-23{right:95.8333333333%}.devui-col-sm-push-23{left:95.8333333333%}.devui-col-sm-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}}@media screen and (min-width: 768px){.devui-col-md-offset-1{margin-left:4.1666666667%}.devui-col-md-pull-1{right:4.1666666667%}.devui-col-md-push-1{left:4.1666666667%}.devui-col-md-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-md-offset-2{margin-left:8.3333333333%}.devui-col-md-pull-2{right:8.3333333333%}.devui-col-md-push-2{left:8.3333333333%}.devui-col-md-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-md-offset-3{margin-left:12.5%}.devui-col-md-pull-3{right:12.5%}.devui-col-md-push-3{left:12.5%}.devui-col-md-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-md-offset-4{margin-left:16.6666666667%}.devui-col-md-pull-4{right:16.6666666667%}.devui-col-md-push-4{left:16.6666666667%}.devui-col-md-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-md-offset-5{margin-left:20.8333333333%}.devui-col-md-pull-5{right:20.8333333333%}.devui-col-md-push-5{left:20.8333333333%}.devui-col-md-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-md-offset-6{margin-left:25%}.devui-col-md-pull-6{right:25%}.devui-col-md-push-6{left:25%}.devui-col-md-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-md-offset-7{margin-left:29.1666666667%}.devui-col-md-pull-7{right:29.1666666667%}.devui-col-md-push-7{left:29.1666666667%}.devui-col-md-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-md-offset-8{margin-left:33.3333333333%}.devui-col-md-pull-8{right:33.3333333333%}.devui-col-md-push-8{left:33.3333333333%}.devui-col-md-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-md-offset-9{margin-left:37.5%}.devui-col-md-pull-9{right:37.5%}.devui-col-md-push-9{left:37.5%}.devui-col-md-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-md-offset-10{margin-left:41.6666666667%}.devui-col-md-pull-10{right:41.6666666667%}.devui-col-md-push-10{left:41.6666666667%}.devui-col-md-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-md-offset-11{margin-left:45.8333333333%}.devui-col-md-pull-11{right:45.8333333333%}.devui-col-md-push-11{left:45.8333333333%}.devui-col-md-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-md-offset-12{margin-left:50%}.devui-col-md-pull-12{right:50%}.devui-col-md-push-12{left:50%}.devui-col-md-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-md-offset-13{margin-left:54.1666666667%}.devui-col-md-pull-13{right:54.1666666667%}.devui-col-md-push-13{left:54.1666666667%}.devui-col-md-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-md-offset-14{margin-left:58.3333333333%}.devui-col-md-pull-14{right:58.3333333333%}.devui-col-md-push-14{left:58.3333333333%}.devui-col-md-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-md-offset-15{margin-left:62.5%}.devui-col-md-pull-15{right:62.5%}.devui-col-md-push-15{left:62.5%}.devui-col-md-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-md-offset-16{margin-left:66.6666666667%}.devui-col-md-pull-16{right:66.6666666667%}.devui-col-md-push-16{left:66.6666666667%}.devui-col-md-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-md-offset-17{margin-left:70.8333333333%}.devui-col-md-pull-17{right:70.8333333333%}.devui-col-md-push-17{left:70.8333333333%}.devui-col-md-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-md-offset-18{margin-left:75%}.devui-col-md-pull-18{right:75%}.devui-col-md-push-18{left:75%}.devui-col-md-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-md-offset-19{margin-left:79.1666666667%}.devui-col-md-pull-19{right:79.1666666667%}.devui-col-md-push-19{left:79.1666666667%}.devui-col-md-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-md-offset-20{margin-left:83.3333333333%}.devui-col-md-pull-20{right:83.3333333333%}.devui-col-md-push-20{left:83.3333333333%}.devui-col-md-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-md-offset-21{margin-left:87.5%}.devui-col-md-pull-21{right:87.5%}.devui-col-md-push-21{left:87.5%}.devui-col-md-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-md-offset-22{margin-left:91.6666666667%}.devui-col-md-pull-22{right:91.6666666667%}.devui-col-md-push-22{left:91.6666666667%}.devui-col-md-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-md-offset-23{margin-left:95.8333333333%}.devui-col-md-pull-23{right:95.8333333333%}.devui-col-md-push-23{left:95.8333333333%}.devui-col-md-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}}@media screen and (min-width: 992px){.devui-col-lg-offset-1{margin-left:4.1666666667%}.devui-col-lg-pull-1{right:4.1666666667%}.devui-col-lg-push-1{left:4.1666666667%}.devui-col-lg-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-lg-offset-2{margin-left:8.3333333333%}.devui-col-lg-pull-2{right:8.3333333333%}.devui-col-lg-push-2{left:8.3333333333%}.devui-col-lg-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-lg-offset-3{margin-left:12.5%}.devui-col-lg-pull-3{right:12.5%}.devui-col-lg-push-3{left:12.5%}.devui-col-lg-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-lg-offset-4{margin-left:16.6666666667%}.devui-col-lg-pull-4{right:16.6666666667%}.devui-col-lg-push-4{left:16.6666666667%}.devui-col-lg-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-lg-offset-5{margin-left:20.8333333333%}.devui-col-lg-pull-5{right:20.8333333333%}.devui-col-lg-push-5{left:20.8333333333%}.devui-col-lg-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-lg-offset-6{margin-left:25%}.devui-col-lg-pull-6{right:25%}.devui-col-lg-push-6{left:25%}.devui-col-lg-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-lg-offset-7{margin-left:29.1666666667%}.devui-col-lg-pull-7{right:29.1666666667%}.devui-col-lg-push-7{left:29.1666666667%}.devui-col-lg-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-lg-offset-8{margin-left:33.3333333333%}.devui-col-lg-pull-8{right:33.3333333333%}.devui-col-lg-push-8{left:33.3333333333%}.devui-col-lg-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-lg-offset-9{margin-left:37.5%}.devui-col-lg-pull-9{right:37.5%}.devui-col-lg-push-9{left:37.5%}.devui-col-lg-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-lg-offset-10{margin-left:41.6666666667%}.devui-col-lg-pull-10{right:41.6666666667%}.devui-col-lg-push-10{left:41.6666666667%}.devui-col-lg-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-lg-offset-11{margin-left:45.8333333333%}.devui-col-lg-pull-11{right:45.8333333333%}.devui-col-lg-push-11{left:45.8333333333%}.devui-col-lg-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-lg-offset-12{margin-left:50%}.devui-col-lg-pull-12{right:50%}.devui-col-lg-push-12{left:50%}.devui-col-lg-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-lg-offset-13{margin-left:54.1666666667%}.devui-col-lg-pull-13{right:54.1666666667%}.devui-col-lg-push-13{left:54.1666666667%}.devui-col-lg-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-lg-offset-14{margin-left:58.3333333333%}.devui-col-lg-pull-14{right:58.3333333333%}.devui-col-lg-push-14{left:58.3333333333%}.devui-col-lg-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-lg-offset-15{margin-left:62.5%}.devui-col-lg-pull-15{right:62.5%}.devui-col-lg-push-15{left:62.5%}.devui-col-lg-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-lg-offset-16{margin-left:66.6666666667%}.devui-col-lg-pull-16{right:66.6666666667%}.devui-col-lg-push-16{left:66.6666666667%}.devui-col-lg-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-lg-offset-17{margin-left:70.8333333333%}.devui-col-lg-pull-17{right:70.8333333333%}.devui-col-lg-push-17{left:70.8333333333%}.devui-col-lg-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-lg-offset-18{margin-left:75%}.devui-col-lg-pull-18{right:75%}.devui-col-lg-push-18{left:75%}.devui-col-lg-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-lg-offset-19{margin-left:79.1666666667%}.devui-col-lg-pull-19{right:79.1666666667%}.devui-col-lg-push-19{left:79.1666666667%}.devui-col-lg-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-lg-offset-20{margin-left:83.3333333333%}.devui-col-lg-pull-20{right:83.3333333333%}.devui-col-lg-push-20{left:83.3333333333%}.devui-col-lg-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-lg-offset-21{margin-left:87.5%}.devui-col-lg-pull-21{right:87.5%}.devui-col-lg-push-21{left:87.5%}.devui-col-lg-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-lg-offset-22{margin-left:91.6666666667%}.devui-col-lg-pull-22{right:91.6666666667%}.devui-col-lg-push-22{left:91.6666666667%}.devui-col-lg-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-lg-offset-23{margin-left:95.8333333333%}.devui-col-lg-pull-23{right:95.8333333333%}.devui-col-lg-push-23{left:95.8333333333%}.devui-col-lg-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}}@media screen and (min-width: 1200px){.devui-col-xl-offset-1{margin-left:4.1666666667%}.devui-col-xl-pull-1{right:4.1666666667%}.devui-col-xl-push-1{left:4.1666666667%}.devui-col-xl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xl-offset-2{margin-left:8.3333333333%}.devui-col-xl-pull-2{right:8.3333333333%}.devui-col-xl-push-2{left:8.3333333333%}.devui-col-xl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xl-offset-3{margin-left:12.5%}.devui-col-xl-pull-3{right:12.5%}.devui-col-xl-push-3{left:12.5%}.devui-col-xl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xl-offset-4{margin-left:16.6666666667%}.devui-col-xl-pull-4{right:16.6666666667%}.devui-col-xl-push-4{left:16.6666666667%}.devui-col-xl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xl-offset-5{margin-left:20.8333333333%}.devui-col-xl-pull-5{right:20.8333333333%}.devui-col-xl-push-5{left:20.8333333333%}.devui-col-xl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xl-offset-6{margin-left:25%}.devui-col-xl-pull-6{right:25%}.devui-col-xl-push-6{left:25%}.devui-col-xl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xl-offset-7{margin-left:29.1666666667%}.devui-col-xl-pull-7{right:29.1666666667%}.devui-col-xl-push-7{left:29.1666666667%}.devui-col-xl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xl-offset-8{margin-left:33.3333333333%}.devui-col-xl-pull-8{right:33.3333333333%}.devui-col-xl-push-8{left:33.3333333333%}.devui-col-xl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xl-offset-9{margin-left:37.5%}.devui-col-xl-pull-9{right:37.5%}.devui-col-xl-push-9{left:37.5%}.devui-col-xl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xl-offset-10{margin-left:41.6666666667%}.devui-col-xl-pull-10{right:41.6666666667%}.devui-col-xl-push-10{left:41.6666666667%}.devui-col-xl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xl-offset-11{margin-left:45.8333333333%}.devui-col-xl-pull-11{right:45.8333333333%}.devui-col-xl-push-11{left:45.8333333333%}.devui-col-xl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xl-offset-12{margin-left:50%}.devui-col-xl-pull-12{right:50%}.devui-col-xl-push-12{left:50%}.devui-col-xl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xl-offset-13{margin-left:54.1666666667%}.devui-col-xl-pull-13{right:54.1666666667%}.devui-col-xl-push-13{left:54.1666666667%}.devui-col-xl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xl-offset-14{margin-left:58.3333333333%}.devui-col-xl-pull-14{right:58.3333333333%}.devui-col-xl-push-14{left:58.3333333333%}.devui-col-xl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xl-offset-15{margin-left:62.5%}.devui-col-xl-pull-15{right:62.5%}.devui-col-xl-push-15{left:62.5%}.devui-col-xl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xl-offset-16{margin-left:66.6666666667%}.devui-col-xl-pull-16{right:66.6666666667%}.devui-col-xl-push-16{left:66.6666666667%}.devui-col-xl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xl-offset-17{margin-left:70.8333333333%}.devui-col-xl-pull-17{right:70.8333333333%}.devui-col-xl-push-17{left:70.8333333333%}.devui-col-xl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xl-offset-18{margin-left:75%}.devui-col-xl-pull-18{right:75%}.devui-col-xl-push-18{left:75%}.devui-col-xl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xl-offset-19{margin-left:79.1666666667%}.devui-col-xl-pull-19{right:79.1666666667%}.devui-col-xl-push-19{left:79.1666666667%}.devui-col-xl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xl-offset-20{margin-left:83.3333333333%}.devui-col-xl-pull-20{right:83.3333333333%}.devui-col-xl-push-20{left:83.3333333333%}.devui-col-xl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xl-offset-21{margin-left:87.5%}.devui-col-xl-pull-21{right:87.5%}.devui-col-xl-push-21{left:87.5%}.devui-col-xl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xl-offset-22{margin-left:91.6666666667%}.devui-col-xl-pull-22{right:91.6666666667%}.devui-col-xl-push-22{left:91.6666666667%}.devui-col-xl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xl-offset-23{margin-left:95.8333333333%}.devui-col-xl-pull-23{right:95.8333333333%}.devui-col-xl-push-23{left:95.8333333333%}.devui-col-xl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}}@media screen and (min-width: 1600px){.devui-col-xxl-offset-1{margin-left:4.1666666667%}.devui-col-xxl-pull-1{right:4.1666666667%}.devui-col-xxl-push-1{left:4.1666666667%}.devui-col-xxl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xxl-offset-2{margin-left:8.3333333333%}.devui-col-xxl-pull-2{right:8.3333333333%}.devui-col-xxl-push-2{left:8.3333333333%}.devui-col-xxl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xxl-offset-3{margin-left:12.5%}.devui-col-xxl-pull-3{right:12.5%}.devui-col-xxl-push-3{left:12.5%}.devui-col-xxl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xxl-offset-4{margin-left:16.6666666667%}.devui-col-xxl-pull-4{right:16.6666666667%}.devui-col-xxl-push-4{left:16.6666666667%}.devui-col-xxl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xxl-offset-5{margin-left:20.8333333333%}.devui-col-xxl-pull-5{right:20.8333333333%}.devui-col-xxl-push-5{left:20.8333333333%}.devui-col-xxl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xxl-offset-6{margin-left:25%}.devui-col-xxl-pull-6{right:25%}.devui-col-xxl-push-6{left:25%}.devui-col-xxl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xxl-offset-7{margin-left:29.1666666667%}.devui-col-xxl-pull-7{right:29.1666666667%}.devui-col-xxl-push-7{left:29.1666666667%}.devui-col-xxl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xxl-offset-8{margin-left:33.3333333333%}.devui-col-xxl-pull-8{right:33.3333333333%}.devui-col-xxl-push-8{left:33.3333333333%}.devui-col-xxl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xxl-offset-9{margin-left:37.5%}.devui-col-xxl-pull-9{right:37.5%}.devui-col-xxl-push-9{left:37.5%}.devui-col-xxl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xxl-offset-10{margin-left:41.6666666667%}.devui-col-xxl-pull-10{right:41.6666666667%}.devui-col-xxl-push-10{left:41.6666666667%}.devui-col-xxl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xxl-offset-11{margin-left:45.8333333333%}.devui-col-xxl-pull-11{right:45.8333333333%}.devui-col-xxl-push-11{left:45.8333333333%}.devui-col-xxl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xxl-offset-12{margin-left:50%}.devui-col-xxl-pull-12{right:50%}.devui-col-xxl-push-12{left:50%}.devui-col-xxl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xxl-offset-13{margin-left:54.1666666667%}.devui-col-xxl-pull-13{right:54.1666666667%}.devui-col-xxl-push-13{left:54.1666666667%}.devui-col-xxl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xxl-offset-14{margin-left:58.3333333333%}.devui-col-xxl-pull-14{right:58.3333333333%}.devui-col-xxl-push-14{left:58.3333333333%}.devui-col-xxl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xxl-offset-15{margin-left:62.5%}.devui-col-xxl-pull-15{right:62.5%}.devui-col-xxl-push-15{left:62.5%}.devui-col-xxl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xxl-offset-16{margin-left:66.6666666667%}.devui-col-xxl-pull-16{right:66.6666666667%}.devui-col-xxl-push-16{left:66.6666666667%}.devui-col-xxl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xxl-offset-17{margin-left:70.8333333333%}.devui-col-xxl-pull-17{right:70.8333333333%}.devui-col-xxl-push-17{left:70.8333333333%}.devui-col-xxl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xxl-offset-18{margin-left:75%}.devui-col-xxl-pull-18{right:75%}.devui-col-xxl-push-18{left:75%}.devui-col-xxl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xxl-offset-19{margin-left:79.1666666667%}.devui-col-xxl-pull-19{right:79.1666666667%}.devui-col-xxl-push-19{left:79.1666666667%}.devui-col-xxl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xxl-offset-20{margin-left:83.3333333333%}.devui-col-xxl-pull-20{right:83.3333333333%}.devui-col-xxl-push-20{left:83.3333333333%}.devui-col-xxl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xxl-offset-21{margin-left:87.5%}.devui-col-xxl-pull-21{right:87.5%}.devui-col-xxl-push-21{left:87.5%}.devui-col-xxl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xxl-offset-22{margin-left:91.6666666667%}.devui-col-xxl-pull-22{right:91.6666666667%}.devui-col-xxl-push-22{left:91.6666666667%}.devui-col-xxl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xxl-offset-23{margin-left:95.8333333333%}.devui-col-xxl-pull-23{right:95.8333333333%}.devui-col-xxl-push-23{left:95.8333333333%}.devui-col-xxl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}}
1
+ .devui-row{display:flex}.devui-row-wrap{flex-wrap:wrap}.devui-row-align-top{align-items:flex-start}.devui-row-align-middle{align-items:center}.devui-row-align-bottom{align-items:flex-end}.devui-row-justify-start{justify-content:flex-start}.devui-row-justify-center{justify-content:center}.devui-row-justify-end{justify-content:flex-end}.devui-row-justify-around{justify-content:space-around}.devui-row-justify-between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col-span-0,.devui-col-xs-span-0{display:none}.devui-col-offset-1{margin-left:4.1666666667%}.devui-col-pull-1{right:4.1666666667%}.devui-col-push-1{left:4.1666666667%}.devui-col-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xs-offset-1{margin-left:4.1666666667%}.devui-col-xs-pull-1{right:4.1666666667%}.devui-col-xs-push-1{left:4.1666666667%}.devui-col-xs-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-offset-2{margin-left:8.3333333333%}.devui-col-pull-2{right:8.3333333333%}.devui-col-push-2{left:8.3333333333%}.devui-col-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xs-offset-2{margin-left:8.3333333333%}.devui-col-xs-pull-2{right:8.3333333333%}.devui-col-xs-push-2{left:8.3333333333%}.devui-col-xs-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-offset-3{margin-left:12.5%}.devui-col-pull-3{right:12.5%}.devui-col-push-3{left:12.5%}.devui-col-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xs-offset-3{margin-left:12.5%}.devui-col-xs-pull-3{right:12.5%}.devui-col-xs-push-3{left:12.5%}.devui-col-xs-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-offset-4{margin-left:16.6666666667%}.devui-col-pull-4{right:16.6666666667%}.devui-col-push-4{left:16.6666666667%}.devui-col-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xs-offset-4{margin-left:16.6666666667%}.devui-col-xs-pull-4{right:16.6666666667%}.devui-col-xs-push-4{left:16.6666666667%}.devui-col-xs-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-offset-5{margin-left:20.8333333333%}.devui-col-pull-5{right:20.8333333333%}.devui-col-push-5{left:20.8333333333%}.devui-col-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xs-offset-5{margin-left:20.8333333333%}.devui-col-xs-pull-5{right:20.8333333333%}.devui-col-xs-push-5{left:20.8333333333%}.devui-col-xs-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-offset-6{margin-left:25%}.devui-col-pull-6{right:25%}.devui-col-push-6{left:25%}.devui-col-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xs-offset-6{margin-left:25%}.devui-col-xs-pull-6{right:25%}.devui-col-xs-push-6{left:25%}.devui-col-xs-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-offset-7{margin-left:29.1666666667%}.devui-col-pull-7{right:29.1666666667%}.devui-col-push-7{left:29.1666666667%}.devui-col-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xs-offset-7{margin-left:29.1666666667%}.devui-col-xs-pull-7{right:29.1666666667%}.devui-col-xs-push-7{left:29.1666666667%}.devui-col-xs-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-offset-8{margin-left:33.3333333333%}.devui-col-pull-8{right:33.3333333333%}.devui-col-push-8{left:33.3333333333%}.devui-col-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xs-offset-8{margin-left:33.3333333333%}.devui-col-xs-pull-8{right:33.3333333333%}.devui-col-xs-push-8{left:33.3333333333%}.devui-col-xs-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-offset-9{margin-left:37.5%}.devui-col-pull-9{right:37.5%}.devui-col-push-9{left:37.5%}.devui-col-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xs-offset-9{margin-left:37.5%}.devui-col-xs-pull-9{right:37.5%}.devui-col-xs-push-9{left:37.5%}.devui-col-xs-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-offset-10{margin-left:41.6666666667%}.devui-col-pull-10{right:41.6666666667%}.devui-col-push-10{left:41.6666666667%}.devui-col-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xs-offset-10{margin-left:41.6666666667%}.devui-col-xs-pull-10{right:41.6666666667%}.devui-col-xs-push-10{left:41.6666666667%}.devui-col-xs-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-offset-11{margin-left:45.8333333333%}.devui-col-pull-11{right:45.8333333333%}.devui-col-push-11{left:45.8333333333%}.devui-col-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xs-offset-11{margin-left:45.8333333333%}.devui-col-xs-pull-11{right:45.8333333333%}.devui-col-xs-push-11{left:45.8333333333%}.devui-col-xs-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-offset-12{margin-left:50%}.devui-col-pull-12{right:50%}.devui-col-push-12{left:50%}.devui-col-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xs-offset-12{margin-left:50%}.devui-col-xs-pull-12{right:50%}.devui-col-xs-push-12{left:50%}.devui-col-xs-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-offset-13{margin-left:54.1666666667%}.devui-col-pull-13{right:54.1666666667%}.devui-col-push-13{left:54.1666666667%}.devui-col-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xs-offset-13{margin-left:54.1666666667%}.devui-col-xs-pull-13{right:54.1666666667%}.devui-col-xs-push-13{left:54.1666666667%}.devui-col-xs-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-offset-14{margin-left:58.3333333333%}.devui-col-pull-14{right:58.3333333333%}.devui-col-push-14{left:58.3333333333%}.devui-col-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xs-offset-14{margin-left:58.3333333333%}.devui-col-xs-pull-14{right:58.3333333333%}.devui-col-xs-push-14{left:58.3333333333%}.devui-col-xs-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-offset-15{margin-left:62.5%}.devui-col-pull-15{right:62.5%}.devui-col-push-15{left:62.5%}.devui-col-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xs-offset-15{margin-left:62.5%}.devui-col-xs-pull-15{right:62.5%}.devui-col-xs-push-15{left:62.5%}.devui-col-xs-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-offset-16{margin-left:66.6666666667%}.devui-col-pull-16{right:66.6666666667%}.devui-col-push-16{left:66.6666666667%}.devui-col-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xs-offset-16{margin-left:66.6666666667%}.devui-col-xs-pull-16{right:66.6666666667%}.devui-col-xs-push-16{left:66.6666666667%}.devui-col-xs-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-offset-17{margin-left:70.8333333333%}.devui-col-pull-17{right:70.8333333333%}.devui-col-push-17{left:70.8333333333%}.devui-col-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xs-offset-17{margin-left:70.8333333333%}.devui-col-xs-pull-17{right:70.8333333333%}.devui-col-xs-push-17{left:70.8333333333%}.devui-col-xs-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-offset-18{margin-left:75%}.devui-col-pull-18{right:75%}.devui-col-push-18{left:75%}.devui-col-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xs-offset-18{margin-left:75%}.devui-col-xs-pull-18{right:75%}.devui-col-xs-push-18{left:75%}.devui-col-xs-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-offset-19{margin-left:79.1666666667%}.devui-col-pull-19{right:79.1666666667%}.devui-col-push-19{left:79.1666666667%}.devui-col-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xs-offset-19{margin-left:79.1666666667%}.devui-col-xs-pull-19{right:79.1666666667%}.devui-col-xs-push-19{left:79.1666666667%}.devui-col-xs-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-offset-20{margin-left:83.3333333333%}.devui-col-pull-20{right:83.3333333333%}.devui-col-push-20{left:83.3333333333%}.devui-col-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xs-offset-20{margin-left:83.3333333333%}.devui-col-xs-pull-20{right:83.3333333333%}.devui-col-xs-push-20{left:83.3333333333%}.devui-col-xs-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-offset-21{margin-left:87.5%}.devui-col-pull-21{right:87.5%}.devui-col-push-21{left:87.5%}.devui-col-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xs-offset-21{margin-left:87.5%}.devui-col-xs-pull-21{right:87.5%}.devui-col-xs-push-21{left:87.5%}.devui-col-xs-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-offset-22{margin-left:91.6666666667%}.devui-col-pull-22{right:91.6666666667%}.devui-col-push-22{left:91.6666666667%}.devui-col-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xs-offset-22{margin-left:91.6666666667%}.devui-col-xs-pull-22{right:91.6666666667%}.devui-col-xs-push-22{left:91.6666666667%}.devui-col-xs-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-offset-23{margin-left:95.8333333333%}.devui-col-pull-23{right:95.8333333333%}.devui-col-push-23{left:95.8333333333%}.devui-col-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xs-offset-23{margin-left:95.8333333333%}.devui-col-xs-pull-23{right:95.8333333333%}.devui-col-xs-push-23{left:95.8333333333%}.devui-col-xs-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-offset-24{margin-left:100%}.devui-col-pull-24{right:100%}.devui-col-push-24{left:100%}.devui-col-span-24{display:block;flex:0 0 100%;width:100%}.devui-col-xs-offset-24{margin-left:100%}.devui-col-xs-pull-24{right:100%}.devui-col-xs-push-24{left:100%}.devui-col-xs-span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col-sm-span-0{display:none}.devui-col-sm-offset-1{margin-left:4.1666666667%}.devui-col-sm-pull-1{right:4.1666666667%}.devui-col-sm-push-1{left:4.1666666667%}.devui-col-sm-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-sm-offset-2{margin-left:8.3333333333%}.devui-col-sm-pull-2{right:8.3333333333%}.devui-col-sm-push-2{left:8.3333333333%}.devui-col-sm-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-sm-offset-3{margin-left:12.5%}.devui-col-sm-pull-3{right:12.5%}.devui-col-sm-push-3{left:12.5%}.devui-col-sm-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-sm-offset-4{margin-left:16.6666666667%}.devui-col-sm-pull-4{right:16.6666666667%}.devui-col-sm-push-4{left:16.6666666667%}.devui-col-sm-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-sm-offset-5{margin-left:20.8333333333%}.devui-col-sm-pull-5{right:20.8333333333%}.devui-col-sm-push-5{left:20.8333333333%}.devui-col-sm-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-sm-offset-6{margin-left:25%}.devui-col-sm-pull-6{right:25%}.devui-col-sm-push-6{left:25%}.devui-col-sm-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-sm-offset-7{margin-left:29.1666666667%}.devui-col-sm-pull-7{right:29.1666666667%}.devui-col-sm-push-7{left:29.1666666667%}.devui-col-sm-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-sm-offset-8{margin-left:33.3333333333%}.devui-col-sm-pull-8{right:33.3333333333%}.devui-col-sm-push-8{left:33.3333333333%}.devui-col-sm-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-sm-offset-9{margin-left:37.5%}.devui-col-sm-pull-9{right:37.5%}.devui-col-sm-push-9{left:37.5%}.devui-col-sm-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-sm-offset-10{margin-left:41.6666666667%}.devui-col-sm-pull-10{right:41.6666666667%}.devui-col-sm-push-10{left:41.6666666667%}.devui-col-sm-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-sm-offset-11{margin-left:45.8333333333%}.devui-col-sm-pull-11{right:45.8333333333%}.devui-col-sm-push-11{left:45.8333333333%}.devui-col-sm-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-sm-offset-12{margin-left:50%}.devui-col-sm-pull-12{right:50%}.devui-col-sm-push-12{left:50%}.devui-col-sm-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-sm-offset-13{margin-left:54.1666666667%}.devui-col-sm-pull-13{right:54.1666666667%}.devui-col-sm-push-13{left:54.1666666667%}.devui-col-sm-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-sm-offset-14{margin-left:58.3333333333%}.devui-col-sm-pull-14{right:58.3333333333%}.devui-col-sm-push-14{left:58.3333333333%}.devui-col-sm-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-sm-offset-15{margin-left:62.5%}.devui-col-sm-pull-15{right:62.5%}.devui-col-sm-push-15{left:62.5%}.devui-col-sm-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-sm-offset-16{margin-left:66.6666666667%}.devui-col-sm-pull-16{right:66.6666666667%}.devui-col-sm-push-16{left:66.6666666667%}.devui-col-sm-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-sm-offset-17{margin-left:70.8333333333%}.devui-col-sm-pull-17{right:70.8333333333%}.devui-col-sm-push-17{left:70.8333333333%}.devui-col-sm-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-sm-offset-18{margin-left:75%}.devui-col-sm-pull-18{right:75%}.devui-col-sm-push-18{left:75%}.devui-col-sm-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-sm-offset-19{margin-left:79.1666666667%}.devui-col-sm-pull-19{right:79.1666666667%}.devui-col-sm-push-19{left:79.1666666667%}.devui-col-sm-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-sm-offset-20{margin-left:83.3333333333%}.devui-col-sm-pull-20{right:83.3333333333%}.devui-col-sm-push-20{left:83.3333333333%}.devui-col-sm-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-sm-offset-21{margin-left:87.5%}.devui-col-sm-pull-21{right:87.5%}.devui-col-sm-push-21{left:87.5%}.devui-col-sm-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-sm-offset-22{margin-left:91.6666666667%}.devui-col-sm-pull-22{right:91.6666666667%}.devui-col-sm-push-22{left:91.6666666667%}.devui-col-sm-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-sm-offset-23{margin-left:95.8333333333%}.devui-col-sm-pull-23{right:95.8333333333%}.devui-col-sm-push-23{left:95.8333333333%}.devui-col-sm-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-sm-offset-24{margin-left:100%}.devui-col-sm-pull-24{right:100%}.devui-col-sm-push-24{left:100%}.devui-col-sm-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col-md-span-0{display:none}.devui-col-md-offset-1{margin-left:4.1666666667%}.devui-col-md-pull-1{right:4.1666666667%}.devui-col-md-push-1{left:4.1666666667%}.devui-col-md-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-md-offset-2{margin-left:8.3333333333%}.devui-col-md-pull-2{right:8.3333333333%}.devui-col-md-push-2{left:8.3333333333%}.devui-col-md-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-md-offset-3{margin-left:12.5%}.devui-col-md-pull-3{right:12.5%}.devui-col-md-push-3{left:12.5%}.devui-col-md-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-md-offset-4{margin-left:16.6666666667%}.devui-col-md-pull-4{right:16.6666666667%}.devui-col-md-push-4{left:16.6666666667%}.devui-col-md-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-md-offset-5{margin-left:20.8333333333%}.devui-col-md-pull-5{right:20.8333333333%}.devui-col-md-push-5{left:20.8333333333%}.devui-col-md-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-md-offset-6{margin-left:25%}.devui-col-md-pull-6{right:25%}.devui-col-md-push-6{left:25%}.devui-col-md-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-md-offset-7{margin-left:29.1666666667%}.devui-col-md-pull-7{right:29.1666666667%}.devui-col-md-push-7{left:29.1666666667%}.devui-col-md-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-md-offset-8{margin-left:33.3333333333%}.devui-col-md-pull-8{right:33.3333333333%}.devui-col-md-push-8{left:33.3333333333%}.devui-col-md-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-md-offset-9{margin-left:37.5%}.devui-col-md-pull-9{right:37.5%}.devui-col-md-push-9{left:37.5%}.devui-col-md-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-md-offset-10{margin-left:41.6666666667%}.devui-col-md-pull-10{right:41.6666666667%}.devui-col-md-push-10{left:41.6666666667%}.devui-col-md-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-md-offset-11{margin-left:45.8333333333%}.devui-col-md-pull-11{right:45.8333333333%}.devui-col-md-push-11{left:45.8333333333%}.devui-col-md-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-md-offset-12{margin-left:50%}.devui-col-md-pull-12{right:50%}.devui-col-md-push-12{left:50%}.devui-col-md-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-md-offset-13{margin-left:54.1666666667%}.devui-col-md-pull-13{right:54.1666666667%}.devui-col-md-push-13{left:54.1666666667%}.devui-col-md-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-md-offset-14{margin-left:58.3333333333%}.devui-col-md-pull-14{right:58.3333333333%}.devui-col-md-push-14{left:58.3333333333%}.devui-col-md-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-md-offset-15{margin-left:62.5%}.devui-col-md-pull-15{right:62.5%}.devui-col-md-push-15{left:62.5%}.devui-col-md-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-md-offset-16{margin-left:66.6666666667%}.devui-col-md-pull-16{right:66.6666666667%}.devui-col-md-push-16{left:66.6666666667%}.devui-col-md-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-md-offset-17{margin-left:70.8333333333%}.devui-col-md-pull-17{right:70.8333333333%}.devui-col-md-push-17{left:70.8333333333%}.devui-col-md-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-md-offset-18{margin-left:75%}.devui-col-md-pull-18{right:75%}.devui-col-md-push-18{left:75%}.devui-col-md-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-md-offset-19{margin-left:79.1666666667%}.devui-col-md-pull-19{right:79.1666666667%}.devui-col-md-push-19{left:79.1666666667%}.devui-col-md-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-md-offset-20{margin-left:83.3333333333%}.devui-col-md-pull-20{right:83.3333333333%}.devui-col-md-push-20{left:83.3333333333%}.devui-col-md-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-md-offset-21{margin-left:87.5%}.devui-col-md-pull-21{right:87.5%}.devui-col-md-push-21{left:87.5%}.devui-col-md-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-md-offset-22{margin-left:91.6666666667%}.devui-col-md-pull-22{right:91.6666666667%}.devui-col-md-push-22{left:91.6666666667%}.devui-col-md-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-md-offset-23{margin-left:95.8333333333%}.devui-col-md-pull-23{right:95.8333333333%}.devui-col-md-push-23{left:95.8333333333%}.devui-col-md-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-md-offset-24{margin-left:100%}.devui-col-md-pull-24{right:100%}.devui-col-md-push-24{left:100%}.devui-col-md-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col-lg-span-0{display:none}.devui-col-lg-offset-1{margin-left:4.1666666667%}.devui-col-lg-pull-1{right:4.1666666667%}.devui-col-lg-push-1{left:4.1666666667%}.devui-col-lg-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-lg-offset-2{margin-left:8.3333333333%}.devui-col-lg-pull-2{right:8.3333333333%}.devui-col-lg-push-2{left:8.3333333333%}.devui-col-lg-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-lg-offset-3{margin-left:12.5%}.devui-col-lg-pull-3{right:12.5%}.devui-col-lg-push-3{left:12.5%}.devui-col-lg-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-lg-offset-4{margin-left:16.6666666667%}.devui-col-lg-pull-4{right:16.6666666667%}.devui-col-lg-push-4{left:16.6666666667%}.devui-col-lg-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-lg-offset-5{margin-left:20.8333333333%}.devui-col-lg-pull-5{right:20.8333333333%}.devui-col-lg-push-5{left:20.8333333333%}.devui-col-lg-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-lg-offset-6{margin-left:25%}.devui-col-lg-pull-6{right:25%}.devui-col-lg-push-6{left:25%}.devui-col-lg-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-lg-offset-7{margin-left:29.1666666667%}.devui-col-lg-pull-7{right:29.1666666667%}.devui-col-lg-push-7{left:29.1666666667%}.devui-col-lg-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-lg-offset-8{margin-left:33.3333333333%}.devui-col-lg-pull-8{right:33.3333333333%}.devui-col-lg-push-8{left:33.3333333333%}.devui-col-lg-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-lg-offset-9{margin-left:37.5%}.devui-col-lg-pull-9{right:37.5%}.devui-col-lg-push-9{left:37.5%}.devui-col-lg-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-lg-offset-10{margin-left:41.6666666667%}.devui-col-lg-pull-10{right:41.6666666667%}.devui-col-lg-push-10{left:41.6666666667%}.devui-col-lg-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-lg-offset-11{margin-left:45.8333333333%}.devui-col-lg-pull-11{right:45.8333333333%}.devui-col-lg-push-11{left:45.8333333333%}.devui-col-lg-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-lg-offset-12{margin-left:50%}.devui-col-lg-pull-12{right:50%}.devui-col-lg-push-12{left:50%}.devui-col-lg-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-lg-offset-13{margin-left:54.1666666667%}.devui-col-lg-pull-13{right:54.1666666667%}.devui-col-lg-push-13{left:54.1666666667%}.devui-col-lg-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-lg-offset-14{margin-left:58.3333333333%}.devui-col-lg-pull-14{right:58.3333333333%}.devui-col-lg-push-14{left:58.3333333333%}.devui-col-lg-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-lg-offset-15{margin-left:62.5%}.devui-col-lg-pull-15{right:62.5%}.devui-col-lg-push-15{left:62.5%}.devui-col-lg-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-lg-offset-16{margin-left:66.6666666667%}.devui-col-lg-pull-16{right:66.6666666667%}.devui-col-lg-push-16{left:66.6666666667%}.devui-col-lg-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-lg-offset-17{margin-left:70.8333333333%}.devui-col-lg-pull-17{right:70.8333333333%}.devui-col-lg-push-17{left:70.8333333333%}.devui-col-lg-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-lg-offset-18{margin-left:75%}.devui-col-lg-pull-18{right:75%}.devui-col-lg-push-18{left:75%}.devui-col-lg-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-lg-offset-19{margin-left:79.1666666667%}.devui-col-lg-pull-19{right:79.1666666667%}.devui-col-lg-push-19{left:79.1666666667%}.devui-col-lg-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-lg-offset-20{margin-left:83.3333333333%}.devui-col-lg-pull-20{right:83.3333333333%}.devui-col-lg-push-20{left:83.3333333333%}.devui-col-lg-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-lg-offset-21{margin-left:87.5%}.devui-col-lg-pull-21{right:87.5%}.devui-col-lg-push-21{left:87.5%}.devui-col-lg-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-lg-offset-22{margin-left:91.6666666667%}.devui-col-lg-pull-22{right:91.6666666667%}.devui-col-lg-push-22{left:91.6666666667%}.devui-col-lg-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-lg-offset-23{margin-left:95.8333333333%}.devui-col-lg-pull-23{right:95.8333333333%}.devui-col-lg-push-23{left:95.8333333333%}.devui-col-lg-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-lg-offset-24{margin-left:100%}.devui-col-lg-pull-24{right:100%}.devui-col-lg-push-24{left:100%}.devui-col-lg-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col-xl-span-0{display:none}.devui-col-xl-offset-1{margin-left:4.1666666667%}.devui-col-xl-pull-1{right:4.1666666667%}.devui-col-xl-push-1{left:4.1666666667%}.devui-col-xl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xl-offset-2{margin-left:8.3333333333%}.devui-col-xl-pull-2{right:8.3333333333%}.devui-col-xl-push-2{left:8.3333333333%}.devui-col-xl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xl-offset-3{margin-left:12.5%}.devui-col-xl-pull-3{right:12.5%}.devui-col-xl-push-3{left:12.5%}.devui-col-xl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xl-offset-4{margin-left:16.6666666667%}.devui-col-xl-pull-4{right:16.6666666667%}.devui-col-xl-push-4{left:16.6666666667%}.devui-col-xl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xl-offset-5{margin-left:20.8333333333%}.devui-col-xl-pull-5{right:20.8333333333%}.devui-col-xl-push-5{left:20.8333333333%}.devui-col-xl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xl-offset-6{margin-left:25%}.devui-col-xl-pull-6{right:25%}.devui-col-xl-push-6{left:25%}.devui-col-xl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xl-offset-7{margin-left:29.1666666667%}.devui-col-xl-pull-7{right:29.1666666667%}.devui-col-xl-push-7{left:29.1666666667%}.devui-col-xl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xl-offset-8{margin-left:33.3333333333%}.devui-col-xl-pull-8{right:33.3333333333%}.devui-col-xl-push-8{left:33.3333333333%}.devui-col-xl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xl-offset-9{margin-left:37.5%}.devui-col-xl-pull-9{right:37.5%}.devui-col-xl-push-9{left:37.5%}.devui-col-xl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xl-offset-10{margin-left:41.6666666667%}.devui-col-xl-pull-10{right:41.6666666667%}.devui-col-xl-push-10{left:41.6666666667%}.devui-col-xl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xl-offset-11{margin-left:45.8333333333%}.devui-col-xl-pull-11{right:45.8333333333%}.devui-col-xl-push-11{left:45.8333333333%}.devui-col-xl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xl-offset-12{margin-left:50%}.devui-col-xl-pull-12{right:50%}.devui-col-xl-push-12{left:50%}.devui-col-xl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xl-offset-13{margin-left:54.1666666667%}.devui-col-xl-pull-13{right:54.1666666667%}.devui-col-xl-push-13{left:54.1666666667%}.devui-col-xl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xl-offset-14{margin-left:58.3333333333%}.devui-col-xl-pull-14{right:58.3333333333%}.devui-col-xl-push-14{left:58.3333333333%}.devui-col-xl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xl-offset-15{margin-left:62.5%}.devui-col-xl-pull-15{right:62.5%}.devui-col-xl-push-15{left:62.5%}.devui-col-xl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xl-offset-16{margin-left:66.6666666667%}.devui-col-xl-pull-16{right:66.6666666667%}.devui-col-xl-push-16{left:66.6666666667%}.devui-col-xl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xl-offset-17{margin-left:70.8333333333%}.devui-col-xl-pull-17{right:70.8333333333%}.devui-col-xl-push-17{left:70.8333333333%}.devui-col-xl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xl-offset-18{margin-left:75%}.devui-col-xl-pull-18{right:75%}.devui-col-xl-push-18{left:75%}.devui-col-xl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xl-offset-19{margin-left:79.1666666667%}.devui-col-xl-pull-19{right:79.1666666667%}.devui-col-xl-push-19{left:79.1666666667%}.devui-col-xl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xl-offset-20{margin-left:83.3333333333%}.devui-col-xl-pull-20{right:83.3333333333%}.devui-col-xl-push-20{left:83.3333333333%}.devui-col-xl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xl-offset-21{margin-left:87.5%}.devui-col-xl-pull-21{right:87.5%}.devui-col-xl-push-21{left:87.5%}.devui-col-xl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xl-offset-22{margin-left:91.6666666667%}.devui-col-xl-pull-22{right:91.6666666667%}.devui-col-xl-push-22{left:91.6666666667%}.devui-col-xl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xl-offset-23{margin-left:95.8333333333%}.devui-col-xl-pull-23{right:95.8333333333%}.devui-col-xl-push-23{left:95.8333333333%}.devui-col-xl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xl-offset-24{margin-left:100%}.devui-col-xl-pull-24{right:100%}.devui-col-xl-push-24{left:100%}.devui-col-xl-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col-xxl-span-0{display:none}.devui-col-xxl-offset-1{margin-left:4.1666666667%}.devui-col-xxl-pull-1{right:4.1666666667%}.devui-col-xxl-push-1{left:4.1666666667%}.devui-col-xxl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xxl-offset-2{margin-left:8.3333333333%}.devui-col-xxl-pull-2{right:8.3333333333%}.devui-col-xxl-push-2{left:8.3333333333%}.devui-col-xxl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xxl-offset-3{margin-left:12.5%}.devui-col-xxl-pull-3{right:12.5%}.devui-col-xxl-push-3{left:12.5%}.devui-col-xxl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xxl-offset-4{margin-left:16.6666666667%}.devui-col-xxl-pull-4{right:16.6666666667%}.devui-col-xxl-push-4{left:16.6666666667%}.devui-col-xxl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xxl-offset-5{margin-left:20.8333333333%}.devui-col-xxl-pull-5{right:20.8333333333%}.devui-col-xxl-push-5{left:20.8333333333%}.devui-col-xxl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xxl-offset-6{margin-left:25%}.devui-col-xxl-pull-6{right:25%}.devui-col-xxl-push-6{left:25%}.devui-col-xxl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xxl-offset-7{margin-left:29.1666666667%}.devui-col-xxl-pull-7{right:29.1666666667%}.devui-col-xxl-push-7{left:29.1666666667%}.devui-col-xxl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xxl-offset-8{margin-left:33.3333333333%}.devui-col-xxl-pull-8{right:33.3333333333%}.devui-col-xxl-push-8{left:33.3333333333%}.devui-col-xxl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xxl-offset-9{margin-left:37.5%}.devui-col-xxl-pull-9{right:37.5%}.devui-col-xxl-push-9{left:37.5%}.devui-col-xxl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xxl-offset-10{margin-left:41.6666666667%}.devui-col-xxl-pull-10{right:41.6666666667%}.devui-col-xxl-push-10{left:41.6666666667%}.devui-col-xxl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xxl-offset-11{margin-left:45.8333333333%}.devui-col-xxl-pull-11{right:45.8333333333%}.devui-col-xxl-push-11{left:45.8333333333%}.devui-col-xxl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xxl-offset-12{margin-left:50%}.devui-col-xxl-pull-12{right:50%}.devui-col-xxl-push-12{left:50%}.devui-col-xxl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xxl-offset-13{margin-left:54.1666666667%}.devui-col-xxl-pull-13{right:54.1666666667%}.devui-col-xxl-push-13{left:54.1666666667%}.devui-col-xxl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xxl-offset-14{margin-left:58.3333333333%}.devui-col-xxl-pull-14{right:58.3333333333%}.devui-col-xxl-push-14{left:58.3333333333%}.devui-col-xxl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xxl-offset-15{margin-left:62.5%}.devui-col-xxl-pull-15{right:62.5%}.devui-col-xxl-push-15{left:62.5%}.devui-col-xxl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xxl-offset-16{margin-left:66.6666666667%}.devui-col-xxl-pull-16{right:66.6666666667%}.devui-col-xxl-push-16{left:66.6666666667%}.devui-col-xxl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xxl-offset-17{margin-left:70.8333333333%}.devui-col-xxl-pull-17{right:70.8333333333%}.devui-col-xxl-push-17{left:70.8333333333%}.devui-col-xxl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xxl-offset-18{margin-left:75%}.devui-col-xxl-pull-18{right:75%}.devui-col-xxl-push-18{left:75%}.devui-col-xxl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xxl-offset-19{margin-left:79.1666666667%}.devui-col-xxl-pull-19{right:79.1666666667%}.devui-col-xxl-push-19{left:79.1666666667%}.devui-col-xxl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xxl-offset-20{margin-left:83.3333333333%}.devui-col-xxl-pull-20{right:83.3333333333%}.devui-col-xxl-push-20{left:83.3333333333%}.devui-col-xxl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xxl-offset-21{margin-left:87.5%}.devui-col-xxl-pull-21{right:87.5%}.devui-col-xxl-push-21{left:87.5%}.devui-col-xxl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xxl-offset-22{margin-left:91.6666666667%}.devui-col-xxl-pull-22{right:91.6666666667%}.devui-col-xxl-push-22{left:91.6666666667%}.devui-col-xxl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xxl-offset-23{margin-left:95.8333333333%}.devui-col-xxl-pull-23{right:95.8333333333%}.devui-col-xxl-push-23{left:95.8333333333%}.devui-col-xxl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xxl-offset-24{margin-left:100%}.devui-col-xxl-pull-24{right:100%}.devui-col-xxl-push-24{left:100%}.devui-col-xxl-span-24{display:block;flex:0 0 100%;width:100%}}