cronapp-framework-mobile-js 2.9.6-SP.38 → 2.9.6-SP.39

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 (11) hide show
  1. package/css/themes/custom/krypton/custom-krypton.css +277 -271
  2. package/dist/css/themes/custom/krypton/custom-krypton.css +1 -1
  3. package/dist/js/app.authentication.js +1 -1
  4. package/dist/js/app.js +1 -1
  5. package/dist/js/controllers.authentication.js +1 -1
  6. package/dist/js/upload.service.js +1 -1
  7. package/js/app.authentication.js +8 -4
  8. package/js/app.js +4 -2
  9. package/js/controllers.authentication.js +7 -1
  10. package/js/upload.service.js +7 -4
  11. package/package.json +1 -1
package/css/themes/custom/krypton/custom-krypton.css CHANGED
@@ -203,6 +203,7 @@
203
203
  --textColorLight50: #f4f4f4;
204
204
  --textColorLight60: #f7f7f7;
205
205
  --textColorLight70: #fbfbfb;
206
+
206
207
  /* Color - Stable (mobile) */
207
208
  --colorStable10: #e1e1e1;
208
209
  --colorStable20: #c6c6c6;
@@ -263,17 +264,17 @@
263
264
  /* === Variables used exclusively in the color palette property === */
264
265
 
265
266
  /* Components - Button */
