@intellias/menu 1.1.55 → 2.0.0

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.
package/dist/css/main.css CHANGED
@@ -1,6 +1,50 @@
1
1
  @import url(https://fonts.googleapis.com/css?family=Play:400,700&display=swap);
2
2
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap);
3
3
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap);
4
+ .modal-wrapper[data-v-47941d80] {
5
+ padding-bottom: 1rem;
6
+ border-radius: 6px !important;
7
+ background-color: #ffffff;
8
+ box-shadow: 0 15px 30px rgba(37, 55, 70, 0.202715);
9
+ }
10
+ .modal-header[data-v-47941d80] {
11
+ display: flex;
12
+ justify-content: space-between;
13
+ padding: 2rem 2rem 1rem 2rem;
14
+ font-size: 1.25rem;
15
+ font-weight: bold;
16
+ color: #1a2732 !important;
17
+ }
18
+ .modal-header.dark[data-v-47941d80] {
19
+ color: #ffffff !important;
20
+ }
21
+ .modal-header.dark i.icon[data-v-47941d80]:before {
22
+ background-color: #ffffff !important;
23
+ }
24
+ .modal-header i.icon[data-v-47941d80]:before {
25
+ background-color: #1a2732 !important;
26
+ }
27
+ .modal-content[data-v-47941d80] {
28
+ padding: 1rem 2rem;
29
+ }
30
+ .modal-close[data-v-47941d80] {
31
+ width: 15px !important;
32
+ min-width: 15px;
33
+ height: 15px !important;
34
+ cursor: pointer;
35
+ }
36
+ .modal-footer[data-v-47941d80] {
37
+ display: flex;
38
+ justify-content: flex-end;
39
+ padding: 1rem 2rem;
40
+ }
41
+ .modal-footer .btn[data-v-47941d80]:not(:first-child) {
42
+ margin-left: 1rem;
43
+ }
44
+ .vm--overlay[data-v-47941d80] {
45
+ background-color: rgba(37, 55, 70, 0.55) !important;
46
+ transition: 0.3s !important;
47
+ }
4
48
  .action-button.is-btn-link[data-v-4bad7ad2] {
5
49
  padding: 0;
6
50
  border: 0;
@@ -114,208 +158,211 @@
114
158
  transform: rotate(360deg);
115
159
  }
116
160
  }
