stream-chat-angular 2.20.2 → 3.0.0-beta.10

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 (127) hide show
  1. package/README.md +44 -12
  2. package/assets/version.d.ts +1 -1
  3. package/bundles/stream-chat-angular.umd.js +780 -534
  4. package/bundles/stream-chat-angular.umd.js.map +1 -1
  5. package/esm2015/assets/version.js +2 -2
  6. package/esm2015/lib/attachment-list/attachment-list.component.js +27 -15
  7. package/esm2015/lib/attachment-preview-list/attachment-preview-list.component.js +28 -22
  8. package/esm2015/lib/attachment.service.js +11 -5
  9. package/esm2015/lib/avatar-placeholder/avatar-placeholder.component.js +41 -0
  10. package/esm2015/lib/channel-header/channel-header.component.js +26 -12
  11. package/esm2015/lib/channel-list/channel-list.component.js +23 -13
  12. package/esm2015/lib/channel-preview/channel-preview.component.js +3 -3
  13. package/esm2015/lib/channel.service.js +28 -35
  14. package/esm2015/lib/chat-client.service.js +5 -4
  15. package/esm2015/lib/custom-templates.service.js +139 -0
  16. package/esm2015/lib/icon-placeholder/icon-placeholder.component.js +34 -0
  17. package/esm2015/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.js +42 -0
  18. package/esm2015/lib/message/message.component.js +74 -29
  19. package/esm2015/lib/message-actions-box/message-actions-box.component.js +114 -99
  20. package/esm2015/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.js +13 -13
  21. package/esm2015/lib/message-input/message-input-config.service.js +1 -1
  22. package/esm2015/lib/message-input/message-input.component.js +56 -45
  23. package/esm2015/lib/message-input/textarea.directive.js +2 -18
  24. package/esm2015/lib/message-input/textarea.interface.js +1 -1
  25. package/esm2015/lib/message-list/message-list.component.js +32 -93
  26. package/esm2015/lib/message-preview.js +4 -17
  27. package/esm2015/lib/message-reactions/message-reactions.component.js +3 -3
  28. package/esm2015/lib/modal/modal.component.js +9 -6
  29. package/esm2015/lib/notification/notification.component.js +5 -2
  30. package/esm2015/lib/notification-list/notification-list.component.js +12 -10
  31. package/esm2015/lib/read-by.js +1 -1
  32. package/esm2015/lib/stream-avatar.module.js +5 -4
  33. package/esm2015/lib/stream-chat.module.js +13 -3
  34. package/esm2015/lib/thread/thread.component.js +19 -11
  35. package/esm2015/lib/types.js +1 -1
  36. package/esm2015/public-api.js +5 -1
  37. package/fesm2015/stream-chat-angular.js +723 -449
  38. package/fesm2015/stream-chat-angular.js.map +1 -1
  39. package/lib/attachment-list/attachment-list.component.d.ts +12 -8
  40. package/lib/attachment-preview-list/attachment-preview-list.component.d.ts +17 -7
  41. package/lib/attachment.service.d.ts +1 -1
  42. package/lib/avatar-placeholder/avatar-placeholder.component.d.ts +25 -0
  43. package/lib/channel-header/channel-header.component.d.ts +15 -12
  44. package/lib/channel-list/channel-list.component.d.ts +14 -11
  45. package/lib/channel-preview/channel-preview.component.d.ts +3 -2
  46. package/lib/channel.service.d.ts +32 -31
  47. package/lib/chat-client.service.d.ts +12 -11
  48. package/lib/custom-templates.service.d.ts +132 -0
  49. package/lib/icon-placeholder/icon-placeholder.component.d.ts +22 -0
  50. package/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.d.ts +21 -0
  51. package/lib/message/message.component.d.ts +42 -30
  52. package/lib/message-actions-box/message-actions-box.component.d.ts +22 -26
  53. package/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.d.ts +7 -11
  54. package/lib/message-input/message-input-config.service.d.ts +0 -19
  55. package/lib/message-input/message-input.component.d.ts +40 -26
  56. package/lib/message-input/textarea.directive.d.ts +3 -6
  57. package/lib/message-input/textarea.interface.d.ts +1 -4
  58. package/lib/message-list/group-styles.d.ts +1 -1
  59. package/lib/message-list/message-list.component.d.ts +10 -34
  60. package/lib/message-preview.d.ts +2 -1
  61. package/lib/message-reactions/message-reactions.component.d.ts +4 -5
  62. package/lib/modal/modal.component.d.ts +7 -3
  63. package/lib/notification/notification.component.d.ts +6 -1
  64. package/lib/notification-list/notification-list.component.d.ts +4 -2
  65. package/lib/read-by.d.ts +2 -1
  66. package/lib/stream-avatar.module.d.ts +4 -3
  67. package/lib/stream-chat.module.d.ts +6 -4
  68. package/lib/thread/thread.component.d.ts +6 -3
  69. package/lib/types.d.ts +115 -9
  70. package/package.json +2 -3
  71. package/public-api.d.ts +4 -0
  72. package/src/assets/styles/assets/EmojiOneColor.woff2 +0 -0
  73. package/src/assets/styles/assets/NotoColorEmoji-flags.woff2 +0 -0
  74. package/src/assets/styles/assets/Poweredby_100px-White_VertText.png +0 -0
  75. package/src/assets/styles/assets/str-chat__reaction-list-sprite@1x.png +0 -0
  76. package/src/assets/styles/assets/str-chat__reaction-list-sprite@2x.png +0 -0
  77. package/src/assets/styles/assets/str-chat__reaction-list-sprite@3x.png +0 -0
  78. package/src/assets/styles/css/index.css +1 -0
  79. package/src/assets/styles/css/index.css.map +1 -0
  80. package/src/assets/styles/scss/ActionsBox.scss +56 -0
  81. package/src/assets/styles/scss/Attachment.scss +227 -0
  82. package/src/assets/styles/scss/AttachmentActions.scss +44 -0
  83. package/src/assets/styles/scss/Audio.scss +112 -0
  84. package/src/assets/styles/scss/Avatar.scss +79 -0
  85. package/src/assets/styles/scss/Card.scss +100 -0
  86. package/src/assets/styles/scss/ChannelHeader.scss +284 -0
  87. package/src/assets/styles/scss/ChannelList.scss +117 -0
  88. package/src/assets/styles/scss/ChannelListMessenger.scss +9 -0
  89. package/src/assets/styles/scss/ChannelPreview.scss +108 -0
  90. package/src/assets/styles/scss/ChannelSearch.scss +111 -0
  91. package/src/assets/styles/scss/ChatDown.scss +15 -0
  92. package/src/assets/styles/scss/DateSeparator.scss +51 -0
  93. package/src/assets/styles/scss/EditMessageForm.scss +112 -0
  94. package/src/assets/styles/scss/EventComponent.scss +48 -0
  95. package/src/assets/styles/scss/Gallery.scss +135 -0
  96. package/src/assets/styles/scss/InfiniteScrollPaginator.scss +6 -0
  97. package/src/assets/styles/scss/LoadMoreButton.scss +44 -0
  98. package/src/assets/styles/scss/LoadingChannels.scss +70 -0
  99. package/src/assets/styles/scss/LoadingIndicator.scss +38 -0
  100. package/src/assets/styles/scss/Message.scss +1261 -0
  101. package/src/assets/styles/scss/MessageActions.scss +112 -0
  102. package/src/assets/styles/scss/MessageCommerce.scss +564 -0
  103. package/src/assets/styles/scss/MessageInput.scss +385 -0
  104. package/src/assets/styles/scss/MessageInputFlat.scss +305 -0
  105. package/src/assets/styles/scss/MessageList.scss +203 -0
  106. package/src/assets/styles/scss/MessageLivestream.scss +325 -0
  107. package/src/assets/styles/scss/MessageNotification.scss +49 -0
  108. package/src/assets/styles/scss/MessageRepliesCountButton.scss +33 -0
  109. package/src/assets/styles/scss/MessageTeam.scss +617 -0
  110. package/src/assets/styles/scss/Modal.scss +77 -0
  111. package/src/assets/styles/scss/ReactionList.scss +183 -0
  112. package/src/assets/styles/scss/ReactionSelector.scss +212 -0
  113. package/src/assets/styles/scss/SendButton.scss +14 -0
  114. package/src/assets/styles/scss/SimpleReactionsList.scss +76 -0
  115. package/src/assets/styles/scss/SmallMessageInput.scss +172 -0
  116. package/src/assets/styles/scss/Thread.scss +306 -0
  117. package/src/assets/styles/scss/Tooltip.scss +38 -0
  118. package/src/assets/styles/scss/TypingIndicator.scss +75 -0
  119. package/src/assets/styles/scss/VirtualMessage.scss +291 -0
  120. package/src/assets/styles/scss/_base.scss +206 -0
  121. package/src/assets/styles/scss/_variables.scss +158 -0
  122. package/src/assets/styles/scss/index.scss +50 -0
  123. package/src/assets/styles/scss/vendor/emoji-mart.scss +495 -0
  124. package/src/assets/styles/scss/vendor/mml-react.scss +1749 -0
  125. package/src/assets/styles/scss/vendor/react-file-utils.scss +378 -0
  126. package/src/assets/styles/scss/vendor/react-image-gallery.scss +224 -0
  127. package/src/assets/version.ts +1 -1