266
- --btnDefault: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
267
- --btnPrimary: linear-gradient(180deg, #197FDD 0%, #08427A 100%);
268
- --btnSuccess: linear-gradient(180deg, #2FFC2B 0%, #0E890B 100%);
269
- --btnCalm: linear-gradient(180deg, #44E1D8 0%, #25968F 100%);
270
- --btnWarning: linear-gradient(180deg, #F58D11 0%, #B36305 100%);
271
- --btnDanger: linear-gradient(180deg, #F03A3A 0%, #7E2121 100%);
272
- --btnLight: linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%);
267
+ --btnDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
268
+ --btnPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
269
+ --btnSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
270
+ --btnCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
271
+ --btnWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
272
+ --btnDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
273
+ --btnLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
273
274
  --btnLink: var(--colorCalm60, #2fc2ba);
274
- --btnStable: linear-gradient(180deg, #818181 0%, #3E3E3E 100%);
275
- --btnRoyal: linear-gradient(180deg, #0E3760 0%, #2D3843 100%);
276
- --btnDark: linear-gradient(180deg, #000000 0%, #0F1E2E 100%);
275
+ --btnStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
276
+ --btnRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
277
+ --btnDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
277
278
 
278
279
  --textColorDefault: var(--textColorDefault40, #f0f0f0);
279
280
  --textColorPrimary: var(--textColorPrimary40, #f0f0f0);
@@ -299,28 +300,28 @@
299
300
  --borderBtnDark: transparent;
300
301
 
301
302
  /* Components - Text color */
302
- --colorDefault: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
303
- --colorPrimary: linear-gradient(180deg, #197FDD 0%, #08427A 100%);
304
- --colorSuccess: linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%);
305
- --colorCalm: linear-gradient(180deg, #44E1D8 0%, #25968F 100%);
306
- --colorWarning: linear-gradient(180deg, #F58D11 0%, #B36305 100%);
307
- --colorDanger: linear-gradient(180deg, #F03A3A 0%, #7E2121 100%);
308
- --colorLight: linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%);
309
- --colorStable: linear-gradient(180deg, #818181 0%, #3E3E3E 100%);
310
- --colorRoyal: linear-gradient(180deg, #0E3760 0%, #2D3843 100%);
311
- --colorDark: linear-gradient(180deg, #000000 0%, #0F1E2E 100%);
303
+ --colorDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
304
+ --colorPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
305
+ --colorSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
306
+ --colorCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
307
+ --colorWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
308
+ --colorDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
309
+ --colorLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
310
+ --colorStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
311
+ --colorRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
312
+ --colorDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
312
313
 
313
314
  /* Components - Checkbox */
314
- --checkboxDefault: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
315
- --checkboxPrimary: linear-gradient(180deg, #197FDD 0%, #08427A 100%);
316
- --checkboxSuccess: linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%);
317
- --checkboxCalm: linear-gradient(180deg, #44E1D8 0%, #25968F 100%);
318
- --checkboxWarning: linear-gradient(180deg, #F58D11 0%, #B36305 100%);
319
- --checkboxDanger: linear-gradient(180deg, #F03A3A 0%, #7E2121 100%);
320
- --checkboxLight: linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%);
321
- --checkboxStable: linear-gradient(180deg, #818181 0%, #3E3E3E 100%);
322
- --checkboxRoyal: linear-gradient(180deg, #0E3760 0%, #2D3843 100%);
323
- --checkboxDark: linear-gradient(180deg, #000000 0%, #0F1E2E 100%);
315
+ --checkboxDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
316
+ --checkboxPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
317
+ --checkboxSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
318
+ --checkboxCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
319
+ --checkboxWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
320
+ --checkboxDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
321
+ --checkboxLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
322
+ --checkboxStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
323
+ --checkboxRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
324
+ --checkboxDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
324
325
 
325
326
  --borderCheckboxDefault: transparent;
326
327
  --borderCheckboxPrimary: transparent;
@@ -334,39 +335,39 @@
334
335
  --borderCheckboxDark: transparent;
335
336
 
336
337
  /* Components - Toggle */
337
- --toggleDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
338
- --togglePrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
339
- --toggleSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
340
- --toggleCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
341
- --toggleWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
342
- --toggleDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
343
- --toggleLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
344
- --toggleStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
345
- --toggleRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
346
- --toggleDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
347
-
348
- --borderToggleDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
349
- --borderTogglePrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
350
- --borderToggleSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
351
- --borderToggleCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
352
- --borderToggleWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
353
- --borderToggleDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
354
- --borderToggleLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
355
- --borderToggleStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
356
- --borderToggleRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
357
- --borderToggleDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
338
+ --toggleDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
339
+ --togglePrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
340
+ --toggleSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
341
+ --toggleCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
342
+ --toggleWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
343
+ --toggleDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
344
+ --toggleLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
345
+ --toggleStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
346
+ --toggleRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
347
+ --toggleDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
348
+
349
+ --borderToggleDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
350
+ --borderTogglePrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
351
+ --borderToggleSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
352
+ --borderToggleCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
353
+ --borderToggleWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
354
+ --borderToggleDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
355
+ --borderToggleLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
356
+ --borderToggleStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
357
+ --borderToggleRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
358
+ --borderToggleDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
358
359
 
359
360
  /* Components - Tabs - crn-ion-segment */
360
- --bgDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
361
- --bgPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
362
- --bgSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
363
- --bgCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
364
- --bgWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
365
- --bgDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
366
- --bgLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
367
- --bgStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
368
- --bgRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
369
- --bgDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
361
+ --bgDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
362
+ --bgPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
363
+ --bgSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
364
+ --bgCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
365
+ --bgWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
366
+ --bgDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
367
+ --bgLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
368
+ --bgStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
369
+ --bgRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
370
+ --bgDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
370
371
 
371
372
  --borderActiveBackgroundDefault: transparent;
372
373
  --borderActiveBackgroundPrimary: transparent;
@@ -379,16 +380,17 @@
379
380
  --borderActiveBackgroundRoyal: transparent;
380
381
  --borderActiveBackgroundDark: transparent;
381
382
 
382
- --activeBackgroundDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
383
- --activeBackgroundPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
384
- --activeBackgroundSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
385
- --activeBackgroundCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
386
- --activeBackgroundWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
387
- --activeBackgroundDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
388
- --activeBackgroundLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
389
- --activeBackgroundStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
390
- --activeBackgroundRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
391
- --activeBackgroundDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
383
+ --activeBackgroundDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
384
+ --activeBackgroundPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
385
+ --activeBackgroundSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
386
+ --activeBackgroundCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
387
+ --activeBackgroundWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
388
+ --activeBackgroundDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
389
+ --activeBackgroundLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
390
+ --activeBackgroundStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
391
+ --activeBackgroundRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
392
+ --activeBackgroundDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
393
+
392
394
  --ionSegmentDefault: var(--textColorPrimary40, #f0f0f0);
393
395
  --ionSegmentPrimary: var(--textColorDefault40, #f0f0f0);
394
396
  --ionSegmentSuccess: var(--textColorSuccess40, #f0f0f0);
@@ -400,63 +402,63 @@
400
402
  --ionSegmentRoyal: var(--textColorRoyal40, #f0f0f0);
401
403
  --ionSegmentDark: var(--textColorDark40, #f0f0f0);
402
404
 
403
- --iconThemeLightDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
404
- --iconThemeLightPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
405
- --iconThemeLightSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
406
- --iconThemeLightCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
407
- --iconThemeLightWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
408
- --iconThemeLightDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
409
- --iconThemeLightLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
410
- --iconThemeLightStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
411
- --iconThemeLightRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
412
- --iconThemeLightDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
405
+ --iconThemeLightDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
406
+ --iconThemeLightPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
407
+ --iconThemeLightSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
408
+ --iconThemeLightCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
409
+ --iconThemeLightWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
410
+ --iconThemeLightDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
411
+ --iconThemeLightLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
412
+ --iconThemeLightStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
413
+ --iconThemeLightRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
414
+ --iconThemeLightDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
413
415
 
414
416
  /* Components - Old Tabs - pallete false */
415
- --tabsDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
416
- --tabsPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
417
- --tabsSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
418
- --tabsCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
419
- --tabsWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
420
- --tabsDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
421
- --tabsLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
422
- --tabsStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
423
- --tabsRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
424
- --tabsDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
417
+ --tabsDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
418
+ --tabsPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
419
+ --tabsSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
420
+ --tabsCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
421
+ --tabsWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
422
+ --tabsDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
423
+ --tabsLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
424
+ --tabsStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
425
+ --tabsRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
426
+ --tabsDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
425
427
 
426
428
  /* Components - Header */
427
- --barDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
428
- --barPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
429
- --barSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
430
- --barCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
431
- --barWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
432
- --barDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
433
- --barLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
434
- --barStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
435
- --barRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
436
- --barDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
429
+ --barDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
430
+ --barPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
431
+ --barSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
432
+ --barCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
433
+ --barWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
434
+ --barDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
435
+ --barLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
436
+ --barStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
437
+ --barRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
438
+ --barDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
437
439
 
438
440
  /* Componentes - Footer with icon */
439
- --backgroundDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
440
- --backgroundPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
441
- --backgroundSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
442
- --backgroundCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
443
- --backgroundWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
444
- --backgroundDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
445
- --backgroundLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
446
- --backgroundStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
447
- --backgroundRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
448
- --backgroundDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
449
-
450
- --tabsIconDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
451
- --tabsIconPrimary: var(--textColorDefault40, #f0f0f0);
452
- --tabsIconSuccess: var(--textColorSuccess40, #f0f0f0);
453
- --tabsIconCalm: var(--textColorCalm40, #f0f0f0);
454
- --tabsIconWarning: var(--textColorWarning40, #f0f0f0);
455
- --tabsIconDanger: var(--textColorDanger40, #f0f0f0);
456
- --tabsIconLight: var(--textColorLight40, #f0f0f0);
457
- --tabsIconStable: var(--textColorStable40, #f0f0f0);
458
- --tabsIconRoyal: var(--textColorRoyal40, #f0f0f0);
459
- --tabsIconDark: var(--textColorDark40, #f0f0f0);
441
+ --backgroundDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
442
+ --backgroundPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
443
+ --backgroundSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
444
+ --backgroundCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
445
+ --backgroundWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
446
+ --backgroundDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
447
+ --backgroundLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
448
+ --backgroundStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
449
+ --backgroundRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
450
+ --backgroundDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
451
+
452
+ --tabsIconDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
453
+ --tabsIconPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
454
+ --tabsIconSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
455
+ --tabsIconCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
456
+ --tabsIconWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
457
+ --tabsIconDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
458
+ --tabsIconLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
459
+ --tabsIconStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
460
+ --tabsIconRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
461
+ --tabsIconDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
460
462
  /* End - Variables used exclusively in the color palette property */
461
463
  }
462
464
 
@@ -483,19 +485,19 @@ a,
483
485
  a:focus,
484
486
  a:active,
485
487
  a:hover {
486
- color: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
488
+ color: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
487
489
  }
488
490
 
489
491
  .light,
490
492
  a.light,
491
493
  .color-light {
492
- color: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
494
+ color: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
493
495
  }
494
496
 
495
497
  .stable,
496
498
  a.stable,
497
499
  .color-stable {
498
- color: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
500
+ color: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
499
501
  }
500
502
 
501
503
  /* Login */
@@ -557,8 +559,8 @@ a.stable,
557
559
 
558
560
  /* Cabeçalho */
559
561
  .bar.bar-default {
560
- border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
561
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
562
+ border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
563
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
562
564
  color: var(--textColorPrimary40, #f0f0f0);
563
565
  }
564
566
 
@@ -568,8 +570,8 @@ a.stable,
568
570
  }
569
571
 
570
572
  .bar.bar-positive {
571
- border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
572
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
573
+ border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
574
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
573
575
  color: var(--textColorDefault40, #f0f0f0);
574
576
  }
575
577
 
@@ -595,7 +597,7 @@ a.stable,
595
597
 
596
598
  /* Button Positive */
597
599
  .button.button-positive {
598
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
600
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
599
601
  }
600
602
 
601
603
  .button.button-positive:active,
@@ -604,7 +606,6 @@ a.stable,
604
606
  }
605
607
 
606
608
  /* Light - Outline */
607
-
608
609
  .button.button-light.button-outline {
609
610
  border-color: none;
610
611
  }
@@ -635,102 +636,101 @@ a.stable,
635
636
  }
636
637
 
637
638
  /* Rodapé com ícone */
638
-
639
639
  .tabs-striped.background-default .tabs {
640
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
640
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
641
641
  }
642
642
 
643
643
  .tabs-striped.background-positive .tabs {
644
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
644
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
645
645
  }
646
646
 
647
647
  .tabs-striped.background-balanced .tabs {
648
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
648
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
649
649
  }
650
650
 
651
651
  .tabs-striped.background-calm .tabs {
652
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
652
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
653
653
  }
654
654
 
655
655
  .tabs-striped.background-energized .tabs {
656
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
656
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
657
657
  }
658
658
 
659
659
  .tabs-striped.background-assertive .tabs {
660
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
660
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
661
661
  }
662
662
 
663
663
  .tabs-striped.background-light .tabs {
664
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
664
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
665
665
  }
666
666
 
667
667
  .tabs-striped.background-stable .tabs {
668
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
668
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
669
669
  }
670
670
 
671
671
  .tabs-striped.background-royal .tabs {
672
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
672
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
673
673
  }
674
674
 
675
675
  .tabs-striped.background-dark .tabs {
676
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
676
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
677
677
  }
678
678
 
679
679
  .tabs-striped.tabs-icon-default .tab-item {
680
680
  color: var(--textColorDefault40, #f0f0f0);
681
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
681
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
682
682
  opacity: 0.5;
683
683
  }
684
684
 
685
685
  /* Rodapé com botões*/
686
686
  .bar.bar-default.bar-footer,
687
687
  .bar.bar-default {
688
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
688
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
689
689
  }
690
690
 
691
691
  .bar.bar-positive.bar-footer,
692
692
  .bar.bar-positive {
693
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
693
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
694
694
  }
695
695
 
696
696
  .bar.bar-balanced.bar-footer,
697
697
  .bar.bar-balanced {
698
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
698
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
699
699
  }
700
700
 
701
701
  .bar.bar-calm.bar-footer,
702
702
  .bar.bar-calm {
703
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
703
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
704
704
  }
705
705
 
706
706
  .bar.bar-energized.bar-footer,
707
707
  .bar.bar-energized {
708
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
708
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
709
709
  }
710
710
 
711
711
  .bar.bar-assertive.bar-footer,
712
712
  .bar.bar-assertive {
713
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
713
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
714
714
  }
715
715
 
716
716
  .bar.bar-light.bar-footer,
717
717
  .bar.bar-light {
718
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
718
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
719
719
  }
720
720
 
721
721
  .bar.bar-stable.bar-footer,
722
722
  .bar.bar-stable {
723
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
723
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
724
724
  }
725
725
 
726
726
  .bar.bar-royal.bar-footer,
727
727
  .bar.bar-royal {
728
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
728
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
729
729
  }
730
730
 
731
731
  .bar.bar-dark.bar-footer,
732
732
  .bar.bar-dark {
733
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
733
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
734
734
  }
735
735
 
736
736
  .item-input .icon {
@@ -738,47 +738,47 @@ a.stable,
738
738
  }
739
739
 
740
740
  .button.button-default {
741
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
741
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
742
742
  }
743
743
 
744
744
  .button.button-default:hover {
745
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
745
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
746
746
  box-shadow: 0px 0px 3px 0px #3A4753;
747
747
  }
748
748
 
749
749
  .button.button-default:active,
750
750
  .button.button-default.activated {
751
- background: var(--colorDefault60, #1c2025);
751
+ background: var(--colorDefault50, #252E36);
752
752
  }
753
753
 
754
754
  .login-mobile .button.button-light {
755
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
755
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
756
756
  color: var(--textColorWarning40, #f0f0f0);
757
757
  border-radius: 20px;
758
758
  }
759
759
 
760
760
  .login-mobile .button.button-light:hover {
761
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
761
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
762
762
  color: var(--textColorWarning40, #f0f0f0);
763
763
  }
764
764
 
765
765
  .login-mobile .button.button-light:active {
766
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
766
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
767
767
  color: var(--textColorWarning40, #f0f0f0);
768
768
  }
769
769
 
770
770
  .button#button-reset-password {
771
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
771
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
772
772
  color: var(--textColorWarning40, #ffffff);
773
773
  }
774
774
 
775
775
  .button#button-reset-password:hover {
776
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
776
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
777
777
  color: var(--textColorWarning40, #f0f0f0);
778
778
  }
779
779
 
780
780
  .button#button-reset-password:active {
781
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
781
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
782
782
  color: var(--textColorWarning40, #f0f0f0);
783
783
  }
784
784
 
@@ -836,13 +836,13 @@ input::-ms-input-placeholder {
836
836
 
837
837
  .k-widget.k-window .k-window-titlebar .k-window-title {
838
838
  color: var(--textColor40, #f0f0f0);
839
+ margin-top: 23px;
839
840
  }
840
841
 
841
842
  .k-widget.k-window {
842
843
  border-radius: 20px;
843
844
  }
844
845
 
845
-
846
846
  .item-input-wrapper {
847
847
  background: var(--backgroundColor40, #f2f2f2);
848
848
  }
@@ -904,7 +904,7 @@ button#crn-button-signup:hover {
904
904
 
905
905
  /*Default*/
906
906
  .button.button-default.button-outline {
907
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
907
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
908
908
  border-color: transparent;
909
909
  color: var(--textColor40, #f0f0f0);
910
910
  }
@@ -914,7 +914,7 @@ button#crn-button-signup:hover {
914
914
  }
915
915
 
916
916
  .button.button-default.button-outline:active {
917
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
917
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
918
918
  }
919
919
 
920
920
  .button.button-default.button-outline i {
@@ -923,11 +923,11 @@ button#crn-button-signup:hover {
923
923
 
924
924
  /*Secundary*/
925
925
  .button.button-positive {
926
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
926
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
927
927
  }
928
928
 
929
929
  .button.button-positive:hover {
930
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
930
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
931
931
  box-shadow: 0px 0px 3px 0px #187AD4;
932
932
  }
933
933
 
@@ -936,7 +936,7 @@ button#crn-button-signup:hover {
936
936
  }
937
937
 
938
938
  .button.button-positive.button-outline {
939
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
939
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
940
940
  border-color: transparent;
941
941
  color: var(--textColorDefault40, #f0f0f0);
942
942
  border-bottom: 0;
@@ -947,7 +947,7 @@ button#crn-button-signup:hover {
947
947
  }
948
948
 
949
949
  .button.button-positive.button-outline:active {
950
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
950
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
951
951
  border-bottom: 0;
952
952
  }
953
953
 
@@ -957,11 +957,11 @@ button#crn-button-signup:hover {
957
957
 
958
958
  /*Success*/
959
959
  .button.button-balanced {
960
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
960
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
961
961
  }
962
962
 
963
963
  .button.button-balanced:hover {
964
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
964
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
965
965
  box-shadow: 0px 0px 3px 0px #2FFC2B;
966
966
  }
967
967
 
@@ -970,7 +970,7 @@ button#crn-button-signup:hover {
970
970
  }
971
971
 
972
972
  .button.button-balanced.button-outline {
973
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
973
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
974
974
  border-color: transparent;
975
975
  color: var(--textColorDefault40, #f0f0f0);
976
976
  border-bottom: 0;
@@ -981,7 +981,7 @@ button#crn-button-signup:hover {
981
981
  }
982
982
 
983
983
  .button.button-balanced.button-outline:active {
984
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
984
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
985
985
  }
986
986
 
987
987
  .button.button-balanced.button-outline i {
@@ -990,11 +990,11 @@ button#crn-button-signup:hover {
990
990
 
991
991
  /*Calm*/
992
992
  .button.button-calm {
993
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
993
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
994
994
  }
995
995
 
996
996
  .button.button-calm:hover {
997
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
997
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
998
998
  box-shadow: 0px 0px 3px 0px #42DCD3;
999
999
  }
1000
1000
 
@@ -1003,7 +1003,7 @@ button#crn-button-signup:hover {
1003
1003
  }
1004
1004
 
1005
1005
  .button.button-calm.button-outline {
1006
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1006
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1007
1007
  border-color: transparent;
1008
1008
  color: var(--textColorDefault40, #f0f0f0);
1009
1009
  border-bottom: 0;
@@ -1014,7 +1014,7 @@ button#crn-button-signup:hover {
1014
1014
  }
1015
1015
 
1016
1016
  .button.button-calm.button-outline:active {
1017
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1017
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1018
1018
  }
1019
1019
 
1020
1020
  .button.button-calm.button-outline i {
@@ -1023,11 +1023,11 @@ button#crn-button-signup:hover {
1023
1023
 
1024
1024
  /*Warning*/
1025
1025
  .button.button-energized {
1026
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1026
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1027
1027
  }
1028
1028
 
1029
1029
  .button.button-energized:hover {
1030
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1030
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1031
1031
  box-shadow: 0px 0px 3px 0px #F58D11;
1032
1032
  }
1033
1033
 
@@ -1036,7 +1036,7 @@ button#crn-button-signup:hover {
1036
1036
  }
1037
1037
 
1038
1038
  .button.button-energized.button-outline {
1039
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1039
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1040
1040
  border-color: transparent;
1041
1041
  color: var(--textColorDefault40, #f0f0f0);
1042
1042
  border-bottom: 0;
@@ -1047,7 +1047,7 @@ button#crn-button-signup:hover {
1047
1047
  }
1048
1048
 
1049
1049
  .button.button-energized.button-outline:active {
1050
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1050
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1051
1051
  }
1052
1052
 
1053
1053
  .button.button-energized.button-outline i {
@@ -1056,12 +1056,12 @@ button#crn-button-signup:hover {
1056
1056
 
1057
1057
  /*Danger*/
1058
1058
  .button.button-assertive {
1059
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1059
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1060
1060
  border-bottom: 0;
1061
1061
  }
1062
1062
 
1063
1063
  .button.button-assertive:hover {
1064
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1064
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1065
1065
  box-shadow: 0px 0px 3px 0px #DE3636;
1066
1066
  }
1067
1067
 
@@ -1070,7 +1070,7 @@ button#crn-button-signup:hover {
1070
1070
  }
1071
1071
 
1072
1072
  .button.button-assertive.button-outline {
1073
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1073
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1074
1074
  border-color: transparent;
1075
1075
  color: var(--textColorDanger40, #f0f0f0);
1076
1076
  }
@@ -1080,7 +1080,7 @@ button#crn-button-signup:hover {
1080
1080
  }
1081
1081
 
1082
1082
  .button.button-assertive.button-outline:active {
1083
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1083
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1084
1084
  }
1085
1085
 
1086
1086
  .button.button-assertive.button-outline i {
@@ -1089,12 +1089,12 @@ button#crn-button-signup:hover {
1089
1089
 
1090
1090
  /*Light*/
1091
1091
  .button.button-light {
1092
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1092
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1093
1093
  border-bottom: 0;
1094
1094
  }
1095
1095
 
1096
1096
  .button.button-light:hover {
1097
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1097
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1098
1098
  box-shadow: 0px 0px 3px 0px #8DA0B2;
1099
1099
  }
1100
1100
 
@@ -1103,7 +1103,7 @@ button#crn-button-signup:hover {
1103
1103
  }
1104
1104
 
1105
1105
  .button.button-light.button-outline {
1106
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1106
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1107
1107
  border-color: transparent;
1108
1108
  color: var(--textColorLight40, #f0f0f0);
1109
1109
  }
@@ -1113,7 +1113,7 @@ button#crn-button-signup:hover {
1113
1113
  }
1114
1114
 
1115
1115
  .button.button-light.button-outline:active {
1116
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1116
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1117
1117
  }
1118
1118
 
1119
1119
  .button.button-light.button-outline i {
@@ -1122,12 +1122,12 @@ button#crn-button-signup:hover {
1122
1122
 
1123
1123
  /*Stable*/
1124
1124
  .button.button-stable {
1125
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1125
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1126
1126
  border-bottom: 0;
1127
1127
  }
1128
1128
 
1129
1129
  .button.button-stable:hover {
1130
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1130
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1131
1131
  box-shadow: 0px 0px 3px 0px #7B7B7B;
1132
1132
  }
1133
1133
 
@@ -1137,7 +1137,7 @@ button#crn-button-signup:hover {
1137
1137
  }
1138
1138
 
1139
1139
  .button.button-stable.button-outline {
1140
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1140
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1141
1141
  border-color: transparent;
1142
1142
  color: var(--textColorStable40, #434343);
1143
1143
  }
@@ -1147,7 +1147,7 @@ button#crn-button-signup:hover {
1147
1147
  }
1148
1148
 
1149
1149
  .button.button-stable.button-outline:active {
1150
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1150
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1151
1151
  }
1152
1152
 
1153
1153
  .button.button-stable.button-outline i {
@@ -1156,12 +1156,12 @@ button#crn-button-signup:hover {
1156
1156
 
1157
1157
  /*Royal*/
1158
1158
  .button.button-royal {
1159
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1159
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
1160
1160
  border-bottom: 0;
1161
1161
  }
1162
1162
 
1163
1163
  .button.button-royal:hover {
1164
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1164
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
1165
1165
  box-shadow: 0px 0px 3px 0px #11375D;
1166
1166
  }
1167
1167
 
@@ -1171,7 +1171,7 @@ button#crn-button-signup:hover {
1171
1171
  }
1172
1172
 
1173
1173
  .button.button-royal.button-outline {
1174
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1174
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
1175
1175
  border-color: transparent;
1176
1176
  color: var(--textColorRoyal40, #f0f0f0);
1177
1177
  }
@@ -1181,7 +1181,7 @@ button#crn-button-signup:hover {
1181
1181
  }
1182
1182
 
1183
1183
  .button.button-royal.button-outline:active {
1184
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1184
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
1185
1185
  }
1186
1186
 
1187
1187
  .button.button-royal.button-outline i {
@@ -1191,11 +1191,11 @@ button#crn-button-signup:hover {
1191
1191
  /*Dark*/
1192
1192
 
1193
1193
  .button.button-dark {
1194
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1194
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
1195
1195
  }
1196
1196
 
1197
1197
  .button.button-dark:hover {
1198
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1198
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
1199
1199
  box-shadow: 0px 0px 3px 0px #132639;
1200
1200
  }
1201
1201
 
@@ -1207,7 +1207,7 @@ button#crn-button-signup:hover {
1207
1207
  }
1208
1208
 
1209
1209
  .button.button-dark.button-outline {
1210
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1210
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
1211
1211
  border-color: transparent;
1212
1212
  color: var(--textColorDark40, #f0f0f0);
1213
1213
  border-bottom: 0;
@@ -1219,7 +1219,7 @@ button#crn-button-signup:hover {
1219
1219
  }
1220
1220
 
1221
1221
  .button.button-dark.button-outline:active {
1222
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1222
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
1223
1223
  }
1224
1224
 
1225
1225
  .button.button-dark.button-outline i {
@@ -1242,7 +1242,7 @@ button#crn-button-signup:hover {
1242
1242
  }
1243
1243
 
1244
1244
  .button#button-reset-password {
1245
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1245
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
1246
1246
  color: var(--textColorWarning40, #ffffff);
1247
1247
  border-radius: 20px;
1248
1248
  }
@@ -1258,7 +1258,7 @@ button#crn-button-signup {
1258
1258
  justify-content: center;
1259
1259
  align-items: center;
1260
1260
  display: flex;
1261
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1261
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
1262
1262
  }
1263
1263
 
1264
1264
  .crn-ion-segment-light ul li a,
@@ -1280,52 +1280,52 @@ button#crn-button-signup {
1280
1280
  }
1281
1281
 
1282
1282
  .crn-ion-segment-classic ul.active-background-default li.active a {
1283
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1283
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1284
1284
  color: var(--textColor40, #f0f0f0);
1285
1285
  }
1286
1286
 
1287
1287
  .crn-ion-segment-classic ul.active-background-positive li.active a {
1288
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1288
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
1289
1289
  color: var(--textColor40, #f0f0f0);
1290
1290
  }
1291
1291
 
1292
1292
  .crn-ion-segment-classic ul.active-background-balanced li.active a {
1293
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1293
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
1294
1294
  color: var(--textColor40, #f0f0f0);
1295
1295
  }
1296
1296
 
1297
1297
  .crn-ion-segment-classic ul.active-background-calm li.active a {
1298
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1298
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1299
1299
  color: var(--textColor40, #f0f0f0);
1300
1300
  }
1301
1301
 
1302
1302
  .crn-ion-segment-classic ul.active-background-energized li.active a {
1303
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1303
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1304
1304
  color: var(--textColor40, #f0f0f0);
1305
1305
  }
1306
1306
 
1307
1307
  .crn-ion-segment-classic ul.active-background-assertive li.active a {
1308
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1308
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1309
1309
  color: var(--textColor40, #f0f0f0);
1310
1310
  }
1311
1311
 
1312
1312
  .crn-ion-segment-classic ul.active-background-light li.active a {
1313
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1313
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1314
1314
  color: var(--textColor40, #f0f0f0);
1315
1315
  }
1316
1316
 
1317
1317
  .crn-ion-segment-classic ul.active-background-stable li.active a {
1318
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1318
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1319
1319
  color: var(--textColor40, #f0f0f0);
1320
1320
  }
1321
1321
 
1322
1322
  .crn-ion-segment-classic ul.active-background-royal li.active a {
1323
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1323
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
1324
1324
  color: var(--textColor40, #f0f0f0);
1325
1325
  }
1326
1326
 
1327
1327
  .crn-ion-segment-classic ul.active-background-dark li.active a {
1328
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1328
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
1329
1329
  color: var(--textColor40, #f0f0f0);
1330
1330
  }
1331
1331
 
@@ -1422,104 +1422,105 @@ canvas {
1422
1422
  }
1423
1423
 
1424
1424
  .checkbox-default input:checked:before {
1425
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1425
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1426
1426
  border-color: var(--colorDefault40, #262c32);
1427
1427
  border-radius: 2px;
1428
1428
  }
1429
1429
 
1430
1430
  .checkbox-positive input:checked:before {
1431
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1431
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
1432
1432
  border-color: var(--colorPrimary40, #197fdd);
1433
1433
  border-radius: 2px;
1434
1434
  }
1435
1435
 
1436
1436
  .checkbox-balanced input:checked:before {
1437
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1437
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
1438
1438
  border-color: var(--colorSuccess60, #22b920);
1439
1439
  border-radius: 2px;
1440
1440
  }
1441
1441
 
1442
1442
  .checkbox-calm input:checked:before {
1443
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1443
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1444
1444
  border-color: var(--colorCalm40, #44e1d8);
1445
1445
  border-radius: 2px;
1446
1446
  }
1447
1447
 
1448
1448
  .checkbox-energized input:checked:before {
1449
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1449
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1450
1450
  border-color: var(--colorWarning40, #f58d11);
1451
1451
  border-radius: 2px;
1452
1452
  }
1453
1453
 
1454
1454
  .checkbox-assertive input:checked:before {
1455
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1455
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1456
1456
  border-color: var(--colorDanger40, #f03a3a);
1457
1457
  border-radius: 2px;
1458
1458
  }
1459
1459
 
1460
1460
  .checkbox-light input:checked:before {
1461
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1461
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1462
1462
  border-color: var(--colorLight40, #8da0b2);
1463
1463
  border-radius: 2px;
1464
1464
  }
1465
1465
 
1466
1466
  .checkbox-stable input:checked:before {
1467
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1467
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1468
1468
  border-color: var(--colorStable40, #818181);
1469
1469
  border-radius: 2px;
1470
1470
  }
1471
1471
 
1472
1472
  .checkbox-royal input:checked:before {
1473
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1473
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
1474
1474
  border-color: var(--colorRoyal40, #0e3760);
1475
1475
  border-radius: 2px;
1476
1476
  }
1477
1477
 
1478
1478
  .checkbox-dark input:checked:before {
1479
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1479
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
1480
1480
  border-color: var(--colorDark40, #000000);
1481
1481
  border-radius: 2px;
1482
1482
  }
1483
1483
 
1484
1484
  /*Toogle*/
1485
1485
  .toggle.toggle-default input:checked+.track {
1486
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1486
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1487
+ border-color: var(--colorDefault40, #262c32);
1487
1488
  }
1488
1489
 
1489
1490
  .toggle.toggle-positive input:checked+.track {
1490
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1491
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467F) 100%);
1491
1492
  }
1492
1493
 
1493
1494
  .toggle.toggle-balanced input:checked+.track {
1494
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1495
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%);
1495
1496
  }
1496
1497
 
1497
1498
  .toggle.toggle-calm input:checked+.track {
1498
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1499
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1499
1500
  }
1500
1501
 
1501
1502
  .toggle.toggle-energized input:checked+.track {
1502
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1503
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1503
1504
  }
1504
1505
 
1505
1506
  .toggle.toggle-assertive input:checked+.track {
1506
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1507
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1507
1508
  }
1508
1509
 
1509
1510
  .toggle.toggle-light input:checked+.track {
1510
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1511
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1511
1512
  }
1512
1513
 
1513
1514
  .toggle.toggle-stable input:checked+.track {
1514
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1515
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1515
1516
  }
1516
1517
 
1517
1518
  .toggle.toggle-royal input:checked+.track {
1518
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1519
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1A2E43) 100%);
1519
1520
  }
1520
1521
 
1521
1522
  .toggle.toggle-dark input:checked+.track {
1522
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1523
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1E2E) 100%);
1523
1524
  }
1524
1525
 
1525
1526
  .k-combobox .k-dropdown-wrap .k-input,
@@ -1574,45 +1575,22 @@ h5 {
1574
1575
  background-color: var(--backgroundColor30, #546270);
1575
1576
  color: var(--colorSuccess40, #2ffc2b);
1576
1577
  border: none;
1577
- border-radius: 30px;
1578
- margin-left: 45px;
1578
+ margin: auto;
1579
1579
  margin-top: 20px;
1580
- }
1581
-
1582
- .k-button.k-primary:hover {
1583
- background: var(--colorSuccess60, #22b920);
1584
- border-radius: 30px;
1585
- border: none;
1586
- }
1587
-
1588
- .k-button.k-primary:active {
1589
- background: var(--colorSuccess70, #108D0D);
1590
- border-radius: 30px;
1591
- border: none;
1592
- }
1593
-
1594
- .k-window {
1595
- background: var(--backgroundColor30, #546270);
1596
- border-radius: 30px;
1597
- border: none;
1598
- margin-top: 20px;
1599
- }
1600
-
1601
- .k-window-content {
1602
- background: var(--backgroundColor30, #546270);
1603
- border-radius: 30px;
1604
- border: none;
1580
+ white-space: break-spaces;
1581
+ text-align: center;
1605
1582
  }
1606
1583
 
1607
1584
  .k-dialog[data-dialog-type="info"] .k-dialog-titlebar,
1608
1585
  .k-dialog[data-dialog-type="info"] .k-dialog-title,
1609
1586
  .k-dialog[data-dialog-type="info"] .k-dialog-titlebar:before {
1610
1587
  background-color: var(--backgroundColor30, #546270);
1611
- color: var(--colorWarning40, #f58d11);
1612
- border-radius: 30px;
1588
+ color: var(--colorCalm40, #44e1d8);
1613
1589
  border: none;
1614
- margin-left: 37px;
1590
+ margin: auto;
1615
1591
  margin-top: 20px;
1592
+ white-space: break-spaces;
1593
+ text-align: center;
1616
1594
  }
1617
1595
 
1618
1596
  .k-dialog[data-dialog-type="error"] .k-dialog-titlebar,
@@ -1620,10 +1598,11 @@ h5 {
1620
1598
  .k-dialog[data-dialog-type="error"] .k-dialog-titlebar:before {
1621
1599
  background-color: var(--backgroundColor30, #546270);
1622
1600
  color: var(--colorDanger40, #f03a3a);
1623
- border-radius: 30px;
1624
1601
  border: none;
1625
- margin-left: 45px;
1602
+ margin: auto;
1626
1603
  margin-top: 20px;
1604
+ white-space: break-spaces;
1605
+ text-align: center;
1627
1606
  }
1628
1607
 
1629
1608
  .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar,
@@ -1631,30 +1610,57 @@ h5 {
1631
1610
  .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar:before {
1632
1611
  background-color: var(--backgroundColor30, #546270);
1633
1612
  color: var(--colorWarning40, #f58d11);
1613
+ border: none;
1614
+ margin: auto;
1615
+ margin-top: 20px;
1616
+ white-space: break-spaces;
1617
+ text-align: center;
1618
+ }
1619
+
1620
+ .k-button.k-primary:hover {
1621
+ background: var(--colorSuccess60, #22b920);
1622
+ border-radius: 30px;
1623
+ border: none;
1624
+ }
1625
+
1626
+ .k-button.k-primary:active {
1627
+ background: var(--colorSuccess70, #108D0D);
1628
+ border-radius: 30px;
1629
+ border: none;
1630
+ }
1631
+
1632
+ .k-window {
1633
+ background: var(--backgroundColor30, #546270);
1634
1634
  border-radius: 30px;
1635
1635
  border: none;
1636
- margin-left: 45px;
1637
1636
  margin-top: 20px;
1638
1637
  }
1639
1638
 
1639
+ .k-window-content {
1640
+ background: var(--backgroundColor30, #546270);
1641
+ border-radius: 30px;
1642
+ border: none;
1643
+ }
1644
+
1645
+
1640
1646
  .k-dialog-button-layout-stretched .k-primary:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1641
1647
  color: var(--textColorSuccess40, #f0f0f0);
1642
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%)) !important;
1648
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%) !important;
1643
1649
  border-radius: 20px;
1644
1650
  }
1645
1651
 
1646
1652
  .k-dialog-button-layout-stretched .k-button:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1647
1653
  color: var(--textColorDanger40, #f0f0f0);
1648
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1654
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1649
1655
  border-radius: 20px;
1650
1656
  margin: 3px;
1651
1657
  }
1652
1658
 
1653
1659
  .k-dialog-buttongroup .k-button {
1654
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%)) !important;
1660
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%) !important;
1655
1661
  }
1656
1662
 
1657
- .k-dialog-button-layout-stretched .k-button~.k-button {
1663
+ .k-dialog-button-layout-stretched .k-button.k-button {
1658
1664
  margin: 0;
1659
1665
  border-left-width: 1px;
1660
1666
  border-radius: 20px;
@@ -1664,6 +1670,6 @@ h5 {
1664
1670
 
1665
1671
  .k-dialog-button-layout-stretched .k-button.k-primary:hover {
1666
1672
  color: var(--textColorSuccess40, #f0f0f0);
1667
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%)) !important;
1673
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108D0D) 100%) !important;
1668
1674
  box-shadow: 0px 0px 3px 0px #2FFC2B;
1669
1675
  }