117
- .progress[data-v-92cd54c2] {
118
- margin: 0;
119
- position: absolute;
120
- visibility: hidden;
121
- opacity: 0;
122
- transition: opacity 1.5s, visibility 1.5s;
161
+ .secondary-button[data-v-ab516b6a] {
162
+ position: relative;
163
+ text-overflow: ellipsis;
164
+ overflow: hidden;
165
+ white-space: nowrap;
166
+ color: #1a2732;
167
+ text-transform: initial;
168
+ border-radius: 4px;
169
+ font-weight: 600;
170
+ line-height: 38px;
171
+ display: flex;
172
+ align-items: center;
123
173
  }
124
- .progress .determinate[data-v-92cd54c2] {
125
- background-color: #00a58e;
174
+ .secondary-button.dark[data-v-ab516b6a] {
175
+ height: 40px;
176
+ padding: 0 var(--spacing-16);
177
+ background: var(--surface-primary);
178
+ color: var(--text-primary);
179
+ text-decoration: none;
180
+ border-radius: var(--border-radius-6);
181
+ border: solid var(--border) 1px;
182
+ font-size: var(--font-size-14);
183
+ line-height: var(--line-height-24);
184
+ transition: 0.3s;
126
185
  }
127
- .progress.show[data-v-92cd54c2] {
128
- visibility: visible;
129
- opacity: 1;
130
- transition: visibility 0s;
186
+ .secondary-button.dark[data-v-ab516b6a]:hover {
187
+ background: var(--surface-tertiary);
188
+ border-color: var(--border);
131
189
  }
132
- .preloader {
133
- display: flex;
134
- align-items: center;
135
- justify-content: center;
190
+ .secondary-button i.icon[data-v-ab516b6a] {
191
+ vertical-align: middle;
136
192
  }
137
- .notifications-sidebar {
138
- position: relative;
193
+ .secondary-button .spinner-solid[data-v-ab516b6a] {
139
194
  color: #1a2732;
195
+ animation: spin-ab516b6a 2s linear infinite;
196
+ vertical-align: middle;
197
+ transition: width 300ms, height 300ms;
198
+ margin-left: 8px;
140
199
  }
141
- .notifications-sidebar.dark .v-dropdown-menu__container {
142
- background-color: #253746;
200
+ .secondary-button .left-icon[data-v-ab516b6a] {
201
+ margin-right: 4px;
202
+ }
203
+ .secondary-button.disabled[data-v-ab516b6a], .secondary-button.btn-secondary[data-v-ab516b6a]:disabled, .secondary-button.btn[disabled][data-v-ab516b6a] {
204
+ background-color: #f1f5f9 !important;
143
205
  color: #94a3b8;
144
- border: 1px #475569 solid;
145
- box-shadow: 0 2px 2px 0 rgba(15, 19, 23, 0.55), 0 3px 1px -2px rgba(15, 19, 23, 0.55), 0 1px 5px 0 rgba(15, 19, 23, 0.55);
146
206
  }
147
- .notifications-sidebar.dark .v-dropdown-menu__container .primary-text {
148
- color: #f8fafc;
207
+ .secondary-button.disabled .spinner-solid[data-v-ab516b6a], .secondary-button.btn-secondary:disabled .spinner-solid[data-v-ab516b6a], .secondary-button.btn[disabled] .spinner-solid[data-v-ab516b6a] {
208
+ color: #94a3b8 !important;
149
209
  }
150
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header {
151
- position: relative;
152
- z-index: 1001;
153
- background-color: #253746;
210
+ @keyframes spin-ab516b6a {
211
+ 100% {
212
+ transform: rotate(360deg);
154
213
  }
155
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row {
156
- border-bottom: 1px #475569 solid;
157
214
  }
158
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu {
159
- background-color: #253746;
160
- border: 1px #475569 solid;
161
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
215
+ .play-pause {
216
+ margin-left: 20px;
162
217
  }
163
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li:hover:not(.is-disabled) {
164
- background-color: #275b57;
218
+ @media only screen and (max-width : 600px) {
219
+ .play-pause {
220
+ margin-left: 8px;
165
221
  }
166
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a {
167
- color: #f8fafc;
168
222
  }
169
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a:hover:not(.is-disabled) {
170
- background-color: #275b57;
223
+ .play-pause-btn {
224
+ display: flex;
225
+ justify-content: center;
226
+ align-items: center;
227
+ width: 40px;
228
+ height: 40px;
229
+ border-radius: 100%;
230
+ cursor: pointer;
171
231
  }
172
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body {
173
- background-color: #253746;
232
+ .play-pause-btn .icon {
233
+ width: 40px;
234
+ height: 40px;
174
235
  }
175
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs {
176
- background-color: #253746;
177
- border-bottom: 1px #475569 solid;
178
- box-shadow: 0 12px 8px -8px rgba(15, 19, 23, 0.55) !important;
179
- z-index: 1000;
236
+ .play-pause-btn .icon.spinner-solid {
237
+ width: 24px;
238
+ height: 24px;
239
+ animation: spin 1s linear infinite;
180
240
  }
181
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs .indicator {
182
- background-color: #45d6ad;
241
+ #modalTracked {
242
+ color: #253746;
183
243
  }
184
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab {
185
- color: #94a3b8;
244
+ #modalTracked.dark {
245
+ color: #ffffff !important;
186
246
  }
187
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab .counter {
188
- color: #253746;
247
+ #modalTracked.dark i.icon:before {
248
+ background-color: #ffffff !important;
189
249
  }
190
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab.active, .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab:hover {
191
- color: #f8fafc;
250
+ #modalTracked .modal-content #tracked-content {
251
+ display: flex;
252
+ align-items: center;
192
253
  }
193
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list {
194
- border-top: 1px #475569 solid;
254
+ #modalTracked .modal-content #tracked-content p {
255
+ margin: 0;
256
+ line-height: initial;
195
257
  }
196
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note {
197
- background-color: #253746;
198
- border-bottom: 1px #475569 solid;
258
+ #modalTracked .modal-content #span-clock {
259
+ margin-right: 10px;
199
260
  }
200
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification i.icon:not(.original):before {
201
- background-image: none;
202
- -webkit-mask-size: cover;
203
- mask-size: cover;
204
- -webkit-mask-repeat: no-repeat;
205
- mask-repeat: no-repeat;
206
- background-color: #94a3b8;
261
+ #modalTracked .modal-content #span-clock i {
262
+ font-size: 54px;
207
263
  }
208
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note a {
209
- color: #45d6ad;
264
+ #modalTracked .modal-footer .action-button {
265
+ margin-left: 15px;
210
266
  }
211
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .time-ago {
212
- color: #94a3b8;
267
+ @keyframes spin {
268
+ 100% {
269
+ transform: rotate(360deg);
213
270
  }
214
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .row {
215
- background-color: #253746;
216
271
  }
217
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note.read {
218
- background-color: #1a2732;
272
+ .progress[data-v-92cd54c2] {
273
+ margin: 0;
274
+ position: absolute;
275
+ visibility: hidden;
276
+ opacity: 0;
277
+ transition: opacity 1.5s, visibility 1.5s;
219
278
  }
220
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note.read .row {
221
- background-color: #1a2732;
279
+ .progress .determinate[data-v-92cd54c2] {
280
+ background-color: #00a58e;
222
281
  }
223
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .span-text {
224
- color: #45d6ad;
282
+ .progress.show[data-v-92cd54c2] {
283
+ visibility: visible;
284
+ opacity: 1;
285
+ transition: visibility 0s;
225
286
  }
226
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown > row {
227
- background-color: #253746;
287
+ .preloader {
288
+ display: flex;
289
+ align-items: center;
290
+ justify-content: center;
228
291
  }
229
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .view-all-row {
230
- border-top: 1px #475569 solid;
292
+ .notifications-sidebar {
293
+ position: relative;
294
+ display: flex;
295
+ align-items: center;
231
296
  }
232
- .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .view-all-row .action-button.is-link {
233
- color: #45d6ad;
297
+ .notifications-sidebar .notifications-trigger {
298
+ display: flex;
299
+ transition: 0.3s;
234
300
  }
235
- .notifications-sidebar .row {
236
- margin-bottom: 0;
237
- box-sizing: inherit;
301
+ .notifications-sidebar .notifications-trigger .icon.bell {
302
+ width: 18px;
303
+ height: 20px;
304
+ }
305
+ .notifications-sidebar .notifications-trigger:hover {
306
+ color: #00a58e;
307
+ }
308
+ .notifications-sidebar .notifications-trigger:hover .icon {
309
+ color: #00a58e;
238
310
  }
239
311
  .notifications-sidebar .row .col {
240
312
  padding: 0 0.75rem;
241
313
  }
314
+ .notifications-sidebar .row .col > .icon:before {
315
+ background-color: #45d6ad;
316
+ }
242
317
  .notifications-sidebar .col .row {
243
318
  margin-left: -0.75rem;
244
319
  margin-right: -0.75rem;
245
320
  }
246
321
  .notifications-sidebar .v-dropdown-menu__container {
247
- width: -moz-fit-content;
248
- width: fit-content;
322
+ top: calc(100% + 23px);
323
+ left: -12px;
249
324
  max-width: none;
250
- min-width: none;
251
325
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
252
326
  }
253
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row {
254
- border-bottom: 1px #cbd5e1 solid;
255
- padding: 0 3px 0 13px;
256
- margin-bottom: 10px;
257
- display: flex;
258
- align-items: center;
259
- justify-content: space-between;
260
- }
261
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s10 {
262
- height: 50px;
263
- line-height: 50px;
264
- font-weight: bold;
327
+ @media only screen and (max-width : 600px) {
328
+ .notifications-sidebar .v-dropdown-menu__container {
329
+ left: -24px;
265
330
  }
266
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s8 {
267
- height: 50px;
268
- line-height: 50px;
269
- margin-left: 0;
270
- font-weight: bold;
271
331
  }
272
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 {
273
- height: 50px;
274
- line-height: 50px;
275
- margin-left: 5px;
332
+ .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row {
276
333
  display: flex;
277
- align-items: center;
278
- padding: 0 30px 0 0;
334
+ justify-content: space-between;
335
+ padding: 0 3px 0 13px;
336
+ margin-bottom: 0;
337
+ border-bottom: 1px #cbd5e1 solid;
279
338
  }
280
339
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 .notifications-state-marker .v-dropdown-menu__container {
281
- top: 43px;
282
- height: 75px;
340
+ top: 45px;
283
341
  }
284
342
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 .notifications-state-marker .notification-manage-toggler {
285
- position: relative;
286
343
  display: flex;
287
- flex-wrap: wrap;
288
344
  flex-direction: column;
289
345
  justify-content: center;
290
346
  width: 20px;
291
347
  height: 64px;
292
- line-height: 64px;
293
- cursor: pointer;
294
348
  }
295
349
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 .notifications-state-marker .notification-manage-toggler span {
296
- background-color: #94a3b8;
350
+ display: inline-block;
297
351
  width: 4px;
298
352
  height: 4px;
299
- display: inline-block;
300
353
  border-radius: 50%;
301
354
  margin: 1px auto;
355
+ background-color: #94a3b8;
302
356
  }
303
357
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu {
304
- border: 1px #cbd5e1 solid;
305
- border-radius: 2px;
306
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
307
- padding-left: 0px;
308
- }
309
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li {
310
- min-height: 30px;
311
- line-height: 30px;
312
- width: 100%;
313
- display: block;
358
+ margin: 0;
314
359
  }
315
360
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li:hover:not(.is-disabled), .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li:active:not(.is-disabled) {
316
361
  background-color: #c2e9e4;
317
362
  }
318
363
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a {
364
+ display: inline-block;
365
+ width: 100%;
319
366
  color: #1a2732;
320
367
  font-size: 14px;
321
368
  font-weight: 400;
@@ -335,52 +382,35 @@
335
382
  }
336
383
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown {
337
384
  width: 370px;
338
- height: auto !important;
339
- transform: none !important;
340
- }
341
- @media only screen and (max-width : 600px) {
342
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown {
343
- position: fixed;
344
- width: 100% !important;
345
385
  }
386
+ .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .row {
387
+ margin-bottom: 0;
346
388
  }
347
389
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs {
348
- height: 38px;
349
- line-height: 24px;
350
- padding-left: 0;
351
- list-style-type: none;
352
390
  position: relative;
353
- overflow-x: hidden;
354
- overflow-y: hidden;
355
- width: 100%;
356
- background-color: #ffffff;
357
- margin: 0 auto;
358
- white-space: nowrap;
391
+ height: 48px;
359
392
  border-bottom: 1px #cbd5e1 solid;
393
+ background-color: #ffffff;
394
+ box-shadow: none;
395
+ line-height: normal;
360
396
  }
361
397
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button {
362
- clear: inherit;
363
- min-height: auto;
364
398
  width: 50%;
365
- line-height: 28px;
366
- background-color: #ffffff;
367
399
  border: none;
400
+ background: none;
368
401
  cursor: pointer;
369
402
  }
370
403
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab {
371
- height: 100%;
372
- display: inline-block;
373
- text-align: center;
374
- padding: 0;
375
- margin: 0;
404
+ height: auto;
405
+ padding: 0 10px;
406
+ margin-top: 18px;
376
407
  font-size: 0.8rem;
377
408
  text-transform: initial;
378
- padding: 0px 10px;
379
409
  color: #64748b;
410
+ line-height: normal;
380
411
  background-color: inherit;
381
412
  }
382
413
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab.active, .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:focus, .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:hover, .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:focus.active {
383
- background-color: inherit;
384
414
  color: #1a2732;
385
415
  }
386
416
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab.active {
@@ -388,7 +418,6 @@
388
418
  }
389
419
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab .counter {
390
420
  font-weight: bold;
391
- text-align: center;
392
421
  font-size: 0.67rem;
393
422
  border-radius: 10px;
394
423
  padding: 2px 6px;
@@ -396,39 +425,23 @@
396
425
  background-color: #ff8041;
397
426
  margin-left: 4px;
398
427
  }
399
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:focus, .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs button.tab:hover {
400
- background-color: inherit;
401
- }
402
428
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .default-tabs .indicator {
403
429
  background-color: #00a58e;
404
430
  margin: 0 25px;
405
- width: initial;
406
- height: 3px;
407
431
  width: 140px !important;
408
432
  position: absolute;
409
433
  bottom: 0;
410
434
  height: 2px;
411
- will-change: left, right;
412
- transition: background-color 0.3s;
413
435
  transition: transform 0.4s ease, width 0.4s ease;
414
436
  }
415
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content {
416
- padding: 0;
417
- margin-left: 0;
418
- width: 100%;
419
- height: -moz-fit-content;
420
- height: fit-content;
421
- }
422
437
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list {
423
- overflow-y: hidden;
424
- box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 0.12);
425
- border-top: 1px #cbd5e1 solid;
438
+ margin-bottom: 0;
426
439
  line-height: 18px;
427
440
  }
428
441
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content {
429
- min-height: 120px;
430
- max-height: 70vh;
431
442
  width: 100%;
443
+ min-height: 120px;
444
+ max-height: calc(100vh - 275px);
432
445
  }
433
446
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .preloader {
434
447
  display: flex;
@@ -439,25 +452,11 @@
439
452
  height: 80px;
440
453
  }
441
454
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note {
442
- border-bottom: 1px #cbd5e1 solid;
443
455
  padding: 20px 25px;
444
456
  margin: 0 -0.75rem;
445
457
  }
446
458
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note:hover .manage-notification {
447
- display: inline-block;
448
- }
449
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification i.icon:not(.original):before {
450
- background-image: none;
451
- -webkit-mask-size: cover;
452
- mask-size: cover;
453
- -webkit-mask-repeat: no-repeat;
454
- mask-repeat: no-repeat;
455
- background-color: #94a3b8;
456
- }
457
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .semi-primary-text {
458
- font-size: 14px;
459
- line-height: 1.25;
460
- font-weight: normal;
459
+ opacity: 1;
461
460
  }
462
461
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .semi-primary-text b a {
463
462
  font-weight: 700;
@@ -471,30 +470,13 @@
471
470
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note:not(.read) {
472
471
  border-left: 3px solid #ff8041;
473
472
  }
474
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .row {
475
- position: relative;
476
- display: flex;
477
- }
478
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note:last-child {
479
- border-bottom: none;
480
- }
481
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note i.category-icon {
482
- width: 28px;
483
- height: 28px !important;
484
- }
485
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .new-notification {
486
- position: absolute;
487
- width: 9px;
488
- height: 9px;
489
- border-radius: 5px;
490
- background-color: #ff8041;
491
- top: 0;
492
- right: 10px;
473
+ .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note:not(:first-child) {
474
+ border-top: 1px #cbd5e1 solid;
493
475
  }
494
476
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification {
495
477
  position: absolute;
496
- right: 0px;
497
- display: none;
478
+ right: 16px;
479
+ opacity: 0;
498
480
  }
499
481
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification i {
500
482
  height: 16px;
@@ -512,27 +494,12 @@
512
494
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .manage-notification i.delete:hover:before {
513
495
  background-color: #da1e28 !important;
514
496
  }
515
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .reject-color {
516
- color: #da1e28;
517
- }
518
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .reject-color .span-text {
519
- color: #da1e28;
520
- }
521
497
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .note-title-col {
522
498
  max-width: 70%;
523
499
  padding-left: 4px;
524
500
  }
525
- .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .note-title-col .text-muted {
526
- font-size: 12px;
527
- color: #64748b;
528
- }
529
501
  .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .action-buttons {
530
- height: 21px;
531
- }
532
- .notifications-sidebar .notifications-trigger {
533
- display: inline-block;
534
- height: 58px;
535
- font-size: 1.2rem;
502
+ height: 20px;
536
503
  }
537
504
  .notifications-sidebar a {
538
505
  color: #00a58e;
@@ -540,35 +507,22 @@
540
507
  padding: 0;
541
508
  font-size: inherit;
542
509
  }
543
- .notifications-sidebar a:hover {
544
- background-color: initial;
545
- }
546
- .notifications-sidebar .primary-text {
547
- font-size: 14px !important;
548
- line-height: 1.29;
549
- font-weight: bold;
550
- }
551
510
  .notifications-sidebar .view-all-row {
552
511
  border-top: 1px #cbd5e1 solid;
553
- line-height: 49px;
512
+ line-height: 50px;
554
513
  }
555
514
  .notifications-sidebar .ps__rail-x {
556
515
  display: none !important;
557
516
  }
558
517
  .notifications-sidebar .has-unread {
559
- display: inline-block;
560
518
  position: absolute;
561
- top: 12px;
519
+ top: -6px;
520
+ right: -8px;
562
521
  height: 9px;
563
522
  width: 9px;
564
523
  border-radius: 50%;
565
524
  background-color: #ff8041;
566
525
  }
567
- @media only screen and (max-width : 430px) {
568
- .notifications-sidebar .has-unread {
569
- right: -10px;
570
- }
571
- }
572
526
  .notifications-sidebar .fade-enter-active,
573
527
  .notifications-sidebar .fade-leave-active {
574
528
  transition: opacity 0.5s;
@@ -577,340 +531,138 @@
577
531
  .notifications-sidebar .fade-leave-to {
578
532
  opacity: 0;
579
533
  }
580
- .bell-animation {
581
- -webkit-animation: ring 5.6s 0.5s ease-in-out infinite;
582
- -webkit-transform-origin: 50% 4px;
583
- -moz-animation: ring 5.6s 0.5s ease-in-out infinite;
584
- -moz-transform-origin: 50% 4px;
585
- animation: ring 5.6s 0.5s ease-in-out infinite;
586
- transform-origin: 50% 4px;
534
+ .notifications-sidebar.dark .v-dropdown-menu__container {
535
+ background-color: #253746;
536
+ color: #94a3b8;
537
+ border: 1px #475569 solid;
587
538
  }
588
- @keyframes ring {
589
- 0% {
590
- transform: rotate(0);
539
+ .notifications-sidebar.dark .v-dropdown-menu__container .primary-text {
540
+ color: #f8fafc;
591
541
  }
592
- 1% {
593
- transform: rotate(32deg);
542
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header {
543
+ position: relative;
544
+ z-index: 1001;
594
545
  }
595
- 3% {
596
- transform: rotate(-30deg);
546
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row {
547
+ border-bottom: 1px #475569 solid;
597
548
  }
598
- 5% {
599
- transform: rotate(42deg);
549
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu {
550
+ background-color: #253746;
551
+ border: 1px #475569 solid;
600
552
  }
601
- 7% {
602
- transform: rotate(-40deg);
553
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li:hover:not(.is-disabled) {
554
+ background-color: #275b57;
603
555
  }
604
- 9% {
605
- transform: rotate(36deg);
556
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a {
557
+ color: #f8fafc;
606
558
  }
607
- 11% {
608
- transform: rotate(-34deg);
559
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu li a:hover:not(.is-disabled) {
560
+ background-color: #275b57;
609
561
  }
610
- 13% {
611
- transform: rotate(32deg);
562
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs {
563
+ background-color: #253746;
564
+ border-bottom: 1px #475569 solid;
565
+ z-index: 1000;
612
566
  }
613
- 15% {
614
- transform: rotate(-30deg);
567
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs .indicator {
568
+ background-color: #45d6ad;
615
569
  }
616
- 17% {
617
- transform: rotate(30deg);
570
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab {
571
+ color: #94a3b8;
618
572
  }
619
- 19% {
620
- transform: rotate(-28deg);
573
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab .counter {
574
+ color: #253746;
621
575
  }
622
- 21% {
623
- transform: rotate(28deg);
576
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab.active, .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .tabs.default-tabs button.tab:hover {
577
+ color: #f8fafc;
624
578
  }
625
- 23% {
626
- transform: rotate(-26deg);
579
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note {
580
+ background-color: #253746;
581
+ border-bottom: 1px #475569 solid;
627
582
  }
628
- 25% {
629
- transform: rotate(26deg);
583
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note a {
584
+ color: #45d6ad;
630
585
  }
631
- 27% {
632
- transform: rotate(-24deg);
586
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .time-ago {
587
+ color: #94a3b8;
633
588
  }
634
- 29% {
635
- transform: rotate(24deg);
589
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note.read {
590
+ background-color: #1a2732;
636
591
  }
637
- 31% {
638
- transform: rotate(-22deg);
592
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note.read .row {
593
+ background-color: #1a2732;
639
594
  }
640
- 33% {
641
- transform: rotate(23deg);
595
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .notification-content .notifications-list .tab-content .note .span-text {
596
+ color: #45d6ad;
642
597
  }
643
- 35% {
644
- transform: rotate(-21deg);
598
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .view-all-row {
599
+ border-top: 1px #475569 solid;
645
600
  }
646
- 37% {
647
- transform: rotate(22deg);
601
+ .notifications-sidebar.dark .v-dropdown-menu__container .v-dropdown-menu__body .main-dropdown .view-all-row .action-button.is-link {
602
+ color: #45d6ad;
648
603
  }
649
- 39% {
650
- transform: rotate(-20deg);
604
+ .bell-animation {
605
+ -webkit-animation: ring 5.6s 0.5s ease-in-out infinite;
606
+ -webkit-transform-origin: 50% 4px;
607
+ -moz-animation: ring 5.6s 0.5s ease-in-out infinite;
608
+ -moz-transform-origin: 50% 4px;
609
+ animation: ring 5.6s 0.5s ease-in-out infinite;
610
+ transform-origin: 50% 4px;
651
611
  }
652
- 41% {
653
- transform: rotate(21deg);
612
+ .image-wrapper.sm[data-v-7393283b] {
613
+ width: 35px;
614
+ height: 35px;
654
615
  }
655
- 43% {
656
- transform: rotate(-19deg);
616
+ .image-wrapper.sm .user-image[data-v-7393283b] {
617
+ border: 1px solid #cbd5e1;
657
618
  }
658
- 45% {
659
- transform: rotate(18deg);
619
+ .image-wrapper.sm .user-image.anonymous[data-v-7393283b] {
620
+ font-size: 12px;
660
621
  }
661
- 47% {
662
- transform: rotate(-16deg);
622
+ .image-wrapper.sm .user-image.anonymous.dark[data-v-7393283b] {
623
+ background-color: var(--bg-primary);
624
+ color: var(--text-disable);
625
+ border: 1px solid var(--border);
663
626
  }
664
- 50% {
665
- transform: rotate(14deg);
627
+ .image-wrapper.md[data-v-7393283b] {
628
+ height: 44px;
629
+ width: 44px;
666
630
  }
667
- 52% {
668
- transform: rotate(-12deg);
631
+ .image-wrapper.md .user-image[data-v-7393283b] {
632
+ border: 1px solid #cbd5e1;
669
633
  }
670
- 54% {
671
- transform: rotate(10deg);
634
+ .image-wrapper.md .user-image.anonymous[data-v-7393283b] {
635
+ font-size: 16px;
636
+ color: #94a3b8;
672
637
  }
673
- 56% {
674
- transform: rotate(-8deg);
638
+ .image-wrapper.md .user-image.anonymous.dark[data-v-7393283b] {
639
+ background-color: var(--bg-primary);
640
+ color: var(--text-disable);
641
+ border: 1px solid var(--border);
675
642
  }
676
- 58% {
677
- transform: rotate(6deg);
643
+ .image-wrapper.lg[data-v-7393283b] {
644
+ height: 96px;
645
+ width: 96px;
678
646
  }
679
- 60% {
680
- transform: rotate(-4deg);
647
+ .image-wrapper.xl[data-v-7393283b] {
648
+ height: 128px;
649
+ width: 128px;
681
650
  }
682
- 62% {
683
- transform: rotate(2deg);
651
+ .image-wrapper.xl .user-image.anonymous[data-v-7393283b] {
652
+ font-size: 50px;
653
+ color: #94a3b8;
684
654
  }
685
- 64% {
686
- transform: rotate(-1deg);
655
+ .image-wrapper.xl .user-image.anonymous.dark[data-v-7393283b] {
656
+ background-color: var(--bg-primary);
657
+ color: var(--text-disable);
658
+ border: 1px solid var(--border);
687
659
  }
688
- 66% {
689
- transform: rotate(1deg);
690
- }
691
- 70% {
692
- transform: rotate(0);
693
- }
694
- 100% {
695
- transform: rotate(0);
696
- }
697
- }
698
- .modal-wrapper[data-v-47941d80] {
699
- padding-bottom: 1rem;
700
- border-radius: 6px !important;
701
- background-color: #ffffff;
702
- box-shadow: 0 15px 30px rgba(37, 55, 70, 0.202715);
703
- }
704
- .modal-header[data-v-47941d80] {
705
- display: flex;
706
- justify-content: space-between;
707
- padding: 2rem 2rem 1rem 2rem;
708
- font-size: 1.25rem;
709
- font-weight: bold;
710
- color: #1a2732 !important;
711
- }
712
- .modal-header.dark[data-v-47941d80] {
713
- color: #ffffff !important;
714
- }
715
- .modal-header.dark i.icon[data-v-47941d80]:before {
716
- background-color: #ffffff !important;
717
- }
718
- .modal-header i.icon[data-v-47941d80]:before {
719
- background-color: #1a2732 !important;
720
- }
721
- .modal-content[data-v-47941d80] {
722
- padding: 1rem 2rem;
723
- }
724
- .modal-close[data-v-47941d80] {
725
- width: 15px !important;
726
- min-width: 15px;
727
- height: 15px !important;
728
- cursor: pointer;
729
- }
730
- .modal-footer[data-v-47941d80] {
731
- display: flex;
732
- justify-content: flex-end;
733
- padding: 1rem 2rem;
734
- }
735
- .modal-footer .btn[data-v-47941d80]:not(:first-child) {
736
- margin-left: 1rem;
737
- }
738
- .vm--overlay[data-v-47941d80] {
739
- background-color: rgba(37, 55, 70, 0.55) !important;
740
- transition: 0.3s !important;
741
- }
742
- .secondary-button[data-v-ab516b6a] {
743
- position: relative;
744
- text-overflow: ellipsis;
745
- overflow: hidden;
746
- white-space: nowrap;
747
- color: #1a2732;
748
- text-transform: initial;
749
- border-radius: 4px;
750
- font-weight: 600;
751
- line-height: 38px;
752
- display: flex;
753
- align-items: center;
754
- }
755
- .secondary-button.dark[data-v-ab516b6a] {
756
- height: 40px;
757
- padding: 0 var(--spacing-16);
758
- background: var(--surface-primary);
759
- color: var(--text-primary);
760
- text-decoration: none;
761
- border-radius: var(--border-radius-6);
762
- border: solid var(--border) 1px;
763
- font-size: var(--font-size-14);
764
- line-height: var(--line-height-24);
765
- transition: 0.3s;
766
- }
767
- .secondary-button.dark[data-v-ab516b6a]:hover {
768
- background: var(--surface-tertiary);
769
- border-color: var(--border);
770
- }
771
- .secondary-button i.icon[data-v-ab516b6a] {
772
- vertical-align: middle;
773
- }
774
- .secondary-button .spinner-solid[data-v-ab516b6a] {
775
- color: #1a2732;
776
- animation: spin-ab516b6a 2s linear infinite;
777
- vertical-align: middle;
778
- transition: width 300ms, height 300ms;
779
- margin-left: 8px;
780
- }
781
- .secondary-button .left-icon[data-v-ab516b6a] {
782
- margin-right: 4px;
783
- }
784
- .secondary-button.disabled[data-v-ab516b6a], .secondary-button.btn-secondary[data-v-ab516b6a]:disabled, .secondary-button.btn[disabled][data-v-ab516b6a] {
785
- background-color: #f1f5f9 !important;
786
- color: #94a3b8;
787
- }
788
- .secondary-button.disabled .spinner-solid[data-v-ab516b6a], .secondary-button.btn-secondary:disabled .spinner-solid[data-v-ab516b6a], .secondary-button.btn[disabled] .spinner-solid[data-v-ab516b6a] {
789
- color: #94a3b8 !important;
790
- }
791
- @keyframes spin-ab516b6a {
792
- 100% {
793
- transform: rotate(360deg);
794
- }
795
- }
796
- #modalTracked {
797
- color: #253746;
798
- }
799
- #modalTracked.dark {
800
- color: #ffffff !important;
801
- }
802
- #modalTracked.dark i.icon:before {
803
- background-color: #ffffff !important;
804
- }
805
- #modalTracked .modal-content #tracked-content {
806
- display: flex;
807
- align-items: center;
808
- }
809
- #modalTracked .modal-content #tracked-content p {
810
- margin: 0;
811
- line-height: initial;
812
- }
813
- #modalTracked .modal-content #span-clock {
814
- margin-right: 10px;
815
- }
816
- #modalTracked .modal-content #span-clock i {
817
- font-size: 54px;
818
- }
819
- #modalTracked .modal-footer .action-button {
820
- margin-left: 15px;
821
- }
822
- .play-pause {
823
- display: flex;
824
- }
825
- .play-pause i.spinner-solid {
826
- animation: spin 1s linear infinite;
827
- }
828
- @keyframes spin {
829
- 100% {
830
- transform: rotate(360deg);
831
- }
832
- }
833
- .sub-menu[data-v-25586497] {
834
- overflow: hidden;
835
- background-color: #ffffff;
836
- box-shadow: 0 2px 6px 0 rgba(37, 55, 70, 0.1);
837
- padding-left: 32px;
838
- }
839
- .sub-menu .items[data-v-25586497] {
840
- width: 100%;
841
- font-size: 0.94rem;
842
- font-family: "open sans", sans-serif;
843
- white-space: nowrap;
844
- }
845
- .sub-menu .items a[data-v-25586497] {
846
- color: #253746;
847
- padding: 0 5px 5px;
848
- margin-right: 15px;
849
- float: left;
850
- line-height: 29px;
851
- height: 29px;
852
- border-bottom: 3px solid white;
853
- text-decoration: none;
854
- box-sizing: content-box;
855
- }
856
- .sub-menu .items a[data-v-25586497]:hover, .sub-menu .items a.router-link-exact-active[data-v-25586497] {
857
- -webkit-text-stroke: 0.7px #253746;
858
- border-bottom: 3px solid #00a58e;
859
- }
860
- .image-wrapper.sm[data-v-7393283b] {
861
- width: 35px;
862
- height: 35px;
863
- }
864
- .image-wrapper.sm .user-image[data-v-7393283b] {
865
- border: 1px solid #cbd5e1;
866
- }
867
- .image-wrapper.sm .user-image.anonymous[data-v-7393283b] {
868
- font-size: 12px;
869
- }
870
- .image-wrapper.sm .user-image.anonymous.dark[data-v-7393283b] {
871
- background-color: var(--bg-primary);
872
- color: var(--text-disable);
873
- border: 1px solid var(--border);
874
- }
875
- .image-wrapper.md[data-v-7393283b] {
876
- height: 44px;
877
- width: 44px;
878
- }
879
- .image-wrapper.md .user-image[data-v-7393283b] {
880
- border: 1px solid #cbd5e1;
881
- }
882
- .image-wrapper.md .user-image.anonymous[data-v-7393283b] {
883
- font-size: 16px;
884
- color: #94a3b8;
885
- }
886
- .image-wrapper.md .user-image.anonymous.dark[data-v-7393283b] {
887
- background-color: var(--bg-primary);
888
- color: var(--text-disable);
889
- border: 1px solid var(--border);
890
- }
891
- .image-wrapper.lg[data-v-7393283b] {
892
- height: 96px;
893
- width: 96px;
894
- }
895
- .image-wrapper.xl[data-v-7393283b] {
896
- height: 128px;
897
- width: 128px;
898
- }
899
- .image-wrapper.xl .user-image.anonymous[data-v-7393283b] {
900
- font-size: 50px;
901
- color: #94a3b8;
902
- }
903
- .image-wrapper.xl .user-image.anonymous.dark[data-v-7393283b] {
904
- background-color: var(--bg-primary);
905
- color: var(--text-disable);
906
- border: 1px solid var(--border);
907
- }
908
- .image-wrapper .user-image[data-v-7393283b] {
909
- border: 2px solid #cbd5e1;
910
- border-radius: 50%;
911
- overflow: hidden;
912
- width: inherit;
913
- height: inherit;
660
+ .image-wrapper .user-image[data-v-7393283b] {
661
+ border: 2px solid #cbd5e1;
662
+ border-radius: 50%;
663
+ overflow: hidden;
664
+ width: inherit;
665
+ height: inherit;
914
666
  }
915
667
  .image-wrapper .user-imageimg[data-v-7393283b] {
916
668
  -o-object-fit: cover;
@@ -937,7 +689,7 @@
937
689
  .on-boarding-sign[data-v-0d7f0ada] {
938
690
  position: absolute;
939
691
  top: 97px;
940
- right: 60px;
692
+ right: 30px;
941
693
  width: 485px;
942
694
  padding: 1.5rem;
943
695
  border-radius: 16px;
@@ -990,907 +742,209 @@
990
742
  margin-left: 2rem;
991
743
  color: #f8fafc;
992
744
  }
993
- .welcome-program-counter {
994
- margin-left: 6px;
745
+ .intems-menu-container {
995
746
  position: relative;
996
- border-radius: 2px;
997
- background-color: #ff8036;
998
- font-family: play, sans-serif;
999
- font-size: 0.67rem;
1000
- font-weight: bold;
1001
- color: #ffffff;
1002
- padding: 2px;
1003
- bottom: 1px;
1004
- }
1005
- .menu-new {
1006
- display: flex;
1007
- position: absolute;
1008
- justify-content: center;
747
+ display: grid;
748
+ grid-template-columns: 250px auto;
749
+ gap: 16px;
750
+ justify-content: space-between;
1009
751
  align-items: center;
1010
- width: 31px;
1011
- height: 16px;
1012
- background: #ff8041;
1013
- line-height: 12px;
1014
- font-size: 10px;
1015
- border-radius: 2px;
1016
- }
1017
- .menu-new.horizontal, .menu-new.overflowed {
1018
- right: 0;
1019
- top: -16px;
1020
- color: #ffffff;
1021
- }
1022
- .vm--container {
1023
- cursor: auto;
1024
- }
1025
- .vm--container i.icon.huge {
1026
- width: 64px;
1027
- height: 64px !important;
752
+ height: 64px;
753
+ padding: 0 20px;
754
+ background-color: #ffffff;
755
+ z-index: 997;
1028
756
  }
1029
- .vm--container i.icon.huge.dark:before {
1030
- background-color: currentcolor !important;
757
+ @media only screen and (max-width : 600px) {
758
+ .intems-menu-container {
759
+ display: flex;
760
+ gap: 0;
761
+ padding: 0 16px;
1031
762
  }
1032
- .overflowed-menu-toggler {
1033
- position: relative;
1034
- display: flex;
1035
- flex-wrap: wrap;
1036
- flex-direction: column;
1037
- justify-content: center;
1038
- width: 20px;
1039
- height: 64px;
1040
- line-height: 64px;
1041
- cursor: pointer;
1042
763
  }
1043
- .overflowed-menu-toggler.notification-manage-toggler span {
1044
- background-color: #94a3b8;
1045
- width: 4px;
1046
- height: 4px;
764
+ .intems-menu-container a, .intems-menu-container a:hover {
765
+ text-decoration: none;
1047
766
  }
1048
- .overflowed-menu-toggler + ul .managers-portal-item {
767
+ .intems-menu-left {
1049
768
  display: flex;
1050
769
  align-items: center;
1051
770
  }
1052
- .overflowed-menu-toggler + ul .managers-portal-item span:nth-child(2) {
1053
- display: inline-flex;
1054
- justify-content: center;
1055
- align-items: center;
1056
- width: 24px;
1057
- height: 24px;
1058
- margin-left: auto;
1059
- background-color: #186ade;
1060
- border-radius: 100%;
1061
- font-size: 0.67rem;
1062
- font-weight: 700;
1063
- color: #ffffff;
1064
- }
1065
- .overflowed-menu-toggler span {
1066
- display: inline-block;
1067
- width: 5px;
1068
- height: 5px;
1069
- border-radius: 50%;
1070
- margin: 1px auto;
1071
- background-color: #ffffff;
1072
- }
1073
- @media only screen and (max-width: 992px) {
1074
- .hide-on-med-and-down {
1075
- display: none !important;
1076
- }
1077
- }
1078
- .navbar-fixed {
771
+ .intems-menu-toggler {
1079
772
  position: relative;
1080
- display: flex;
1081
- align-items: center;
1082
- height: 64px;
1083
- max-height: 64px;
1084
- z-index: 997;
1085
- }
1086
- .navbar-fixed a,
1087
- .navbar-fixed a:hover {
1088
- text-decoration: none;
1089
- }
1090
- .navbar-fixed nav {
1091
- position: fixed;
1092
- box-shadow: none !important;
1093
- min-width: 250px;
1094
- width: 100vw;
1095
- background-color: #253746;
1096
- }
1097
- .navbar-fixed nav ul .href-wrap {
1098
- position: relative;
1099
- }
1100
- .navbar-fixed nav ul a {
1101
- position: relative;
1102
- white-space: nowrap;
1103
- color: #f8fafc;
1104
- transition: background-color 0.3s;
1105
- font-size: 18px;
1106
- display: block;
1107
- padding: 0 15px;
1108
- cursor: pointer;
1109
- }
1110
- .navbar-fixed nav ul a:hover {
1111
- background-color: rgba(0, 0, 0, 0.1);
1112
- }
1113
- .navbar-fixed nav ul a.notifications-trigger {
1114
- display: inline;
1115
- }
1116
- .navbar-fixed nav .brand-logo {
1117
- position: relative;
1118
- display: inline-flex;
1119
- align-items: center;
1120
- font-weight: bold;
1121
- text-transform: uppercase;
1122
- vertical-align: middle;
1123
- font-family: play, sans-serif;
1124
- height: inherit;
1125
- }
1126
- .navbar-fixed nav .brand-logo img {
1127
- width: 150px;
1128
- height: 54px;
1129
- margin-left: 15px;
1130
- }
1131
- @media only screen and (max-width : 600px) {
1132
- .navbar-fixed nav .brand-logo img {
1133
- height: 56px;
1134
- width: 100px;
1135
- }
1136
- }
1137
- @media only screen and (max-width : 992px) {
1138
- .navbar-fixed nav .brand-logo {
1139
- order: 1;
1140
- left: 0;
1141
- transform: translateX(0);
1142
- margin: 0 auto;
1143
- }
1144
- }
1145
- .navbar-fixed nav .btn.play-pause {
1146
- line-height: 42px;
1147
- padding: 8px;
1148
- margin-left: 20px;
1149
- margin-right: 10px;
1150
- border-radius: 5px;
1151
- }
1152
- @media only screen and (max-width : 992px) {
1153
- .navbar-fixed nav .btn.play-pause {
1154
- order: 0;
1155
- margin-left: 12px;
1156
- }
1157
- }
1158
- @media only screen and (max-width : 600px) {
1159
- .navbar-fixed nav .btn.play-pause {
1160
- height: 36px;
1161
- line-height: 36px;
1162
- padding: 6px 6px;
1163
- }
1164
- }
1165
- .navbar-fixed nav .btn.play-pause > i.icon {
1166
- vertical-align: baseline;
1167
- }
1168
- .navbar-fixed nav .btn.play-pause > i.icon:before {
1169
- transition: background-color 0.2s ease-out;
1170
- }
1171
- .navbar-fixed nav .btn.play-pause > i.icon.pause:before {
1172
- background-color: #00a58e;
1173
- }
1174
- .navbar-fixed nav .btn.play-pause > i.icon.play {
1175
- color: #ffffff;
1176
- }
1177
- .navbar-fixed nav .btn.play-pause:hover > i.icon.play:before {
1178
- background-color: #00a58e;
1179
- }
1180
- .navbar-fixed nav .btn.play-pause:hover > i.icon.pause:before {
1181
- background-color: #ffffff;
1182
- }
1183
- .navbar-fixed nav .menu-items {
1184
- flex: 1;
1185
- white-space: nowrap;
1186
- overflow: initial;
1187
- font-weight: bold;
1188
- height: 64px;
1189
- font-family: play, sans-serif;
1190
- }
1191
- .navbar-fixed nav .menu-items.hasOverflow {
1192
- overflow: hidden;
1193
- }
1194
- .navbar-fixed nav .menu-items li {
1195
- height: 64px;
1196
- list-style-type: none;
1197
- float: left;
1198
- }
1199
- .navbar-fixed nav .menu-items li a.router-link-active,
1200
- .navbar-fixed nav .menu-items li a.router-link-exact-active {
1201
- color: #45d6ad;
1202
- box-shadow: inset 0px -3px 0px 0 #45d6ad;
1203
- }
1204
- .navbar-fixed nav .menu-items li a {
1205
- display: flex;
1206
- align-items: center;
1207
- transition: background-color 0.3s;
1208
- font-size: 18px;
1209
- padding: 0 15px;
1210
- height: 64px;
1211
- cursor: pointer;
1212
- }
1213
- .navbar-fixed nav .menu-items li a:hover {
1214
- background-color: rgba(0, 0, 0, 0.1);
1215
- }
1216
- .navbar-fixed nav .menu-items li ul {
1217
- background-color: #253746;
1218
- position: absolute;
1219
- display: none;
1220
- margin: 0;
1221
- padding: 0;
1222
- }
1223
- .navbar-fixed nav .menu-items li ul.admin li {
1224
- width: 100%;
1225
- }
1226
- .navbar-fixed nav .menu-items li ul.admin li.subItems i.icon:before {
1227
- background-color: #1a2732 !important;
1228
- }
1229
- .navbar-fixed nav .menu-items li ul.admin li.subItems ul {
1230
- right: 100%;
1231
- top: 0;
1232
- }
1233
- .navbar-fixed nav .menu-items li ul.admin li:hover > a {
1234
- background-color: rgba(65, 84, 100, 0.35);
1235
- }
1236
- .navbar-fixed nav .menu-items li.subItems {
1237
- position: relative;
1238
- }
1239
- .navbar-fixed nav .menu-items li.subItems i.icon:before {
1240
- background-color: #1a2732 !important;
1241
- }
1242
- .navbar-fixed nav .menu-items li:hover > ul {
1243
- display: block;
1244
- }
1245
- .navbar-fixed nav .notifications-bell {
1246
- max-height: 58px;
1247
- margin: 0 15px;
1248
- }
1249
- @media only screen and (max-width : 992px) {
1250
- .navbar-fixed nav .notifications-bell {
1251
- order: 0;
1252
- }
1253
- .navbar-fixed nav .notifications-bell .v-dropdown-menu__container {
1254
- transform: translateX(-75%) translateY(0) !important;
1255
- }
1256
- }
1257
- @media only screen and (min-width : 601px) {
1258
- .navbar-fixed nav .notifications-bell {
1259
- line-height: 58px;
1260
- }
1261
- .navbar-fixed nav .notifications-bell + a {
1262
- margin-left: 15px;
1263
- }
1264
- }
1265
- @media only screen and (max-width : 600px) {
1266
- .navbar-fixed nav .notifications-bell {
1267
- line-height: 58px;
1268
- }
1269
- .navbar-fixed nav .notifications-bell .notifications-trigger {
1270
- padding-bottom: 17px;
1271
- }
1272
- .navbar-fixed nav .notifications-bell .v-dropdown-menu__container {
1273
- left: 0;
1274
- transform: translateX(0) !important;
1275
- top: 85px;
1276
- height: 95%;
1277
- position: fixed;
1278
- width: 100vw;
1279
- }
1280
- }
1281
- @media only screen and (max-width : 600px) and (-webkit-min-device-pixel-ratio: 0) {
1282
- .navbar-fixed nav .notifications-bell .v-dropdown-menu__container {
1283
- height: 95svh;
1284
- }
1285
- }
1286
- .navbar-fixed nav .menu-items-overflowed {
1287
- font-weight: bold;
1288
- font-family: play, sans-serif;
1289
- position: relative;
1290
- cursor: pointer;
1291
- margin-right: 30px;
1292
- padding: 0 5px;
1293
- }
1294
- .navbar-fixed nav .menu-items-overflowed:hover > ul {
1295
- display: flex;
1296
- visibility: visible;
1297
- }
1298
- .navbar-fixed nav .menu-items-overflowed ul {
1299
- position: absolute;
1300
- min-width: 230px;
1301
- flex-direction: column;
1302
- background: #253746;
1303
- visibility: hidden;
1304
- transition: transform 0.3s, visibility 0.3s;
1305
- right: 0;
1306
- bottom: 0;
1307
- transform: translateY(100%) translateX(0);
1308
- }
1309
- .navbar-fixed nav .menu-items-overflowed ul.moved {
1310
- transform: translateY(100%) translateX(-10%);
1311
- }
1312
- .navbar-fixed nav .menu-items-overflowed ul a.router-link-exact-active {
1313
- background-color: rgba(0, 0, 0, 0.05);
1314
- }
1315
- .navbar-fixed nav .menu-items-overflowed ul > li {
1316
- width: 100%;
1317
- background-color: #253746;
1318
- }
1319
- .navbar-fixed nav .menu-items-overflowed ul > li.subItems i.icon:before {
1320
- background-color: #ffffff !important;
1321
- }
1322
- .navbar-fixed nav .menu-items-overflowed ul > li.subItems ul {
1323
- top: 0;
1324
- right: initial;
1325
- left: 100%;
1326
- transform: none;
1327
- }
1328
- .navbar-fixed nav .menu-items-overflowed ul li a {
1329
- line-height: 56px;
1330
- }
1331
- .navbar-fixed nav .menu-items-overflowed ul li.subItems i.icon:before {
1332
- background-color: #ffffff !important;
1333
- }
1334
- .navbar-fixed nav .menu-items-overflowed ul li.subItems:hover > ul {
1335
- display: flex;
1336
- visibility: visible;
1337
- }
1338
- .navbar-fixed nav .menu-items-overflowed ul li.subItems a {
1339
- display: flex;
1340
- justify-content: space-between;
1341
- align-items: center;
1342
- }
1343
- .navbar-fixed nav .menu-items-overflowed ul > li:hover > a {
1344
- background-color: rgba(65, 84, 100, 0.35);
1345
- }
1346
- .navbar-fixed nav .menu-items-overflowed ul > li:hover > ul > li {
1347
- background-color: #253746;
1348
- }
1349
- .navbar-fixed nav .nav-wrapper {
1350
- display: flex;
1351
- align-items: center;
1352
- margin: 0 20px;
1353
- position: relative;
1354
- height: 100%;
1355
- }
1356
- @media only screen and (max-width : 430px) {
1357
- .navbar-fixed nav .nav-wrapper {
1358
- margin: 0 5px 0 5px;
1359
- }
1360
- }
1361
- .navbar-fixed nav .nav-wrapper .sidebar-toggler {
1362
- position: relative;
1363
- display: flex;
1364
- flex-wrap: wrap;
1365
- flex-direction: column;
1366
- justify-content: space-between;
1367
- width: 20px;
1368
- height: 14px;
1369
- cursor: pointer;
1370
- }
1371
- .navbar-fixed nav .nav-wrapper .sidebar-toggler span {
1372
- display: inline-block;
1373
- width: 100%;
1374
- height: 2px;
1375
- border-radius: 2px;
1376
- background-color: #ffffff;
1377
- transition: width 0.3s 0.2s;
1378
- }
1379
- .navbar-fixed nav .nav-wrapper .sidebar-toggler .icon {
1380
- position: absolute;
1381
- top: 50%;
1382
- right: -7px;
1383
- transform: translateY(-50%);
1384
- width: 14px;
1385
- height: 14px;
1386
- color: #ffffff;
1387
- opacity: 0;
1388
- transition: 0.3s;
1389
- }
1390
- .navbar-fixed nav .nav-wrapper .sidebar-toggler.collapsed span:nth-child(2) {
1391
- width: 75%;
1392
- transition: width 0.3s;
1393
- }
1394
- .navbar-fixed nav .nav-wrapper .sidebar-toggler.collapsed .icon {
1395
- opacity: 1;
1396
- transition: 0.2s 0.3s;
1397
- }
1398
- .navbar-fixed nav .nav-wrapper .sidebar-toggler.open span {
1399
- position: absolute;
1400
- transition: 0.5s;
1401
- }
1402
- .navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:first-child, .navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:nth-child(3) {
1403
- top: 6px;
1404
- left: -1px;
1405
- }
1406
- .navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:first-child {
1407
- transform: rotate(45deg);
1408
- }
1409
- .navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:nth-child(2) {
1410
- width: 0;
1411
- opacity: 0;
1412
- }
1413
- .navbar-fixed nav .nav-wrapper .sidebar-toggler.open span:nth-child(3) {
1414
- transform: rotate(-45deg);
1415
- }
1416
- @media only screen and (max-width : 992px) {
1417
- .navbar-fixed nav .nav-wrapper .mobile-menu-toggler {
1418
- display: flex;
1419
- flex-wrap: wrap;
1420
- flex-direction: column;
1421
- justify-content: space-between;
1422
- min-width: 20px;
1423
- height: 14px;
1424
- order: 0;
1425
- margin: 0 5px;
1426
- }
1427
- .navbar-fixed nav .nav-wrapper .mobile-menu-toggler span {
1428
- display: inline-block;
1429
- width: 100%;
1430
- height: 2px;
1431
- border-radius: 2px;
1432
- background-color: #ffffff;
1433
- }
1434
- }
1435
- .navbar-fixed nav .nav-wrapper i.icon {
1436
- height: 24px;
1437
- vertical-align: middle;
1438
- }
1439
- .navbar-fixed nav .nav-wrapper i.icon.icon-medium {
1440
- height: 16px !important;
1441
- width: 16px !important;
1442
- }
1443
- .navbar-fixed nav .nav-wrapper i.icon:before {
1444
- background-color: #45d6ad;
1445
- }
1446
- .navbar-fixed nav .nav-wrapper i.icon.notification {
1447
- float: none;
1448
- margin: 0;
1449
- }
1450
- .navbar-fixed nav .nav-wrapper i.icon.notification:before {
1451
- background-color: #45d6ad;
1452
- }
1453
- .navbar-fixed nav .nav-wrapper i.icon.notification.has-unread {
1454
- position: relative;
1455
- }
1456
- .navbar-fixed nav .nav-wrapper i.icon.notification.has-unread:after {
1457
- content: "";
1458
- height: 9px;
1459
- width: 9px;
1460
- border-radius: 50%;
1461
- background-color: #ff8041;
1462
- position: absolute;
1463
- top: -8px;
1464
- right: -8px;
1465
- }
1466
- .navbar-fixed nav .nav-wrapper .right-side {
1467
- display: flex;
1468
- align-items: center;
1469
- margin-right: 20px;
1470
- position: relative;
1471
- max-height: 64px;
1472
- }
1473
- @media only screen and (max-width : 992px) {
1474
- .navbar-fixed nav .nav-wrapper .right-side {
1475
- order: 3;
1476
- margin-right: 2px;
1477
- }
1478
- }
1479
- .navbar-fixed nav .nav-wrapper .right-side .icons {
1480
- display: inline-block;
1481
- vertical-align: middle;
1482
- font-size: 1.07rem;
1483
- line-height: 64px;
1484
- }
1485
- .navbar-fixed nav .nav-wrapper .right-side .icons li {
1486
- transition: background-color 0.3s;
1487
- float: left;
1488
- padding: 0;
1489
- }
1490
- .navbar-fixed nav .nav-wrapper .right-side .icons .icon + span {
1491
- vertical-align: middle;
1492
- margin-left: 8px;
1493
- font-weight: 500;
1494
- }
1495
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper {
1496
- padding: 0 15px;
1497
- display: inline-block;
1498
- vertical-align: middle;
1499
- width: -moz-fit-content;
1500
- width: fit-content;
1501
- line-height: 64px;
1502
- }
1503
- @media only screen and (max-width : 600px) {
1504
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper {
1505
- margin-left: 0;
1506
- padding: 0;
1507
- }
1508
- }
1509
- @media only screen and (max-width : 430px) {
1510
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper {
1511
- margin-left: 5px;
1512
- padding: 0 5px;
1513
- }
1514
- }
1515
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user {
1516
- display: flex;
1517
- align-items: center;
1518
- float: left;
1519
- vertical-align: middle;
1520
- height: inherit;
1521
- }
1522
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .image-wrapper {
1523
- vertical-align: middle;
1524
- -o-object-fit: cover;
1525
- object-fit: cover;
1526
- height: 40px;
1527
- width: 40px;
1528
- min-width: 40px;
1529
- }
1530
- @media only screen and (max-width : 992px) {
1531
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .image-wrapper {
1532
- height: 32px;
1533
- width: 32px;
1534
- min-width: 32px;
1535
- }
1536
- }
1537
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .image-wrapper .user-image {
1538
- display: flex;
1539
- justify-content: center;
1540
- align-items: center;
1541
- }
1542
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout {
1543
- display: flex;
1544
- align-items: center;
1545
- color: #f8fafc;
1546
- margin-left: 16px;
1547
- font-size: 0.875rem;
1548
- cursor: pointer;
1549
- }
1550
- @media only screen and (max-width : 600px) {
1551
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout {
1552
- margin-left: 5px;
1553
- }
1554
- }
1555
- @media only screen and (max-width : 430px) {
1556
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout span {
1557
- display: none;
1558
- }
1559
- }
1560
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout .icon {
1561
- margin-left: 0.75rem;
1562
- color: #f8fafc;
1563
- }
1564
- .navbar-fixed nav .nav-wrapper .right-side .user-wrapper .user .logout .icon:before {
1565
- background-color: #f8fafc;
1566
- }
1567
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper {
1568
- height: 63px;
1569
- margin-bottom: 1px;
1570
- padding: 0 15px;
1571
- display: inline-block;
1572
- vertical-align: middle;
1573
- width: -moz-fit-content;
1574
- width: fit-content;
1575
- line-height: 64px;
1576
- }
1577
- @media only screen and (max-width : 992px) {
1578
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper {
1579
- height: auto;
1580
- }
1581
- }
1582
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper:hover {
1583
- background-color: #3b4d5d;
1584
- border-radius: 2px;
1585
- cursor: pointer;
1586
- }
1587
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper:before {
1588
- content: "";
1589
- position: absolute;
1590
- right: 158px;
1591
- bottom: 15px;
1592
- height: 50%;
1593
- width: 5px;
1594
- border-right: 1px solid #3b4d5d;
1595
- }
1596
- @media only screen and (max-width : 992px) {
1597
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper {
1598
- display: flex;
1599
- flex-direction: column;
1600
- align-items: center;
1601
- padding: 0 5px;
1602
- }
1603
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper:hover {
1604
- background: none;
1605
- }
1606
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper:before {
1607
- content: "";
1608
- position: absolute;
1609
- right: 90px;
1610
- bottom: 5%;
1611
- height: 90%;
1612
- width: 5px;
1613
- border-right: 1px solid #3b4d5d;
1614
- }
1615
- }
1616
- @media only screen and (max-width : 992px) {
1617
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper a {
1618
- float: none;
1619
- line-height: initial;
1620
- }
1621
- }
1622
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user {
1623
- display: flex;
1624
- align-items: center;
1625
- float: left;
1626
- vertical-align: middle;
1627
- height: inherit;
1628
- }
1629
- @media only screen and (max-width : 992px) {
1630
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user {
1631
- margin-left: 15px;
1632
- }
1633
- }
1634
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user .image-wrapper {
1635
- vertical-align: middle;
1636
- -o-object-fit: cover;
1637
- object-fit: cover;
1638
- height: 40px;
1639
- width: 40px;
1640
- min-width: 40px;
1641
- }
1642
- @media only screen and (max-width : 992px) {
1643
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user .image-wrapper {
1644
- height: 32px;
1645
- width: 32px;
1646
- min-width: 32px;
1647
- }
1648
- }
1649
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-user .image-wrapper .user-image {
1650
- display: flex;
1651
- justify-content: center;
1652
- align-items: center;
1653
- }
1654
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-logo {
1655
- vertical-align: middle;
1656
- margin-left: 15px;
1657
- text-decoration: none;
1658
- color: #45d6ad;
1659
- font-family: play, sans-serif;
1660
- font-weight: 700;
1661
- font-size: 16px;
1662
- }
1663
- .navbar-fixed nav .nav-wrapper .right-side .intellihub-user-wrapper .intellihub-logo.white-font {
1664
- color: #ffffff;
1665
- }
1666
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown {
1667
- min-width: -moz-fit-content;
1668
- min-width: fit-content;
1669
- padding: 10px;
1670
- border-radius: 4px;
1671
- box-shadow: 0 2px 6px 0 rgba(37, 55, 70, 0.1);
1672
- }
1673
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown #avatar_dropdown_li {
1674
- display: flex;
1675
- }
1676
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown .avatar {
1677
- width: 44px;
1678
- height: 44px;
1679
- -o-object-fit: cover;
1680
- object-fit: cover;
1681
- vertical-align: middle;
1682
- }
1683
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div {
1684
- display: inline-block;
1685
- }
1686
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div p {
1687
- margin: 0;
1688
- white-space: nowrap;
1689
- }
1690
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div p#empl_name {
1691
- font-weight: bold;
1692
- color: #1a2732;
1693
- }
1694
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div .employee-position {
1695
- color: #64748b;
1696
- }
1697
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown div#avatar_div {
1698
- float: right;
1699
- margin-left: 26px;
1700
- }
1701
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown li {
1702
- min-height: 2em;
1703
- background-color: #ffffff;
1704
- }
1705
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown li.divider {
1706
- background-color: #cbd5e1;
1707
- margin: 10px 0;
1708
- min-height: 1px;
773
+ display: flex;
774
+ flex-wrap: wrap;
775
+ flex-direction: column;
776
+ justify-content: space-between;
777
+ width: 15px;
778
+ height: 10px;
779
+ margin-right: 20px;
780
+ cursor: pointer;
1709
781
  }
1710
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown li > a {
1711
- background-color: #ffffff;
1712
- padding: 0 0 0 0;
1713
- color: #1a2732;
1714
- border-bottom: none;
782
+ @media only screen and (max-width : 600px) {
783
+ .intems-menu-toggler {
784
+ margin-right: 0;
1715
785
  }
1716
- .navbar-fixed nav .nav-wrapper .right-side #avatar_dropdown li > a:hover {
1717
- color: #008c79;
1718
786
  }
1719
- #mobile-menu {
1720
- font-family: play, sans-serif;
1721
- font-weight: bold;
787
+ .intems-menu-toggler span {
788
+ display: inline-block;
1722
789
  width: 100%;
1723
- height: 100%;
790
+ height: 2px;
791
+ border-radius: 2px;
1724
792
  background-color: #253746;
793
+ transition: width 0.3s 0.2s;
1725
794
  }
1726
- #mobile-menu.sidenav-mobile {
1727
- position: fixed;
1728
- left: 0;
1729
- top: 0;
1730
- margin: 0;
1731
- padding-bottom: 60px;
1732
- z-index: 999;
1733
- overflow-y: auto;
1734
- will-change: transform;
1735
- backface-visibility: hidden;
1736
- font-size: 14px;
1737
- line-height: 1.5;
1738
- color: #253746;
1739
- transform: translateX(-105%);
1740
- transition: transform 0.6s ease;
1741
- /* Add this line for the transition effect */
795
+ .intems-menu-toggler .icon {
796
+ position: absolute;
797
+ top: 50%;
798
+ right: -9px;
799
+ transform: translateY(-50%);
800
+ width: 16px;
801
+ height: 16px;
802
+ opacity: 0;
803
+ transition: 0.3s;
1742
804
  }
1743
- #mobile-menu.sidenav-mobile li > a {
1744
- display: flex;
1745
- align-items: center;
1746
- justify-content: space-between;
1747
- font-size: 18px;
1748
- font-weight: 500;
1749
- height: 48px;
1750
- line-height: 48px;
1751
- padding: 0 32px;
805
+ @media only screen and (min-width : 993px) {
806
+ .intems-menu-toggler.lite {
807
+ display: none;
1752
808
  }
1753
- #mobile-menu.sidenav-mobile li > a:hover {
1754
- background-color: rgba(0, 0, 0, 0.05);
1755
809
  }
1756
- #mobile-menu.sidenav-mobile.opened {
1757
- transform: translateX(0%);
810
+ .intems-menu-toggler.collapsed span:nth-child(2) {
811
+ width: 75%;
812
+ transition: width 0.3s;
1758
813
  }
1759
- #mobile-menu a {
1760
- position: relative;
1761
- font-size: 18px;
1762
- color: #ffffff;
814
+ .intems-menu-toggler.collapsed .icon {
815
+ opacity: 1;
816
+ transition: 0.2s 0.3s;
1763
817
  }
1764
- #mobile-menu a.router-link-exact-active {
1765
- color: #00a58e;
818
+ .intems-menu-toggler.open span {
819
+ position: absolute;
820
+ transition: 0.5s;
1766
821
  }
1767
- #mobile-menu a:hover {
1768
- color: #00a58e;
822
+ .intems-menu-toggler.open span:first-child, .intems-menu-toggler.open span:nth-child(3) {
823
+ top: 6px;
824
+ left: -1px;
1769
825
  }
1770
- #mobile-menu a .href-wrap {
1771
- position: relative;
826
+ .intems-menu-toggler.open span:first-child {
827
+ transform: rotate(45deg);
1772
828
  }
1773
- #mobile-menu .divider {
1774
- margin: 8px 0;
1775
- background-color: #64748b;
829
+ .intems-menu-toggler.open span:nth-child(2) {
830
+ width: 0;
831
+ opacity: 0;
1776
832
  }
1777
- #mobile-menu li a.router-link-exact-active {
1778
- background-color: rgba(0, 0, 0, 0.05);
833
+ .intems-menu-toggler.open span:nth-child(3) {
834
+ transform: rotate(-45deg);
1779
835
  }
1780
- #mobile-menu .admin {
1781
- background-color: #253746;
836
+ .intems-menu-logo {
837
+ display: inline-flex;
838
+ width: 90px;
839
+ height: 30px;
1782
840
  }
1783
- #mobile-menu .admin i {
1784
- color: #ffffff;
841
+ @media only screen and (max-width : 600px) {
842
+ .intems-menu-logo {
843
+ order: 1;
844
+ margin-left: 16px;
1785
845
  }
1786
- #mobile-menu .admin > li > ul {
1787
- transition: max-height 2s;
1788
- background: #e5feff;
1789
- overflow: hidden;
1790
- max-height: 0;
1791
846
  }
1792
- #mobile-menu .admin > li > ul.opened {
1793
- max-height: 100vh;
847
+ .intems-menu-logo img {
848
+ width: 100%;
849
+ height: 100%;
1794
850
  }
1795
- #mobile-menu .admin > li > a {
1796
- padding-left: 48px;
851
+ .intems-menu-links {
852
+ margin-left: 12px;
1797
853
  }
1798
- #mobile-menu .admin > li > ul > li > a {
1799
- padding-left: 64px;
1800
- background-color: #253746;
854
+ @media only screen and (max-width : 600px) {
855
+ .intems-menu-links {
856
+ display: none;
1801
857
  }
1802
- #mobile-menu #mobile-menu-head {
1803
- line-height: 64px;
1804
858
  }
1805
- #mobile-menu #mobile-menu-head > div {
1806
- text-align: center;
1807
- width: 100%;
859
+ .intems-menu-links a {
860
+ color: #253746;
861
+ font-weight: 600;
862
+ transition: 0.3s;
1808
863
  }
1809
- #mobile-menu #mobile-menu-head > div > a {
1810
- font-size: 24px;
1811
- color: #ffffff;
864
+ .intems-menu-links a:hover {
865
+ color: #00a58e;
1812
866
  }
1813
- #mobile-menu #mobile-menu-head > div > a:hover {
1814
- cursor: pointer;
867
+ .intems-menu-right {
868
+ position: relative;
869
+ display: flex;
870
+ align-items: center;
1815
871
  }
1816
- #mobile-menu #mobile-menu-head > div > a.brand-logo {
1817
- font-family: play, sans-serif;
1818
- font-weight: bold;
872
+ .intems-menu-right .icon {
873
+ color: #253746;
1819
874
  }
1820
- #mobile-menu #mobile-menu-head > div > a#menu_close_mark {
1821
- float: right;
1822
- margin: 0 18px;
875
+ .intems-menu-additional, .intems-menu-notifications-bell {
876
+ display: flex;
877
+ height: 44px;
878
+ padding: 6px 22px !important;
879
+ border-right: solid #cbd5e1 1px;
1823
880
  }
1824
- #mobile-menu .collapsible-mobile {
1825
- border-color: #64748b;
1826
- border-width: 1px;
1827
- border-style: solid;
1828
- border-bottom: none;
1829
- margin: 0.5rem 0 1rem 0;
881
+ @media only screen and (max-width : 600px) {
882
+ .intems-menu-additional, .intems-menu-notifications-bell {
883
+ padding: 6px 16px !important;
1830
884
  }
1831
- #mobile-menu .collapsible-mobile li i {
1832
- float: right;
1833
885
  }
1834
- #mobile-menu .collapsible-mobile li.active i {
1835
- /* IE 9 */
1836
- /* Chrome, Safari, Opera */
1837
- transform: rotate(180deg);
886
+ .intems-menu-additional {
887
+ align-items: center;
888
+ gap: 24px;
889
+ margin: 0;
890
+ border-left: solid #cbd5e1 1px;
891
+ }
892
+ @media only screen and (max-width : 992px) {
893
+ .intems-menu-additional {
894
+ display: none;
1838
895
  }
1839
- #mobile-menu #mobile-menu-head_avatar {
1840
- color: #ffffff;
1841
- padding: 5px 32px;
1842
896
  }
1843
- #mobile-menu #mobile-menu-head_avatar:hover {
897
+ .intems-menu-additional li a {
898
+ display: flex;
899
+ align-items: center;
900
+ gap: 8px;
901
+ color: #253746;
902
+ font-weight: 600;
1844
903
  cursor: pointer;
904
+ transition: 0.3s;
1845
905
  }
1846
- #mobile-menu #mobile-menu-head_avatar > ul {
1847
- margin: 15px 0;
1848
- }
1849
- #mobile-menu #mobile-menu-head_avatar .fade-enter-active,
1850
- #mobile-menu #mobile-menu-head_avatar .fade-leave-active {
1851
- transition: opacity 0.5s;
906
+ .intems-menu-additional li a:hover {
907
+ color: #00a58e;
1852
908
  }
1853
- #mobile-menu #mobile-menu-head_avatar .fade-enter, #mobile-menu #mobile-menu-head_avatar .fade-leave-to {
1854
- opacity: 0;
909
+ .intems-menu-additional li a:hover .icon {
910
+ color: #00a58e;
1855
911
  }
1856
- #mobile-menu #mobile-menu-head_avatar > div {
1857
- display: table;
1858
- padding: 0;
912
+ .intems-menu-additional li a .icon {
913
+ transition: 0.3s;
1859
914
  }
1860
- #mobile-menu #mobile-menu-head_avatar > div > div {
1861
- display: table-cell;
1862
- vertical-align: middle;
915
+ .intems-menu-user {
916
+ display: flex;
917
+ align-items: center;
918
+ padding: 6px 0 6px 16px;
1863
919
  }
1864
- #mobile-menu #mobile-menu-head_avatar p {
1865
- margin: 0;
1866
- line-height: normal;
920
+ @media only screen and (max-width : 600px) {
921
+ .intems-menu-user {
922
+ padding: 6px 0 6px 8px;
1867
923
  }
1868
- #mobile-menu #mobile-menu-head_avatar p#mobile-menu-empl_name {
1869
- font-weight: bold;
1870
924
  }
1871
- #mobile-menu #mobile-menu-head_avatar p#mobile-menu-empl_position {
1872
- font-size: 12px;
1873
- font-weight: normal;
925
+ .intems-menu-user .intellihub-logo {
926
+ margin-left: 20px;
927
+ color: #45d6ad;
928
+ font-size: 0.94rem;
929
+ font-weight: 700;
1874
930
  }
1875
- #mobile-menu #mobile-menu-head_avatar #mobile-menu-avatar_div {
1876
- padding-right: 20px;
931
+ @media only screen and (max-width : 600px) {
932
+ .intems-menu-user .intellihub-logo {
933
+ margin-left: 4px;
1877
934
  }
1878
- #mobile-menu #mobile-menu-head_avatar #mobile-menu-avatar_div .avatar {
1879
- width: 44px;
1880
- height: 44px;
1881
- -o-object-fit: cover;
1882
- object-fit: cover;
1883
- vertical-align: middle;
1884
935
  }
1885
- #mobile-menu #mobile-menu-head_avatar a {
1886
- padding: 0;
1887
- line-height: 2;
1888
- font-size: 14px;
1889
- height: unset;
1890
- color: #008c79;
936
+ .intems-menu-logout {
937
+ display: flex;
938
+ align-items: center;
939
+ color: #253746;
940
+ margin-left: 16px;
941
+ cursor: pointer;
942
+ font-size: 0.94rem;
943
+ font-weight: 600;
1891
944
  }
1892
- .cursor-default {
1893
- cursor: default;
945
+ .intems-menu-logout .icon {
946
+ margin-left: 8px;
947
+ color: #253746;
1894
948
  }
1895
949
  .tooltip {
1896
950
  display: block !important;
@@ -1927,6 +981,116 @@
1927
981
  opacity: 1;
1928
982
  transition: opacity 0.15s;
1929
983
  }
984
+ @keyframes ring {
985
+ 0% {
986
+ transform: rotate(0);
987
+ }
988
+ 1% {
989
+ transform: rotate(32deg);
990
+ }
991
+ 3% {
992
+ transform: rotate(-30deg);
993
+ }
994
+ 5% {
995
+ transform: rotate(42deg);
996
+ }
997
+ 7% {
998
+ transform: rotate(-40deg);
999
+ }
1000
+ 9% {
1001
+ transform: rotate(36deg);
1002
+ }
1003
+ 11% {
1004
+ transform: rotate(-34deg);
1005
+ }
1006
+ 13% {
1007
+ transform: rotate(32deg);
1008
+ }
1009
+ 15% {
1010
+ transform: rotate(-30deg);
1011
+ }
1012
+ 17% {
1013
+ transform: rotate(30deg);
1014
+ }
1015
+ 19% {
1016
+ transform: rotate(-28deg);
1017
+ }
1018
+ 21% {
1019
+ transform: rotate(28deg);
1020
+ }
1021
+ 23% {
1022
+ transform: rotate(-26deg);
1023
+ }
1024
+ 25% {
1025
+ transform: rotate(26deg);
1026
+ }
1027
+ 27% {
1028
+ transform: rotate(-24deg);
1029
+ }
1030
+ 29% {
1031
+ transform: rotate(24deg);
1032
+ }
1033
+ 31% {
1034
+ transform: rotate(-22deg);
1035
+ }
1036
+ 33% {
1037
+ transform: rotate(23deg);
1038
+ }
1039
+ 35% {
1040
+ transform: rotate(-21deg);
1041
+ }
1042
+ 37% {
1043
+ transform: rotate(22deg);
1044
+ }
1045
+ 39% {
1046
+ transform: rotate(-20deg);
1047
+ }
1048
+ 41% {
1049
+ transform: rotate(21deg);
1050
+ }
1051
+ 43% {
1052
+ transform: rotate(-19deg);
1053
+ }
1054
+ 45% {
1055
+ transform: rotate(18deg);
1056
+ }
1057
+ 47% {
1058
+ transform: rotate(-16deg);
1059
+ }
1060
+ 50% {
1061
+ transform: rotate(14deg);
1062
+ }
1063
+ 52% {
1064
+ transform: rotate(-12deg);
1065
+ }
1066
+ 54% {
1067
+ transform: rotate(10deg);
1068
+ }
1069
+ 56% {
1070
+ transform: rotate(-8deg);
1071
+ }
1072
+ 58% {
1073
+ transform: rotate(6deg);
1074
+ }
1075
+ 60% {
1076
+ transform: rotate(-4deg);
1077
+ }
1078
+ 62% {
1079
+ transform: rotate(2deg);
1080
+ }
1081
+ 64% {
1082
+ transform: rotate(-1deg);
1083
+ }
1084
+ 66% {
1085
+ transform: rotate(1deg);
1086
+ }
1087
+ 70% {
1088
+ transform: rotate(0);
1089
+ }
1090
+ 100% {
1091
+ transform: rotate(0);
1092
+ }
1093
+ }
1930
1094
  main {
1931
1095
  overflow: auto;
1932
1096
  position: relative;
@@ -1964,6 +1128,12 @@ main {
1964
1128
  .title-row button {
1965
1129
  order: 2;
1966
1130
  }
1131
+ .flex {
1132
+ display: flex;
1133
+ }
1134
+ .flex.vertical-center {
1135
+ align-items: center;
1136
+ }
1967
1137
  .center {
1968
1138
  text-align: center;
1969
1139
  justify-content: center;
@@ -1974,6 +1144,29 @@ main {
1974
1144
  .pointer {
1975
1145
  cursor: pointer;
1976
1146
  }
1147
+ .default-pointer {
1148
+ cursor: default !important;
1149
+ }
1150
+ .primary-text {
1151
+ font-size: 14px !important;
1152
+ line-height: 1.29;
1153
+ font-weight: bold;
1154
+ }
1155
+ .semi-primary-text {
1156
+ font-size: 14px;
1157
+ line-height: 1.25;
1158
+ font-weight: normal;
1159
+ }
1160
+ .error-text {
1161
+ color: #da1e28;
1162
+ }
1163
+ .error-text span {
1164
+ color: #da1e28 !important;
1165
+ }
1166
+ .text-muted {
1167
+ font-size: 12px;
1168
+ color: #64748b;
1169
+ }
1977
1170
  .modal.confirm {
1978
1171
  box-sizing: border-box;
1979
1172
  min-width: 280px;