@@ -0,0 +1,1749 @@
1
+ @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
2
+ .mml-container {
3
+ font-family: inherit;
4
+ line-height: 1.26;
5
+ font-size: 15px;
6
+ }
7
+ .mml-container * {
8
+ box-sizing: border-box;
9
+ }
10
+ .mml-wrap {
11
+ display: flex;
12
+ flex-direction: column;
13
+ max-width: 66.66%;
14
+ }
15
+ .mml-align-left .mml-wrap {
16
+ margin-right: auto;
17
+ }
18
+ .mml-align-right .mml-wrap {
19
+ margin-left: auto;
20
+ }
21
+ .mml-wrap > * {
22
+ border-radius: 16px;
23
+ }
24
+ .mml-align-left .mml-wrap > * {
25
+ margin-right: auto;
26
+ }
27
+ .mml-align-right .mml-wrap > * {
28
+ margin-left: auto;
29
+ }
30
+ .mml-align-left .mml-wrap > :last-child:not(.mml-btn) {
31
+ border-bottom-left-radius: 0;
32
+ }
33
+ .mml-align-right .mml-wrap > :last-child:not(.mml-btn) {
34
+ border-bottom-right-radius: 0;
35
+ }
36
+ .mml-add-to-calendar > .mml-card-body:last-child {
37
+ overflow: hidden;
38
+ border-bottom: 1px solid #e5e5e6;
39
+ }
40
+ .base-dark .mml-add-to-calendar > .mml-card-body:last-child {
41
+ border-bottom-color: #1b2d46;
42
+ }
43
+ .commerce-light .mml-add-to-calendar > .mml-card-body:last-child {
44
+ border-bottom-color: #eaeaea;
45
+ }
46
+ .commerce-dark .mml-add-to-calendar > .mml-card-body:last-child {
47
+ border-bottom-color: #004ccc;
48
+ }
49
+ .livestream-light .mml-add-to-calendar > .mml-card-body:last-child {
50
+ border-bottom-color: #bed5e4;
51
+ }
52
+ .livestream-dark .mml-add-to-calendar > .mml-card-body:last-child {
53
+ border-bottom-color: #081e58;
54
+ }
55
+ .messaging-light .mml-add-to-calendar > .mml-card-body:last-child {
56
+ border-bottom-color: #d6d6d6;
57
+ }
58
+ .messaging-dark .mml-add-to-calendar > .mml-card-body:last-child {
59
+ border-bottom-color: #252628;
60
+ }
61
+ .team-light .mml-add-to-calendar > .mml-card-body:last-child {
62
+ border-bottom-color: #eaeaea;
63
+ }
64
+ .team-dark .mml-add-to-calendar > .mml-card-body:last-child {
65
+ border-bottom-color: #4e00cc;
66
+ }
67
+ .mml-align-left .mml-add-to-calendar > .mml-card-body:last-child {
68
+ border-bottom-right-radius: 16px;
69
+ }
70
+ .mml-align-right .mml-add-to-calendar > .mml-card-body:last-child {
71
+ border-bottom-left-radius: 16px;
72
+ }
73
+ .mml-btn {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ -webkit-user-select: none;
78
+ -moz-user-select: none;
79
+ -ms-user-select: none;
80
+ user-select: none;
81
+ text-decoration: none;
82
+ -webkit-appearance: none;
83
+ padding: 6px 16px;
84
+ border-radius: 16px;
85
+ border: 1px solid #f2f2f2;
86
+ color: #006cff;
87
+ background: #f2f2f2;
88
+ font-family: inherit;
89
+ font-weight: 700;
90
+ font-size: 15px;
91
+ margin: 0;
92
+ }
93
+ .base-dark .mml-btn {
94
+ border-color: #1a232e;
95
+ }
96
+ .commerce-light .mml-btn {
97
+ border-color: #d9e1e6;
98
+ }
99
+ .commerce-dark .mml-btn {
100
+ border-color: #1c1f27;
101
+ }
102
+ .livestream-light .mml-btn {
103
+ border-color: #d9e1e6;
104
+ }
105
+ .livestream-dark .mml-btn {
106
+ border-color: #041b55;
107
+ }
108
+ .messaging-light .mml-btn {
109
+ border-color: #ebebeb;
110
+ }
111
+ .messaging-dark .mml-btn {
112
+ border-color: #242424;
113
+ }
114
+ .team-light .mml-btn {
115
+ border-color: #ccc;
116
+ }
117
+ .team-dark .mml-btn {
118
+ border-color: #201c27;
119
+ }
120
+ .base-dark .mml-btn {
121
+ color: #006cff;
122
+ }
123
+ .commerce-light .mml-btn {
124
+ color: #005fff;
125
+ }
126
+ .commerce-dark .mml-btn {
127
+ color: #004ccc;
128
+ }
129
+ .livestream-light .mml-btn {
130
+ color: #19a0ff;
131
+ }
132
+ .livestream-dark .mml-btn {
133
+ color: #0d47d9;
134
+ }
135
+ .messaging-dark .mml-btn,
136
+ .messaging-light .mml-btn {
137
+ color: #0283ff;
138
+ }
139
+ .team-light .mml-btn {
140
+ color: #4e1d9d;
141
+ }
142
+ .team-dark .mml-btn {
143
+ color: #5d02f0;
144
+ }
145
+ .base-dark .mml-btn {
146
+ background: #152438;
147
+ }
148
+ .commerce-light .mml-btn {
149
+ background: #fff;
150
+ }
151
+ .commerce-dark .mml-btn {
152
+ background: #1c1f27;
153
+ }
154
+ .livestream-light .mml-btn {
155
+ background: #fff;
156
+ }
157
+ .livestream-dark .mml-btn {
158
+ background: #010c29;
159
+ }
160
+ .messaging-light .mml-btn {
161
+ background: #fff;
162
+ }
163
+ .messaging-dark .mml-btn {
164
+ background: #3e4042;
165
+ }
166
+ .team-light .mml-btn {
167
+ background: #fff;
168
+ }
169
+ .team-dark .mml-btn {
170
+ background: #201c27;
171
+ }
172
+ .mml-btn:not([disabled]) {
173
+ cursor: pointer;
174
+ }
175
+ .mml-btn:focus,
176
+ .mml-btn:hover {
177
+ border-color: #006cff;
178
+ color: #fff;
179
+ background: #006cff;
180
+ }
181
+ .base-dark .mml-btn:focus,
182
+ .base-dark .mml-btn:hover {
183
+ border-color: #006cff;
184
+ }
185
+ .commerce-light .mml-btn:focus,
186
+ .commerce-light .mml-btn:hover {
187
+ border-color: #005fff;
188
+ }
189
+ .commerce-dark .mml-btn:focus,
190
+ .commerce-dark .mml-btn:hover {
191
+ border-color: #004ccc;
192
+ }
193
+ .livestream-light .mml-btn:focus,
194
+ .livestream-light .mml-btn:hover {
195
+ border-color: #19a0ff;
196
+ }
197
+ .livestream-dark .mml-btn:focus,
198
+ .livestream-dark .mml-btn:hover {
199
+ border-color: #0d47d9;
200
+ }
201
+ .messaging-dark .mml-btn:focus,
202
+ .messaging-dark .mml-btn:hover,
203
+ .messaging-light .mml-btn:focus,
204
+ .messaging-light .mml-btn:hover {
205
+ border-color: #0283ff;
206
+ }
207
+ .team-light .mml-btn:focus,
208
+ .team-light .mml-btn:hover {
209
+ border-color: #4e1d9d;
210
+ }
211
+ .team-dark .mml-btn:focus,
212
+ .team-dark .mml-btn:hover {
213
+ border-color: #5d02f0;
214
+ }
215
+ .base-dark .mml-btn:focus,
216
+ .base-dark .mml-btn:hover,
217
+ .commerce-dark .mml-btn:focus,
218
+ .commerce-dark .mml-btn:hover,
219
+ .commerce-light .mml-btn:focus,
220
+ .commerce-light .mml-btn:hover,
221
+ .livestream-dark .mml-btn:focus,
222
+ .livestream-dark .mml-btn:hover,
223
+ .livestream-light .mml-btn:focus,
224
+ .livestream-light .mml-btn:hover,
225
+ .messaging-light .mml-btn:focus,
226
+ .messaging-light .mml-btn:hover {
227
+ color: #fff;
228
+ }
229
+ .messaging-dark .mml-btn:focus,
230
+ .messaging-dark .mml-btn:hover {
231
+ color: #e8e8e9;
232
+ }
233
+ .team-dark .mml-btn:focus,
234
+ .team-dark .mml-btn:hover,
235
+ .team-light .mml-btn:focus,
236
+ .team-light .mml-btn:hover {
237
+ color: #fff;
238
+ }
239
+ .base-dark .mml-btn:focus,
240
+ .base-dark .mml-btn:hover {
241
+ background: #006cff;
242
+ }
243
+ .commerce-light .mml-btn:focus,
244
+ .commerce-light .mml-btn:hover {
245
+ background: #005fff;
246
+ }
247
+ .commerce-dark .mml-btn:focus,
248
+ .commerce-dark .mml-btn:hover {
249
+ background: #004ccc;
250
+ }
251
+ .livestream-light .mml-btn:focus,
252
+ .livestream-light .mml-btn:hover {
253
+ background: #19a0ff;
254
+ }
255
+ .livestream-dark .mml-btn:focus,
256
+ .livestream-dark .mml-btn:hover {
257
+ background: #0d47d9;
258
+ }
259
+ .messaging-dark .mml-btn:focus,
260
+ .messaging-dark .mml-btn:hover,
261
+ .messaging-light .mml-btn:focus,
262
+ .messaging-light .mml-btn:hover {
263
+ background: #0283ff;
264
+ }
265
+ .team-light .mml-btn:focus,
266
+ .team-light .mml-btn:hover {
267
+ background: #4e1d9d;
268
+ }
269
+ .team-dark .mml-btn:focus,
270
+ .team-dark .mml-btn:hover {
271
+ background: #5d02f0;
272
+ }
273
+ .mml-btn[disabled] {
274
+ border-color: #f2f2f2;
275
+ color: #b2b1b5;
276
+ background: #f2f2f2;
277
+ }
278
+ .base-dark .mml-btn[disabled] {
279
+ border-color: #152438;
280
+ }
281
+ .commerce-light .mml-btn[disabled] {
282
+ border-color: #fff;
283
+ }
284
+ .commerce-dark .mml-btn[disabled] {
285
+ border-color: #1c1f27;
286
+ }
287
+ .livestream-light .mml-btn[disabled] {
288
+ border-color: #fff;
289
+ }
290
+ .livestream-dark .mml-btn[disabled] {
291
+ border-color: #010c29;
292
+ }
293
+ .messaging-light .mml-btn[disabled] {
294
+ border-color: #fff;
295
+ }
296
+ .messaging-dark .mml-btn[disabled] {
297
+ border-color: #3e4042;
298
+ }
299
+ .team-light .mml-btn[disabled] {
300
+ border-color: #fff;
301
+ }
302
+ .team-dark .mml-btn[disabled] {
303
+ border-color: #201c27;
304
+ }
305
+ .base-dark .mml-btn[disabled] {
306
+ color: #57606b;
307
+ }
308
+ .commerce-light .mml-btn[disabled] {
309
+ color: #b6bece;
310
+ }
311
+ .commerce-dark .mml-btn[disabled] {
312
+ color: #43527c;
313
+ }
314
+ .livestream-light .mml-btn[disabled] {
315
+ color: #85cdff;
316
+ }
317
+ .livestream-dark .mml-btn[disabled] {
318
+ color: #48526a;
319
+ }
320
+ .messaging-light .mml-btn[disabled] {
321
+ color: #b3b3b3;
322
+ }
323
+ .messaging-dark .mml-btn[disabled] {
324
+ color: #626262;
325
+ }
326
+ .team-light .mml-btn[disabled] {
327
+ color: #9f8bbf;
328
+ }
329
+ .team-dark .mml-btn[disabled] {
330
+ color: #59437c;
331
+ }
332
+ .base-dark .mml-btn[disabled] {
333
+ background: #152438;
334
+ }
335
+ .commerce-light .mml-btn[disabled] {
336
+ background: #fff;
337
+ }
338
+ .commerce-dark .mml-btn[disabled] {
339
+ background: #1c1f27;
340
+ }
341
+ .livestream-light .mml-btn[disabled] {
342
+ background: #fff;
343
+ }
344
+ .livestream-dark .mml-btn[disabled] {
345
+ background: #010c29;
346
+ }
347
+ .messaging-light .mml-btn[disabled] {
348
+ background: #fff;
349
+ }
350
+ .messaging-dark .mml-btn[disabled] {
351
+ background: #3e4042;
352
+ }
353
+ .team-light .mml-btn[disabled] {
354
+ background: #fff;
355
+ }
356
+ .team-dark .mml-btn[disabled] {
357
+ background: #201c27;
358
+ }
359
+ .mml-btn:focus {
360
+ outline: none;
361
+ }
362
+ .mml-btn--floating {
363
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
364
+ }
365
+ .base-dark .mml-btn--floating {
366
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
367
+ }
368
+ .commerce-light .mml-btn--floating {
369
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
370
+ }
371
+ .commerce-dark .mml-btn--floating {
372
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
373
+ }
374
+ .livestream-light .mml-btn--floating {
375
+ box-shadow: 0 2px 5px rgba(190, 213, 228, 0.5);
376
+ }
377
+ .livestream-dark .mml-btn--floating {
378
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
379
+ }
380
+ .messaging-light .mml-btn--floating {
381
+ box-shadow: 0 2px 5px rgba(0, 74, 174, 0.15);
382
+ }
383
+ .messaging-dark .mml-btn--floating {
384
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
385
+ }
386
+ .team-light .mml-btn--floating {
387
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
388
+ }
389
+ .team-dark .mml-btn--floating {
390
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
391
+ }
392
+ .mml-btn--floating:focus {
393
+ box-shadow: none !important;
394
+ }
395
+ .mml-btn--with-icon .mml-icon {
396
+ margin-right: 0.4em;
397
+ }
398
+ .mml-btn--icon {
399
+ padding: 5px;
400
+ border-radius: 100%;
401
+ }
402
+ .mml-btnlist {
403
+ display: flex;
404
+ }
405
+ .mml-btnlist--grounded {
406
+ flex-direction: column;
407
+ overflow: hidden;
408
+ width: 100%;
409
+ border: 1px solid #e5e5e6;
410
+ background: #f2f2f2;
411
+ }
412
+ .base-dark .mml-btnlist--grounded {
413
+ border-color: #1b2d46;
414
+ }
415
+ .commerce-light .mml-btnlist--grounded {
416
+ border-color: #eaeaea;
417
+ }
418
+ .commerce-dark .mml-btnlist--grounded {
419
+ border-color: #004ccc;
420
+ }
421
+ .livestream-light .mml-btnlist--grounded {
422
+ border-color: #bed5e4;
423
+ }
424
+ .livestream-dark .mml-btnlist--grounded {
425
+ border-color: #081e58;
426
+ }
427
+ .messaging-light .mml-btnlist--grounded {
428
+ border-color: #d6d6d6;
429
+ }
430
+ .messaging-dark .mml-btnlist--grounded {
431
+ border-color: #252628;
432
+ }
433
+ .team-light .mml-btnlist--grounded {
434
+ border-color: #eaeaea;
435
+ }
436
+ .team-dark .mml-btnlist--grounded {
437
+ border-color: #4e00cc;
438
+ }
439
+ .base-dark .mml-btnlist--grounded {
440
+ background: #152438;
441
+ }
442
+ .commerce-light .mml-btnlist--grounded {
443
+ background: #fff;
444
+ }
445
+ .commerce-dark .mml-btnlist--grounded {
446
+ background: #1c1f27;
447
+ }
448
+ .livestream-light .mml-btnlist--grounded {
449
+ background: #fff;
450
+ }
451
+ .livestream-dark .mml-btnlist--grounded {
452
+ background: #010c29;
453
+ }
454
+ .messaging-light .mml-btnlist--grounded {
455
+ background: #fff;
456
+ }
457
+ .messaging-dark .mml-btnlist--grounded {
458
+ background: #3e4042;
459
+ }
460
+ .team-light .mml-btnlist--grounded {
461
+ background: #fff;
462
+ }
463
+ .team-dark .mml-btnlist--grounded {
464
+ background: #201c27;
465
+ }
466
+ .mml-btnlist--grounded .mml-btn {
467
+ width: 100%;
468
+ margin: 0;
469
+ padding: 12px 16px;
470
+ border-width: 0 0 1px;
471
+ border-radius: 0;
472
+ border-color: #e5e5e6;
473
+ }
474
+ .base-dark .mml-btnlist--grounded .mml-btn {
475
+ border-color: #1b2d46;
476
+ }
477
+ .commerce-light .mml-btnlist--grounded .mml-btn {
478
+ border-color: #eaeaea;
479
+ }
480
+ .commerce-dark .mml-btnlist--grounded .mml-btn {
481
+ border-color: #004ccc;
482
+ }
483
+ .livestream-light .mml-btnlist--grounded .mml-btn {
484
+ border-color: #bed5e4;
485
+ }
486
+ .livestream-dark .mml-btnlist--grounded .mml-btn {
487
+ border-color: #081e58;
488
+ }
489
+ .messaging-light .mml-btnlist--grounded .mml-btn {
490
+ border-color: #d6d6d6;
491
+ }
492
+ .messaging-dark .mml-btnlist--grounded .mml-btn {
493
+ border-color: #252628;
494
+ }
495
+ .team-light .mml-btnlist--grounded .mml-btn {
496
+ border-color: #eaeaea;
497
+ }
498
+ .team-dark .mml-btnlist--grounded .mml-btn {
499
+ border-color: #4e00cc;
500
+ }
501
+ .mml-btnlist--grounded .mml-btn:not(:hover):not(:focus) {
502
+ background: none;
503
+ }
504
+ .mml-btnlist--grounded .mml-btn:last-child {
505
+ border-width: 0;
506
+ }
507
+ .mml-btnlist--grounded .mml-btn--with-icon {
508
+ justify-content: flex-start;
509
+ font-weight: 400;
510
+ }
511
+ .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
512
+ color: #0e1621;
513
+ }
514
+ .base-dark .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
515
+ color: #fff;
516
+ }
517
+ .commerce-light .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
518
+ color: #202a3c;
519
+ }
520
+ .commerce-dark .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
521
+ color: #e2e5e9;
522
+ }
523
+ .livestream-light .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
524
+ color: #2c2c30;
525
+ }
526
+ .livestream-dark .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
527
+ color: #fff;
528
+ }
529
+ .messaging-light .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
530
+ color: #0e1621;
531
+ }
532
+ .messaging-dark .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
533
+ color: #e8e8e9;
534
+ }
535
+ .team-light .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
536
+ color: #2e2c30;
537
+ }
538
+ .team-dark .mml-btnlist--grounded .mml-btn--with-icon:not(:hover):not(:focus) {
539
+ color: #e5e2e9;
540
+ }
541
+ .mml-btnlist--floating {
542
+ flex-direction: row;
543
+ flex-wrap: wrap;
544
+ justify-content: center;
545
+ }
546
+ .mml-align-right .mml-btnlist--floating {
547
+ margin-left: calc(-50% - 8px);
548
+ margin-right: -8px;
549
+ }
550
+ .mml-align-left .mml-btnlist--floating {
551
+ margin-left: -8px;
552
+ margin-right: calc(-50% - 8px);
553
+ }
554
+ .mml-btnlist--floating .mml-btn {
555
+ margin: 8px;
556
+ }
557
+ .mml-align-right .mml-carousel {
558
+ margin-left: -50%;
559
+ }
560
+ .mml-align-left .mml-carousel {
561
+ margin-right: -50%;
562
+ }
563
+ .mml-carousel__track {
564
+ display: flex;
565
+ padding: 8px 0;
566
+ overflow-x: scroll;
567
+ scrollbar-width: none;
568
+ -ms-scroll-snap-type: x mandatory;
569
+ scroll-snap-type: x mandatory;
570
+ scroll-behavior: smooth;
571
+ -webkit-overflow-scrolling: touch;
572
+ -ms-overflow-style: none;
573
+ }
574
+ .mml-carousel__track::-webkit-scrollbar {
575
+ display: none;
576
+ }
577
+ .mml-carousel__slides {
578
+ display: flex;
579
+ flex-wrap: nowrap;
580
+ min-width: 100%;
581
+ }
582
+ .mml-carousel__slide {
583
+ scroll-snap-align: center;
584
+ display: flex;
585
+ flex-direction: column;
586
+ margin-right: 8px;
587
+ }
588
+ .mml-align-right .mml-carousel__slide:first-child {
589
+ margin-left: auto;
590
+ }
591
+ .mml-carousel__slide:last-child {
592
+ margin-right: 0;
593
+ }
594
+ .mml-carousel-item > :not(:first-child):not(:last-child) {
595
+ background: #fff;
596
+ }
597
+ .base-dark .mml-carousel-item > :not(:first-child):not(:last-child) {
598
+ background: #0e1723;
599
+ }
600
+ .commerce-light .mml-carousel-item > :not(:first-child):not(:last-child) {
601
+ background: #f5f9ff;
602
+ }
603
+ .commerce-dark .mml-carousel-item > :not(:first-child):not(:last-child) {
604
+ background: #0c0e12;
605
+ }
606
+ .livestream-light .mml-carousel-item > :not(:first-child):not(:last-child) {
607
+ background: #f1faff;
608
+ }
609
+ .livestream-dark .mml-carousel-item > :not(:first-child):not(:last-child) {
610
+ background: #00091f;
611
+ }
612
+ .messaging-light .mml-carousel-item > :not(:first-child):not(:last-child) {
613
+ background: #f7f7f8;
614
+ }
615
+ .messaging-dark .mml-carousel-item > :not(:first-child):not(:last-child) {
616
+ background: #2d2e2f;
617
+ }
618
+ .team-light .mml-carousel-item > :not(:first-child):not(:last-child) {
619
+ background: #f9f5ff;
620
+ }
621
+ .team-dark .mml-carousel-item > :not(:first-child):not(:last-child) {
622
+ background: #0f0c12;
623
+ }
624
+ .mml-carousel-item > .mml-md,
625
+ .mml-carousel-item > .mml-text {
626
+ border-color: #e5e5e6;
627
+ border-style: solid;
628
+ border-width: 0 1px;
629
+ padding: 0 8px 8px;
630
+ }
631
+ .base-dark .mml-carousel-item > .mml-md,
632
+ .base-dark .mml-carousel-item > .mml-text {
633
+ border-color: #1b2d46;
634
+ }
635
+ .commerce-light .mml-carousel-item > .mml-md,
636
+ .commerce-light .mml-carousel-item > .mml-text {
637
+ border-color: #eaeaea;
638
+ }
639
+ .commerce-dark .mml-carousel-item > .mml-md,
640
+ .commerce-dark .mml-carousel-item > .mml-text {
641
+ border-color: #004ccc;
642
+ }
643
+ .livestream-light .mml-carousel-item > .mml-md,
644
+ .livestream-light .mml-carousel-item > .mml-text {
645
+ border-color: #bed5e4;
646
+ }
647
+ .livestream-dark .mml-carousel-item > .mml-md,
648
+ .livestream-dark .mml-carousel-item > .mml-text {
649
+ border-color: #081e58;
650
+ }
651
+ .messaging-light .mml-carousel-item > .mml-md,
652
+ .messaging-light .mml-carousel-item > .mml-text {
653
+ border-color: #d6d6d6;
654
+ }
655
+ .messaging-dark .mml-carousel-item > .mml-md,
656
+ .messaging-dark .mml-carousel-item > .mml-text {
657
+ border-color: #252628;
658
+ }
659
+ .team-light .mml-carousel-item > .mml-md,
660
+ .team-light .mml-carousel-item > .mml-text {
661
+ border-color: #eaeaea;
662
+ }
663
+ .team-dark .mml-carousel-item > .mml-md,
664
+ .team-dark .mml-carousel-item > .mml-text {
665
+ border-color: #4e00cc;
666
+ }
667
+ .mml-carousel-item > .mml-md:first-of-type,
668
+ .mml-carousel-item > .mml-text:first-of-type {
669
+ padding-top: 8px;
670
+ padding-bottom: 6px;
671
+ }
672
+ .mml-carousel-item > .mml-md:last-of-type,
673
+ .mml-carousel-item > .mml-text:last-of-type {
674
+ flex: 1;
675
+ }
676
+ .mml-carousel-item > .mml-text {
677
+ font-size: 11px;
678
+ color: #8a898e;
679
+ }
680
+ .base-dark .mml-carousel-item > .mml-text {
681
+ color: #868b91;
682
+ }
683
+ .commerce-light .mml-carousel-item > .mml-text {
684
+ color: #6c7a93;
685
+ }
686
+ .commerce-dark .mml-carousel-item > .mml-text {
687
+ color: #afc0df;
688
+ }
689
+ .livestream-light .mml-carousel-item > .mml-text {
690
+ color: #7ba0bb;
691
+ }
692
+ .livestream-dark .mml-carousel-item > .mml-text {
693
+ color: #7889b6;
694
+ }
695
+ .messaging-light .mml-carousel-item > .mml-text {
696
+ color: #8c8c8c;
697
+ }
698
+ .messaging-dark .mml-carousel-item > .mml-text {
699
+ color: #898a8b;
700
+ }
701
+ .team-light .mml-carousel-item > .mml-text {
702
+ color: #7c61a8;
703
+ }
704
+ .team-dark .mml-carousel-item > .mml-text {
705
+ color: #c1afdf;
706
+ }
707
+ .mml-carousel-item .mml-btn {
708
+ padding: 10px 16px;
709
+ border-top-left-radius: 0;
710
+ border-top-right-radius: 0;
711
+ border: 1px solid #e5e5e6;
712
+ }
713
+ .base-dark .mml-carousel-item .mml-btn {
714
+ border-color: #1b2d46;
715
+ }
716
+ .commerce-light .mml-carousel-item .mml-btn {
717
+ border-color: #eaeaea;
718
+ }
719
+ .commerce-dark .mml-carousel-item .mml-btn {
720
+ border-color: #004ccc;
721
+ }
722
+ .livestream-light .mml-carousel-item .mml-btn {
723
+ border-color: #bed5e4;
724
+ }
725
+ .livestream-dark .mml-carousel-item .mml-btn {
726
+ border-color: #081e58;
727
+ }
728
+ .messaging-light .mml-carousel-item .mml-btn {
729
+ border-color: #d6d6d6;
730
+ }
731
+ .messaging-dark .mml-carousel-item .mml-btn {
732
+ border-color: #252628;
733
+ }
734
+ .team-light .mml-carousel-item .mml-btn {
735
+ border-color: #eaeaea;
736
+ }
737
+ .team-dark .mml-carousel-item .mml-btn {
738
+ border-color: #4e00cc;
739
+ }
740
+ .mml-col-align-center {
741
+ justify-content: center;
742
+ }
743
+ .mml-col-align-right {
744
+ justify-content: flex-end;
745
+ }
746
+ .mml-col-1,
747
+ .mml-col-2,
748
+ .mml-col-3,
749
+ .mml-col-4,
750
+ .mml-col-5,
751
+ .mml-col-6,
752
+ .mml-col-7,
753
+ .mml-col-8,
754
+ .mml-col-9,
755
+ .mml-col-10,
756
+ .mml-col-11,
757
+ .mml-col-12 {
758
+ position: relative;
759
+ width: 100%;
760
+ padding-right: 4px;
761
+ padding-left: 4px;
762
+ }
763
+ .mml-col-1 {
764
+ flex: 0 0 8.33333%;
765
+ max-width: 8.33333%;
766
+ }
767
+ .mml-col-2 {
768
+ flex: 0 0 16.66667%;
769
+ max-width: 16.66667%;
770
+ }
771
+ .mml-col-3 {
772
+ flex: 0 0 25%;
773
+ max-width: 25%;
774
+ }
775
+ .mml-col-4 {
776
+ flex: 0 0 33.33333%;
777
+ max-width: 33.33333%;
778
+ }
779
+ .mml-col-5 {
780
+ flex: 0 0 41.66667%;
781
+ max-width: 41.66667%;
782
+ }
783
+ .mml-col-6 {
784
+ flex: 0 0 50%;
785
+ max-width: 50%;
786
+ }
787
+ .mml-col-7 {
788
+ flex: 0 0 58.33333%;
789
+ max-width: 58.33333%;
790
+ }
791
+ .mml-col-8 {
792
+ flex: 0 0 66.66667%;
793
+ max-width: 66.66667%;
794
+ }
795
+ .mml-col-9 {
796
+ flex: 0 0 75%;
797
+ max-width: 75%;
798
+ }
799
+ .mml-col-10 {
800
+ flex: 0 0 83.33333%;
801
+ max-width: 83.33333%;
802
+ }
803
+ .mml-col-11 {
804
+ flex: 0 0 91.66667%;
805
+ max-width: 91.66667%;
806
+ }
807
+ .mml-col-12 {
808
+ flex: 0 0 100%;
809
+ max-width: 100%;
810
+ }
811
+ .mml-col-auto {
812
+ flex: 0 0 auto;
813
+ width: auto;
814
+ max-width: 100%;
815
+ }
816
+ .mml-offset-1 {
817
+ margin-left: 8.33333%;
818
+ }
819
+ .mml-offset-2 {
820
+ margin-left: 16.66667%;
821
+ }
822
+ .mml-offset-3 {
823
+ margin-left: 25%;
824
+ }
825
+ .mml-offset-4 {
826
+ margin-left: 33.33333%;
827
+ }
828
+ .mml-offset-5 {
829
+ margin-left: 41.66667%;
830
+ }
831
+ .mml-offset-6 {
832
+ margin-left: 50%;
833
+ }
834
+ .mml-offset-7 {
835
+ margin-left: 58.33333%;
836
+ }
837
+ .mml-offset-8 {
838
+ margin-left: 66.66667%;
839
+ }
840
+ .mml-offset-9 {
841
+ margin-left: 75%;
842
+ }
843
+ .mml-offset-10 {
844
+ margin-left: 83.33333%;
845
+ }
846
+ .mml-offset-11 {
847
+ margin-left: 91.66667%;
848
+ }
849
+ .mml-error {
850
+ display: flex;
851
+ justify-content: center;
852
+ padding: 8px;
853
+ color: #bb5151;
854
+ font-size: 88%;
855
+ }
856
+ .mml-icon {
857
+ font-family: Material Icons;
858
+ line-height: 16px;
859
+ font-size: 16px;
860
+ }
861
+ .mml-icon__svg {
862
+ width: 1em;
863
+ height: 1em;
864
+ fill: currentColor;
865
+ }
866
+ .mml-image {
867
+ display: block;
868
+ width: 100%;
869
+ height: auto;
870
+ margin: 0;
871
+ }
872
+ .mml-input {
873
+ position: relative;
874
+ width: 100%;
875
+ padding: 12px 16px;
876
+ -webkit-appearance: none;
877
+ border: 1px solid #e5e5e6;
878
+ color: #8a898e;
879
+ }
880
+ .base-dark .mml-input {
881
+ border-color: #1b2d46;
882
+ }
883
+ .commerce-light .mml-input {
884
+ border-color: #eaeaea;
885
+ }
886
+ .commerce-dark .mml-input {
887
+ border-color: #004ccc;
888
+ }
889
+ .livestream-light .mml-input {
890
+ border-color: #bed5e4;
891
+ }
892
+ .livestream-dark .mml-input {
893
+ border-color: #081e58;
894
+ }
895
+ .messaging-light .mml-input {
896
+ border-color: #d6d6d6;
897
+ }
898
+ .messaging-dark .mml-input {
899
+ border-color: #252628;
900
+ }
901
+ .team-light .mml-input {
902
+ border-color: #eaeaea;
903
+ }
904
+ .team-dark .mml-input {
905
+ border-color: #4e00cc;
906
+ }
907
+ .base-dark .mml-input {
908
+ color: #868b91;
909
+ }
910
+ .commerce-light .mml-input {
911
+ color: #6c7a93;
912
+ }
913
+ .commerce-dark .mml-input {
914
+ color: #afc0df;
915
+ }
916
+ .livestream-light .mml-input {
917
+ color: #7ba0bb;
918
+ }
919
+ .livestream-dark .mml-input {
920
+ color: #7889b6;
921
+ }
922
+ .messaging-light .mml-input {
923
+ color: #8c8c8c;
924
+ }
925
+ .messaging-dark .mml-input {
926
+ color: #898a8b;
927
+ }
928
+ .team-light .mml-input {
929
+ color: #7c61a8;
930
+ }
931
+ .team-dark .mml-input {
932
+ color: #c1afdf;
933
+ }
934
+ .mml-input:focus {
935
+ outline: none;
936
+ color: #0e1621;
937
+ }
938
+ .base-dark .mml-input:focus {
939
+ color: #fff;
940
+ }
941
+ .commerce-light .mml-input:focus {
942
+ color: #202a3c;
943
+ }
944
+ .commerce-dark .mml-input:focus {
945
+ color: #e2e5e9;
946
+ }
947
+ .livestream-light .mml-input:focus {
948
+ color: #2c2c30;
949
+ }
950
+ .livestream-dark .mml-input:focus {
951
+ color: #fff;
952
+ }
953
+ .messaging-light .mml-input:focus {
954
+ color: #0e1621;
955
+ }
956
+ .messaging-dark .mml-input:focus {
957
+ color: #e8e8e9;
958
+ }
959
+ .team-light .mml-input:focus {
960
+ color: #2e2c30;
961
+ }
962
+ .team-dark .mml-input:focus {
963
+ color: #e5e2e9;
964
+ }
965
+ .mml-card-header + .mml-input,
966
+ .mml-card .mml-input + .mml-btn {
967
+ border-top: 0;
968
+ }
969
+ .mml-progress {
970
+ width: 1em;
971
+ color: #bbb;
972
+ -webkit-animation: mml-animation-dash 1.4s ease-in-out infinite;
973
+ animation: mml-animation-dash 1.4s ease-in-out infinite;
974
+ stroke-dasharray: 80px, 200px;
975
+ stroke-dashoffset: 0px;
976
+ }
977
+ .mml-progress__svg {
978
+ display: block;
979
+ }
980
+ .mml-progress__circle {
981
+ stroke: currentColor;
982
+ }
983
+ @-webkit-keyframes mml-animation-dash {
984
+ 0% {
985
+ stroke-dasharray: 1px, 200px;
986
+ stroke-dashoffset: 0px;
987
+ }
988
+ 50% {
989
+ stroke-dasharray: 100px, 200px;
990
+ stroke-dashoffset: -15px;
991
+ }
992
+ to {
993
+ stroke-dasharray: 100px, 200px;
994
+ stroke-dashoffset: -125px;
995
+ }
996
+ }
997
+ @keyframes mml-animation-dash {
998
+ 0% {
999
+ stroke-dasharray: 1px, 200px;
1000
+ stroke-dashoffset: 0px;
1001
+ }
1002
+ 50% {
1003
+ stroke-dasharray: 100px, 200px;
1004
+ stroke-dashoffset: -15px;
1005
+ }
1006
+ to {
1007
+ stroke-dasharray: 100px, 200px;
1008
+ stroke-dashoffset: -125px;
1009
+ }
1010
+ }
1011
+ .mml-loading {
1012
+ display: flex;
1013
+ align-items: center;
1014
+ justify-content: center;
1015
+ padding: 8px;
1016
+ font-size: 88%;
1017
+ }
1018
+ .mml-loading__text {
1019
+ padding-left: 8px;
1020
+ }
1021
+ .mml-md {
1022
+ padding: 2px 0;
1023
+ color: #0e1621;
1024
+ }
1025
+ .base-dark .mml-md {
1026
+ color: #fff;
1027
+ }
1028
+ .commerce-light .mml-md {
1029
+ color: #202a3c;
1030
+ }
1031
+ .commerce-dark .mml-md {
1032
+ color: #e2e5e9;
1033
+ }
1034
+ .livestream-light .mml-md {
1035
+ color: #2c2c30;
1036
+ }
1037
+ .livestream-dark .mml-md {
1038
+ color: #fff;
1039
+ }
1040
+ .messaging-light .mml-md {
1041
+ color: #0e1621;
1042
+ }
1043
+ .messaging-dark .mml-md {
1044
+ color: #e8e8e9;
1045
+ }
1046
+ .team-light .mml-md {
1047
+ color: #2e2c30;
1048
+ }
1049
+ .team-dark .mml-md {
1050
+ color: #e5e2e9;
1051
+ }
1052
+ .mml-md blockquote {
1053
+ padding: 0 1em;
1054
+ margin: 1em 0;
1055
+ border: solid #f2f2f2;
1056
+ border-width: 0 0 0 3px;
1057
+ }
1058
+ .base-dark .mml-md blockquote {
1059
+ border-color: #152438;
1060
+ }
1061
+ .commerce-light .mml-md blockquote {
1062
+ border-color: #fff;
1063
+ }
1064
+ .commerce-dark .mml-md blockquote {
1065
+ border-color: #1c1f27;
1066
+ }
1067
+ .livestream-light .mml-md blockquote {
1068
+ border-color: #fff;
1069
+ }
1070
+ .livestream-dark .mml-md blockquote {
1071
+ border-color: #010c29;
1072
+ }
1073
+ .messaging-light .mml-md blockquote {
1074
+ border-color: #fff;
1075
+ }
1076
+ .messaging-dark .mml-md blockquote {
1077
+ border-color: #3e4042;
1078
+ }
1079
+ .team-light .mml-md blockquote {
1080
+ border-color: #fff;
1081
+ }
1082
+ .team-dark .mml-md blockquote {
1083
+ border-color: #201c27;
1084
+ }
1085
+ .mml-md pre {
1086
+ padding: 2px 4px;
1087
+ margin: 0 0 1em;
1088
+ white-space: normal;
1089
+ background: #e5e5e6;
1090
+ }
1091
+ .base-dark .mml-md pre {
1092
+ background: #1b2d46;
1093
+ }
1094
+ .commerce-light .mml-md pre {
1095
+ background: #eaeaea;
1096
+ }
1097
+ .commerce-dark .mml-md pre {
1098
+ background: #004ccc;
1099
+ }
1100
+ .livestream-light .mml-md pre {
1101
+ background: #bed5e4;
1102
+ }
1103
+ .livestream-dark .mml-md pre {
1104
+ background: #081e58;
1105
+ }
1106
+ .messaging-light .mml-md pre {
1107
+ background: #d6d6d6;
1108
+ }
1109
+ .messaging-dark .mml-md pre {
1110
+ background: #252628;
1111
+ }
1112
+ .team-light .mml-md pre {
1113
+ background: #eaeaea;
1114
+ }
1115
+ .team-dark .mml-md pre {
1116
+ background: #4e00cc;
1117
+ }
1118
+ .mml-md code {
1119
+ color: #e83e8c;
1120
+ font-size: 87.5%;
1121
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
1122
+ }
1123
+ .mml-md p {
1124
+ margin: 0;
1125
+ }
1126
+ .mml-md p:not(:first-child):not(:last-child) {
1127
+ margin: 0 0 1em;
1128
+ }
1129
+ .base-dark .mml-md a,
1130
+ .mml-md a {
1131
+ color: #006cff;
1132
+ }
1133
+ .commerce-light .mml-md a {
1134
+ color: #005fff;
1135
+ }
1136
+ .commerce-dark .mml-md a {
1137
+ color: #004ccc;
1138
+ }
1139
+ .livestream-light .mml-md a {
1140
+ color: #19a0ff;
1141
+ }
1142
+ .livestream-dark .mml-md a {
1143
+ color: #0d47d9;
1144
+ }
1145
+ .messaging-dark .mml-md a,
1146
+ .messaging-light .mml-md a {
1147
+ color: #0283ff;
1148
+ }
1149
+ .team-light .mml-md a {
1150
+ color: #4e1d9d;
1151
+ }
1152
+ .team-dark .mml-md a {
1153
+ color: #5d02f0;
1154
+ }
1155
+ .mml-number,
1156
+ .mml-number__count {
1157
+ flex: 1;
1158
+ display: flex;
1159
+ }
1160
+ .mml-number__count {
1161
+ align-items: center;
1162
+ justify-content: center;
1163
+ margin: 0 8px;
1164
+ font-weight: 700;
1165
+ color: #0e1621;
1166
+ }
1167
+ .base-dark .mml-number__count {
1168
+ color: #fff;
1169
+ }
1170
+ .commerce-light .mml-number__count {
1171
+ color: #202a3c;
1172
+ }
1173
+ .commerce-dark .mml-number__count {
1174
+ color: #e2e5e9;
1175
+ }
1176
+ .livestream-light .mml-number__count {
1177
+ color: #2c2c30;
1178
+ }
1179
+ .livestream-dark .mml-number__count {
1180
+ color: #fff;
1181
+ }
1182
+ .messaging-light .mml-number__count {
1183
+ color: #0e1621;
1184
+ }
1185
+ .messaging-dark .mml-number__count {
1186
+ color: #e8e8e9;
1187
+ }
1188
+ .team-light .mml-number__count {
1189
+ color: #2e2c30;
1190
+ }
1191
+ .team-dark .mml-number__count {
1192
+ color: #e5e2e9;
1193
+ }
1194
+ .mml-number .mml-btn {
1195
+ margin: 8px;
1196
+ }
1197
+ .mml-row {
1198
+ display: flex;
1199
+ flex-wrap: wrap;
1200
+ margin-right: -4px;
1201
+ margin-left: -4px;
1202
+ min-width: 100%;
1203
+ }
1204
+ .mml-card {
1205
+ width: 100%;
1206
+ }
1207
+ .mml-card .mml-btnlist {
1208
+ font-size: 14px;
1209
+ border: 0;
1210
+ }
1211
+ .mml-card > :not(:first-child):not(:last-child) {
1212
+ background: #fff;
1213
+ }
1214
+ .base-dark .mml-card > :not(:first-child):not(:last-child) {
1215
+ background: #0e1723;
1216
+ }
1217
+ .commerce-light .mml-card > :not(:first-child):not(:last-child) {
1218
+ background: #f5f9ff;
1219
+ }
1220
+ .commerce-dark .mml-card > :not(:first-child):not(:last-child) {
1221
+ background: #0c0e12;
1222
+ }
1223
+ .livestream-light .mml-card > :not(:first-child):not(:last-child) {
1224
+ background: #f1faff;
1225
+ }
1226
+ .livestream-dark .mml-card > :not(:first-child):not(:last-child) {
1227
+ background: #00091f;
1228
+ }
1229
+ .messaging-light .mml-card > :not(:first-child):not(:last-child) {
1230
+ background: #f7f7f8;
1231
+ }
1232
+ .messaging-dark .mml-card > :not(:first-child):not(:last-child) {
1233
+ background: #2d2e2f;
1234
+ }
1235
+ .team-light .mml-card > :not(:first-child):not(:last-child) {
1236
+ background: #f9f5ff;
1237
+ }
1238
+ .team-dark .mml-card > :not(:first-child):not(:last-child) {
1239
+ background: #0f0c12;
1240
+ }
1241
+ .mml-card > .mml-number {
1242
+ border-color: #e5e5e6;
1243
+ border-style: solid;
1244
+ border-width: 0 1px;
1245
+ }
1246
+ .base-dark .mml-card > .mml-number {
1247
+ border-color: #1b2d46;
1248
+ }
1249
+ .commerce-light .mml-card > .mml-number {
1250
+ border-color: #eaeaea;
1251
+ }
1252
+ .commerce-dark .mml-card > .mml-number {
1253
+ border-color: #004ccc;
1254
+ }
1255
+ .livestream-light .mml-card > .mml-number {
1256
+ border-color: #bed5e4;
1257
+ }
1258
+ .livestream-dark .mml-card > .mml-number {
1259
+ border-color: #081e58;
1260
+ }
1261
+ .messaging-light .mml-card > .mml-number {
1262
+ border-color: #d6d6d6;
1263
+ }
1264
+ .messaging-dark .mml-card > .mml-number {
1265
+ border-color: #252628;
1266
+ }
1267
+ .team-light .mml-card > .mml-number {
1268
+ border-color: #eaeaea;
1269
+ }
1270
+ .team-dark .mml-card > .mml-number {
1271
+ border-color: #4e00cc;
1272
+ }
1273
+ .mml-card > .mml-btn {
1274
+ min-width: 100%;
1275
+ border: 1px solid #e5e5e6;
1276
+ }
1277
+ .base-dark .mml-card > .mml-btn {
1278
+ border-color: #1b2d46;
1279
+ }
1280
+ .commerce-light .mml-card > .mml-btn {
1281
+ border-color: #eaeaea;
1282
+ }
1283
+ .commerce-dark .mml-card > .mml-btn {
1284
+ border-color: #004ccc;
1285
+ }
1286
+ .livestream-light .mml-card > .mml-btn {
1287
+ border-color: #bed5e4;
1288
+ }
1289
+ .livestream-dark .mml-card > .mml-btn {
1290
+ border-color: #081e58;
1291
+ }
1292
+ .messaging-light .mml-card > .mml-btn {
1293
+ border-color: #d6d6d6;
1294
+ }
1295
+ .messaging-dark .mml-card > .mml-btn {
1296
+ border-color: #252628;
1297
+ }
1298
+ .team-light .mml-card > .mml-btn {
1299
+ border-color: #eaeaea;
1300
+ }
1301
+ .team-dark .mml-card > .mml-btn {
1302
+ border-color: #4e00cc;
1303
+ }
1304
+ .mml-card > .mml-btn:last-child {
1305
+ padding: 10px 16px;
1306
+ border-radius: 0;
1307
+ }
1308
+ .mml-align-left .mml-card > .mml-btn:last-child {
1309
+ border-bottom-right-radius: 16px;
1310
+ }
1311
+ .mml-align-right .mml-card > .mml-btn:last-child {
1312
+ border-bottom-left-radius: 16px;
1313
+ }
1314
+ .mml-card-body {
1315
+ border-color: #e5e5e6;
1316
+ border-style: solid;
1317
+ border-width: 0 1px;
1318
+ background: #fff;
1319
+ color: #0e1621;
1320
+ font-size: 14px;
1321
+ }
1322
+ .base-dark .mml-card-body {
1323
+ border-color: #1b2d46;
1324
+ }
1325
+ .commerce-light .mml-card-body {
1326
+ border-color: #eaeaea;
1327
+ }
1328
+ .commerce-dark .mml-card-body {
1329
+ border-color: #004ccc;
1330
+ }
1331
+ .livestream-light .mml-card-body {
1332
+ border-color: #bed5e4;
1333
+ }
1334
+ .livestream-dark .mml-card-body {
1335
+ border-color: #081e58;
1336
+ }
1337
+ .messaging-light .mml-card-body {
1338
+ border-color: #d6d6d6;
1339
+ }
1340
+ .messaging-dark .mml-card-body {
1341
+ border-color: #252628;
1342
+ }
1343
+ .team-light .mml-card-body {
1344
+ border-color: #eaeaea;
1345
+ }
1346
+ .team-dark .mml-card-body {
1347
+ border-color: #4e00cc;
1348
+ }
1349
+ .base-dark .mml-card-body {
1350
+ background: #0e1723;
1351
+ }
1352
+ .commerce-light .mml-card-body {
1353
+ background: #f5f9ff;
1354
+ }
1355
+ .commerce-dark .mml-card-body {
1356
+ background: #0c0e12;
1357
+ }
1358
+ .livestream-light .mml-card-body {
1359
+ background: #f1faff;
1360
+ }
1361
+ .livestream-dark .mml-card-body {
1362
+ background: #00091f;
1363
+ }
1364
+ .messaging-light .mml-card-body {
1365
+ background: #f7f7f8;
1366
+ }
1367
+ .messaging-dark .mml-card-body {
1368
+ background: #2d2e2f;
1369
+ }
1370
+ .team-light .mml-card-body {
1371
+ background: #f9f5ff;
1372
+ }
1373
+ .team-dark .mml-card-body {
1374
+ background: #0f0c12;
1375
+ }
1376
+ .base-dark .mml-card-body {
1377
+ color: #fff;
1378
+ }
1379
+ .commerce-light .mml-card-body {
1380
+ color: #202a3c;
1381
+ }
1382
+ .commerce-dark .mml-card-body {
1383
+ color: #e2e5e9;
1384
+ }
1385
+ .livestream-light .mml-card-body {
1386
+ color: #2c2c30;
1387
+ }
1388
+ .livestream-dark .mml-card-body {
1389
+ color: #fff;
1390
+ }
1391
+ .messaging-light .mml-card-body {
1392
+ color: #0e1621;
1393
+ }
1394
+ .messaging-dark .mml-card-body {
1395
+ color: #e8e8e9;
1396
+ }
1397
+ .team-light .mml-card-body {
1398
+ color: #2e2c30;
1399
+ }
1400
+ .team-dark .mml-card-body {
1401
+ color: #e5e2e9;
1402
+ }
1403
+ .mml-card-body > .mml-md,
1404
+ .mml-card-body > .mml-text {
1405
+ padding: 0 8px 8px;
1406
+ }
1407
+ .mml-card-body > .mml-md:first-of-type,
1408
+ .mml-card-body > .mml-text:first-of-type {
1409
+ padding-top: 8px;
1410
+ }
1411
+ .mml-card-header {
1412
+ display: flex;
1413
+ align-items: center;
1414
+ min-width: 100%;
1415
+ padding: 15px 0;
1416
+ font-size: 13px;
1417
+ background: #f2f2f2;
1418
+ color: #8a898e;
1419
+ border-top-left-radius: 16px;
1420
+ border-top-right-radius: 16px;
1421
+ border: 1px solid #e5e5e6;
1422
+ }
1423
+ .base-dark .mml-card-header {
1424
+ background: #152438;
1425
+ }
1426
+ .commerce-light .mml-card-header {
1427
+ background: #fff;
1428
+ }
1429
+ .commerce-dark .mml-card-header {
1430
+ background: #1c1f27;
1431
+ }
1432
+ .livestream-light .mml-card-header {
1433
+ background: #fff;
1434
+ }
1435
+ .livestream-dark .mml-card-header {
1436
+ background: #010c29;
1437
+ }
1438
+ .messaging-light .mml-card-header {
1439
+ background: #fff;
1440
+ }
1441
+ .messaging-dark .mml-card-header {
1442
+ background: #3e4042;
1443
+ }
1444
+ .team-light .mml-card-header {
1445
+ background: #fff;
1446
+ }
1447
+ .team-dark .mml-card-header {
1448
+ background: #201c27;
1449
+ }
1450
+ .base-dark .mml-card-header {
1451
+ color: #868b91;
1452
+ }
1453
+ .commerce-light .mml-card-header {
1454
+ color: #6c7a93;
1455
+ }
1456
+ .commerce-dark .mml-card-header {
1457
+ color: #afc0df;
1458
+ }
1459
+ .livestream-light .mml-card-header {
1460
+ color: #7ba0bb;
1461
+ }
1462
+ .livestream-dark .mml-card-header {
1463
+ color: #7889b6;
1464
+ }
1465
+ .messaging-light .mml-card-header {
1466
+ color: #8c8c8c;
1467
+ }
1468
+ .messaging-dark .mml-card-header {
1469
+ color: #898a8b;
1470
+ }
1471
+ .team-light .mml-card-header {
1472
+ color: #7c61a8;
1473
+ }
1474
+ .team-dark .mml-card-header {
1475
+ color: #c1afdf;
1476
+ }
1477
+ .base-dark .mml-card-header {
1478
+ border-color: #1b2d46;
1479
+ }
1480
+ .commerce-light .mml-card-header {
1481
+ border-color: #eaeaea;
1482
+ }
1483
+ .commerce-dark .mml-card-header {
1484
+ border-color: #004ccc;
1485
+ }
1486
+ .livestream-light .mml-card-header {
1487
+ border-color: #bed5e4;
1488
+ }
1489
+ .livestream-dark .mml-card-header {
1490
+ border-color: #081e58;
1491
+ }
1492
+ .messaging-light .mml-card-header {
1493
+ border-color: #d6d6d6;
1494
+ }
1495
+ .messaging-dark .mml-card-header {
1496
+ border-color: #252628;
1497
+ }
1498
+ .team-light .mml-card-header {
1499
+ border-color: #eaeaea;
1500
+ }
1501
+ .team-dark .mml-card-header {
1502
+ border-color: #4e00cc;
1503
+ }
1504
+ .mml-card-header .mml-icon {
1505
+ padding-left: 16px;
1506
+ margin-right: -8px;
1507
+ }
1508
+ .mml-card-header__text {
1509
+ padding: 0 16px;
1510
+ font-weight: 700;
1511
+ }
1512
+ .mml-datepicker {
1513
+ flex: 1;
1514
+ display: flex;
1515
+ }
1516
+ .mml-datepicker__select {
1517
+ flex: 1;
1518
+ }
1519
+ .mml-datepicker__select > div {
1520
+ overflow-y: scroll;
1521
+ scrollbar-width: none;
1522
+ overflow: -moz-scrollbars-none;
1523
+ -ms-overflow-style: none;
1524
+ }
1525
+ .mml-datepicker__select > div::-webkit-scrollbar {
1526
+ display: none;
1527
+ }
1528
+ .mml-datepicker__item {
1529
+ padding: 4px 5px;
1530
+ white-space: nowrap;
1531
+ cursor: pointer;
1532
+ -webkit-user-select: none;
1533
+ -moz-user-select: none;
1534
+ -ms-user-select: none;
1535
+ user-select: none;
1536
+ }
1537
+ .mml-datepicker__item--selected {
1538
+ color: #006cff;
1539
+ font-weight: 700;
1540
+ }
1541
+ .base-dark .mml-datepicker__item--selected {
1542
+ color: #006cff;
1543
+ }
1544
+ .commerce-light .mml-datepicker__item--selected {
1545
+ color: #005fff;
1546
+ }
1547
+ .commerce-dark .mml-datepicker__item--selected {
1548
+ color: #004ccc;
1549
+ }
1550
+ .livestream-light .mml-datepicker__item--selected {
1551
+ color: #19a0ff;
1552
+ }
1553
+ .livestream-dark .mml-datepicker__item--selected {
1554
+ color: #0d47d9;
1555
+ }
1556
+ .messaging-dark .mml-datepicker__item--selected,
1557
+ .messaging-light .mml-datepicker__item--selected {
1558
+ color: #0283ff;
1559
+ }
1560
+ .team-light .mml-datepicker__item--selected {
1561
+ color: #4e1d9d;
1562
+ }
1563
+ .team-dark .mml-datepicker__item--selected {
1564
+ color: #5d02f0;
1565
+ }
1566
+ .mml-datepicker--double .mml-datepicker__date {
1567
+ text-align: right;
1568
+ }
1569
+ .mml-datepicker--single .mml-datepicker__select {
1570
+ text-align: center;
1571
+ }
1572
+ .mml-scheduler .mml-datepicker {
1573
+ height: 217px;
1574
+ background: #fff;
1575
+ }
1576
+ .base-dark .mml-scheduler .mml-datepicker {
1577
+ background: #0e1723;
1578
+ }
1579
+ .commerce-light .mml-scheduler .mml-datepicker {
1580
+ background: #f5f9ff;
1581
+ }
1582
+ .commerce-dark .mml-scheduler .mml-datepicker {
1583
+ background: #0c0e12;
1584
+ }
1585
+ .livestream-light .mml-scheduler .mml-datepicker {
1586
+ background: #f1faff;
1587
+ }
1588
+ .livestream-dark .mml-scheduler .mml-datepicker {
1589
+ background: #00091f;
1590
+ }
1591
+ .messaging-light .mml-scheduler .mml-datepicker {
1592
+ background: #f7f7f8;
1593
+ }
1594
+ .messaging-dark .mml-scheduler .mml-datepicker {
1595
+ background: #2d2e2f;
1596
+ }
1597
+ .team-light .mml-scheduler .mml-datepicker {
1598
+ background: #f9f5ff;
1599
+ }
1600
+ .team-dark .mml-scheduler .mml-datepicker {
1601
+ background: #0f0c12;
1602
+ }
1603
+ .mml-scheduler .mml-datepicker__select {
1604
+ position: relative;
1605
+ }
1606
+ .mml-scheduler .mml-datepicker__select:after,
1607
+ .mml-scheduler .mml-datepicker__select:before {
1608
+ content: '';
1609
+ z-index: 1;
1610
+ position: absolute;
1611
+ left: 0;
1612
+ right: 0;
1613
+ height: 10%;
1614
+ min-height: 60px;
1615
+ pointer-events: none;
1616
+ }
1617
+ .mml-scheduler .mml-datepicker__select:before {
1618
+ top: 0;
1619
+ background-image: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0));
1620
+ }
1621
+ .base-dark .mml-scheduler .mml-datepicker__select:before {
1622
+ background-image: linear-gradient(180deg, #0e1723, hsla(0, 0%, 100%, 0));
1623
+ }
1624
+ .commerce-light .mml-scheduler .mml-datepicker__select:before {
1625
+ background-image: linear-gradient(180deg, #f5f9ff, hsla(0, 0%, 100%, 0));
1626
+ }
1627
+ .commerce-dark .mml-scheduler .mml-datepicker__select:before {
1628
+ background-image: linear-gradient(180deg, #0c0e12, hsla(0, 0%, 100%, 0));
1629
+ }
1630
+ .livestream-light .mml-scheduler .mml-datepicker__select:before {
1631
+ background-image: linear-gradient(180deg, #f1faff, hsla(0, 0%, 100%, 0));
1632
+ }
1633
+ .livestream-dark .mml-scheduler .mml-datepicker__select:before {
1634
+ background-image: linear-gradient(180deg, #00091f, hsla(0, 0%, 100%, 0));
1635
+ }
1636
+ .messaging-light .mml-scheduler .mml-datepicker__select:before {
1637
+ background-image: linear-gradient(180deg, #f7f7f8, hsla(0, 0%, 100%, 0));
1638
+ }
1639
+ .messaging-dark .mml-scheduler .mml-datepicker__select:before {
1640
+ background-image: linear-gradient(180deg, #2d2e2f, hsla(0, 0%, 100%, 0));
1641
+ }
1642
+ .team-light .mml-scheduler .mml-datepicker__select:before {
1643
+ background-image: linear-gradient(180deg, #f9f5ff, hsla(0, 0%, 100%, 0));
1644
+ }
1645
+ .team-dark .mml-scheduler .mml-datepicker__select:before {
1646
+ background-image: linear-gradient(180deg, #0f0c12, hsla(0, 0%, 100%, 0));
1647
+ }
1648
+ .mml-scheduler .mml-datepicker__select:after {
1649
+ bottom: 0;
1650
+ background-image: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, 0));
1651
+ }
1652
+ .base-dark .mml-scheduler .mml-datepicker__select:after {
1653
+ background-image: linear-gradient(0deg, #0e1723, hsla(0, 0%, 100%, 0));
1654
+ }
1655
+ .commerce-light .mml-scheduler .mml-datepicker__select:after {
1656
+ background-image: linear-gradient(0deg, #f5f9ff, hsla(0, 0%, 100%, 0));
1657
+ }
1658
+ .commerce-dark .mml-scheduler .mml-datepicker__select:after {
1659
+ background-image: linear-gradient(0deg, #0c0e12, hsla(0, 0%, 100%, 0));
1660
+ }
1661
+ .livestream-light .mml-scheduler .mml-datepicker__select:after {
1662
+ background-image: linear-gradient(0deg, #f1faff, hsla(0, 0%, 100%, 0));
1663
+ }
1664
+ .livestream-dark .mml-scheduler .mml-datepicker__select:after {
1665
+ background-image: linear-gradient(0deg, #00091f, hsla(0, 0%, 100%, 0));
1666
+ }
1667
+ .messaging-light .mml-scheduler .mml-datepicker__select:after {
1668
+ background-image: linear-gradient(0deg, #f7f7f8, hsla(0, 0%, 100%, 0));
1669
+ }
1670
+ .messaging-dark .mml-scheduler .mml-datepicker__select:after {
1671
+ background-image: linear-gradient(0deg, #2d2e2f, hsla(0, 0%, 100%, 0));
1672
+ }
1673
+ .team-light .mml-scheduler .mml-datepicker__select:after {
1674
+ background-image: linear-gradient(0deg, #f9f5ff, hsla(0, 0%, 100%, 0));
1675
+ }
1676
+ .team-dark .mml-scheduler .mml-datepicker__select:after {
1677
+ background-image: linear-gradient(0deg, #0f0c12, hsla(0, 0%, 100%, 0));
1678
+ }
1679
+ .mml-success {
1680
+ display: flex;
1681
+ justify-content: center;
1682
+ padding: 8px;
1683
+ font-size: 88%;
1684
+ }
1685
+ .base-dark .mml-success,
1686
+ .mml-success {
1687
+ color: #006cff;
1688
+ }
1689
+ .commerce-light .mml-success {
1690
+ color: #005fff;
1691
+ }
1692
+ .commerce-dark .mml-success {
1693
+ color: #004ccc;
1694
+ }
1695
+ .livestream-light .mml-success {
1696
+ color: #19a0ff;
1697
+ }
1698
+ .livestream-dark .mml-success {
1699
+ color: #0d47d9;
1700
+ }
1701
+ .messaging-dark .mml-success,
1702
+ .messaging-light .mml-success {
1703
+ color: #0283ff;
1704
+ }
1705
+ .team-light .mml-success {
1706
+ color: #4e1d9d;
1707
+ }
1708
+ .team-dark .mml-success {
1709
+ color: #5d02f0;
1710
+ }
1711
+ .mml-text {
1712
+ padding: 2px 0;
1713
+ color: #0e1621;
1714
+ }
1715
+ .base-dark .mml-text {
1716
+ color: #fff;
1717
+ }
1718
+ .commerce-light .mml-text {
1719
+ color: #202a3c;
1720
+ }
1721
+ .commerce-dark .mml-text {
1722
+ color: #e2e5e9;
1723
+ }
1724
+ .livestream-light .mml-text {
1725
+ color: #2c2c30;
1726
+ }
1727
+ .livestream-dark .mml-text {
1728
+ color: #fff;
1729
+ }
1730
+ .messaging-light .mml-text {
1731
+ color: #0e1621;
1732
+ }
1733
+ .messaging-dark .mml-text {
1734
+ color: #e8e8e9;
1735
+ }
1736
+ .team-light .mml-text {
1737
+ color: #2e2c30;
1738
+ }
1739
+ .team-dark .mml-text {
1740
+ color: #e5e2e9;
1741
+ }
1742
+ .mml-text + .mml-md,
1743
+ .mml-text + .mml-text {
1744
+ padding-top: 2px;
1745
+ }
1746
+ .mml-text + .mml-btnlist,
1747
+ .mml-text + .mml-image {
1748
+ margin-top: 4px;
1749
+ }