cronapp-framework-mobile-js 3.0.0 → 3.1.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.
Files changed (31) hide show
  1. package/components/crn-icon.components.json +3 -3
  2. package/components/crn-input-floating.components.json +5 -0
  3. package/components/crn-start.components.json +3 -0
  4. package/components/css/app.css +10 -1
  5. package/css/app_2.9.css +21 -0
  6. package/css/fonts/nunito/nunito.css +270 -0
  7. package/css/themes/custom/cosmo/custom-cosmo.css +84 -13
  8. package/css/themes/custom/cyborg/custom-cyborg.css +55 -55
  9. package/css/themes/custom/krypton/custom-krypton.css +540 -313
  10. package/css/themes/custom/material-round/custom-material-round.css +267 -51
  11. package/css/themes/custom/nature/custom-nature.css +1602 -0
  12. package/css/themes/nature.min.css +5 -0
  13. package/dist/components/css/app.css +1 -1
  14. package/dist/css/app_2.9.css +1 -1
  15. package/dist/css/themes/custom/cosmo/custom-cosmo.css +1 -1
  16. package/dist/css/themes/custom/cyborg/custom-cyborg.css +1 -1
  17. package/dist/css/themes/custom/krypton/custom-krypton.css +1 -1
  18. package/dist/css/themes/custom/material-round/custom-material-round.css +1 -1
  19. package/dist/css/themes/custom/nature/custom-nature.css +1 -0
  20. package/dist/css/themes/nature.min.css +1 -0
  21. package/dist/js/app.authentication.js +1 -1
  22. package/dist/js/app.js +1 -1
  23. package/dist/js/controllers.authentication.js +1 -1
  24. package/dist/js/directives.js +2 -2
  25. package/dist/js/upload.service.js +1 -1
  26. package/js/app.authentication.js +8 -4
  27. package/js/app.js +4 -2
  28. package/js/controllers.authentication.js +8 -21
  29. package/js/directives.js +31 -0
  30. package/js/upload.service.js +7 -4
  31. package/package.json +1 -1
package/css/themes/custom/krypton/custom-krypton.css CHANGED
@@ -12,16 +12,17 @@
12
12
  --textSmallSize: 10px;
13
13
  --textNormalSize: 12px;
14
14
  --textMediumSize: 16px;
15
- --textBigSize: 22px;
15
+ --textSmallTitle: 18px;
16
+ --textBigSize: 24px;
16
17
  --textExtraBigSize: 28px;
17
- --textFullSize: 34px;
18
+ --textFullSize: 36px;
18
19
 
19
20
  --textColor10: #fbfbfb;
20
21
  --textColor20: #f7f7f7;
21
22
  --textColor30: #f4f4f4;
22
23
  --textColor40: #f0f0f0;
23
24
  --textColor50: #d2d2d2;
24
- --textColor60: #5F5F5F;
25
+ --textColor60: #5f5f5f;
25
26
  --textColor70: #434343;
26
27
 
27
28
  /* Icon Size */
@@ -39,11 +40,11 @@
39
40
  --menuItemIconWidth: 25px;
40
41
 
41
42
  /* Background */
42
- --backgroundColor10: #CED0D2;
43
+ --backgroundColor10: #ced0d2;
43
44
  --backgroundColor20: #a3a3a3;
44
45
  --backgroundColor30: #546270;
45
46
  --backgroundColor40: #090f13;
46
- --backgroundColor50: #080d11;
47
+ --backgroundColor50: #3a434b;
47
48
  --backgroundColor60: #070b0e;
48
49
  --backgroundColor70: #05080a;
49
50
 
@@ -81,7 +82,7 @@
81
82
  --colorDefault20: #b0b1b1;
82
83
  --colorDefault30: #434343;
83
84
  --colorDefault40: #262c32;
84
- --colorDefault50: #252E36;
85
+ --colorDefault50: #252e36;
85
86
  --colorDefault60: #1c2025;
86
87
  --colorDefault70: #15181b;
87
88
  --textColorDefault10: #434343;
@@ -99,7 +100,7 @@
99
100
  --colorPrimary40: #197fdd;
100
101
  --colorPrimary50: #166fc2;
101
102
  --colorPrimary60: #125da2;
102
- --colorPrimary70: #09467F;
103
+ --colorPrimary70: #09467f;
103
104
  --textColorPrimary10: #838383;
104
105
  --textColorPrimary20: #b0b0b0;
105
106
  --textColorPrimary30: #d2d2d2;
@@ -115,7 +116,7 @@
115
116
  --colorSuccess40: #2ffc2b;
116
117
  --colorSuccess50: #29dd26;
117
118
  --colorSuccess60: #22b920;
118
- --colorSuccess70: #108D0D;
119
+ --colorSuccess70: #108d0d;
119
120
  --textColorSuccess10: #838383;
120
121
  --textColorSuccess20: #b0b0b0;
121
122
  --textColorSuccess30: #d2d2d2;
@@ -130,7 +131,7 @@
130
131
  --colorWarning30: #f7ae7c;
131
132
  --colorWarning40: #f58d11;
132
133
  --colorWarning50: #d77b0f;
133
- --colorWarning60: #B46406;
134
+ --colorWarning60: #b46406;
134
135
  --colorWarning70: #864d09;
135
136
  --textColorWarning10: #838383;
136
137
  --textColorWarning20: #b0b0b0;
@@ -146,7 +147,7 @@
146
147
  --colorDanger30: #f48585;
147
148
  --colorDanger40: #f03a3a;
148
149
  --colorDanger50: #d23333;
149
- --colorDanger60: #7E2121;
150
+ --colorDanger60: #7e2121;
150
151
  --colorDanger70: #832020;
151
152
  --textColorDanger10: #838383;
152
153
  --textColorDanger20: #b0b0b0;
@@ -159,11 +160,11 @@
159
160
  /* Color - Royal (mobile) */
160
161
  --colorRoyal10: #d5d7dc;
161
162
  --colorRoyal20: #5487bd;
162
- --colorRoyal30: #394C5E;
163
+ --colorRoyal30: #394c5e;
163
164
  --colorRoyal40: #0e3760;
164
165
  --colorRoyal50: #0c3054;
165
166
  --colorRoyal60: #0a2846;
166
- --colorRoyal70: #1A2E43;
167
+ --colorRoyal70: #1a2e43;
167
168
  --textColorRoyal10: #838383;
168
169
  --textColorRoyal20: #b0b0b0;
169
170
  --textColorRoyal30: #d2d2d2;
@@ -177,8 +178,8 @@
177
178
  --colorCalm20: #68f8f1;
178
179
  --colorCalm30: #4eebe3;
179
180
  --colorCalm40: #44e1d8;
180
- --colorCalm50: #00ABC2;
181
- --colorCalm60: #169F97;
181
+ --colorCalm50: #00abc2;
182
+ --colorCalm60: #169f97;
182
183
  --colorCalm70: #077988;
183
184
  --textColorCalm10: #838383;
184
185
  --textColorCalm20: #b0b0b0;
@@ -194,7 +195,7 @@
194
195
  --colorLight30: #aebbc7;
195
196
  --colorLight40: #8da0b2;
196
197
  --colorLight50: #7b8c9c;
197
- --colorLight60: #303B46;
198
+ --colorLight60: #303b46;
198
199
  --colorLight70: #4d5861;
199
200
  --textColorLight10: #838383;
200
201
  --textColorLight20: #677582;
@@ -203,12 +204,13 @@
203
204
  --textColorLight50: #f4f4f4;
204
205
  --textColorLight60: #f7f7f7;
205
206
  --textColorLight70: #fbfbfb;
207
+
206
208
  /* Color - Stable (mobile) */
207
209
  --colorStable10: #e1e1e1;
208
210
  --colorStable20: #c6c6c6;
209
211
  --colorStable30: #a7a7a7;
210
212
  --colorStable40: #818181;
211
- --colorStable50: #4D4D4D;
213
+ --colorStable50: #4d4d4d;
212
214
  --colorStable60: #5f5f5f;
213
215
  --colorStable70: #3e4042;
214
216
  --textColorStable10: #838383;
@@ -224,9 +226,9 @@
224
226
  --colorDark20: #999999;
225
227
  --colorDark30: #5e5e5e;
226
228
  --colorDark40: #000000;
227
- --colorDark50: #0A141E;
229
+ --colorDark50: #0a141e;
228
230
  --colorDark60: #000000;
229
- --colorDark70: #000000;
231
+ --colorDark70: #0f1e2e;
230
232
  --textColorDark10: #838383;
231
233
  --textColorDark20: #b0b0b0;
232
234
  --textColorDark30: #d2d2d2;
@@ -236,26 +238,26 @@
236
238
  --textColorDark70: #fbfbfb;
237
239
 
238
240
  /* Color - Neutral (web e mobile) */
239
- --colorNeutral00: #FFFFFF;
240
- --colorNeutral10: #F1F1F1;
241
- --colorNeutral20: #E3E3E3;
242
- --colorNeutral30: #D5D5D5;
243
- --colorNeutral40: #C7C7C7;
244
- --colorNeutral50: #B9B9B9;
245
- --colorNeutral60: #ACACAC;
246
- --colorNeutral70: #9E9E9E;
241
+ --colorNeutral00: #ffffff;
242
+ --colorNeutral10: #f1f1f1;
243
+ --colorNeutral20: #e3e3e3;
244
+ --colorNeutral30: #d5d5d5;
245
+ --colorNeutral40: #c7c7c7;
246
+ --colorNeutral50: #b9b9b9;
247
+ --colorNeutral60: #acacac;
248
+ --colorNeutral70: #9e9e9e;
247
249
  --colorNeutral80: #909090;
248
250
  --colorNeutral90: #828282;
249
251
  --colorNeutral100: #747474;
250
252
  --colorNeutral110: #666666;
251
- --colorNeutral120: #5D5D5D;
253
+ --colorNeutral120: #5d5d5d;
252
254
  --colorNeutral130: #535353;
253
- --colorNeutral140: #4A4A4A;
255
+ --colorNeutral140: #4a4a4a;
254
256
  --colorNeutral150: #414141;
255
257
  --colorNeutral160: #383838;
256
- --colorNeutral170: #2E2E2E;
258
+ --colorNeutral170: #2e2e2e;
257
259
  --colorNeutral180: #252525;
258
- --colorNeutral190: #1C1C1C;
260
+ --colorNeutral190: #1c1c1c;
259
261
  --colorNeutral200: #131313;
260
262
  --colorNeutral210: #090909;
261
263
  --colorNeutral220: #000000;
@@ -263,17 +265,17 @@
263
265
  /* === Variables used exclusively in the color palette property === */
264
266
 
265
267
  /* 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%);
268
+ --btnDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
269
+ --btnPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
270
+ --btnSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
271
+ --btnCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
272
+ --btnWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
273
+ --btnDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
274
+ --btnLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
273
275
  --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%);
276
+ --btnStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
277
+ --btnRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
278
+ --btnDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
277
279
 
278
280
  --textColorDefault: var(--textColorDefault40, #f0f0f0);
279
281
  --textColorPrimary: var(--textColorPrimary40, #f0f0f0);
@@ -299,28 +301,28 @@
299
301
  --borderBtnDark: transparent;
300
302
 
301
303
  /* 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%);
304
+ --colorDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
305
+ --colorPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
306
+ --colorSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
307
+ --colorCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
308
+ --colorWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
309
+ --colorDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
310
+ --colorLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
311
+ --colorStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
312
+ --colorRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
313
+ --colorDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
312
314
 
313
315
  /* 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%);
316
+ --checkboxDefault: var(--colorDefault40, #262c32);
317
+ --checkboxPrimary: var(--colorPrimary40, #197fdd);
318
+ --checkboxSuccess: var(--colorSuccess40, #2ffc2b);
319
+ --checkboxCalm: var(--colorCalm40, #44e1d8);
320
+ --checkboxWarning: var(--colorWarning40, #f58d11);
321
+ --checkboxDanger: var(--colorDanger40, #f03a3a);
322
+ --checkboxLight: var(--colorLight40, #8da0b2);
323
+ --checkboxStable: var(--colorStable40, #818181);
324
+ --checkboxRoyal: var(--colorRoyal40, #0e3760);
325
+ --checkboxDark: var(--colorDark40, #000000);
324
326
 
325
327
  --borderCheckboxDefault: transparent;
326
328
  --borderCheckboxPrimary: transparent;
@@ -334,39 +336,39 @@
334
336
  --borderCheckboxDark: transparent;
335
337
 
336
338
  /* 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%));
339
+ --toggleDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
340
+ --togglePrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
341
+ --toggleSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
342
+ --toggleCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
343
+ --toggleWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
344
+ --toggleDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
345
+ --toggleLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
346
+ --toggleStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
347
+ --toggleRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
348
+ --toggleDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
349
+
350
+ --borderToggleDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
351
+ --borderTogglePrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
352
+ --borderToggleSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
353
+ --borderToggleCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
354
+ --borderToggleWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
355
+ --borderToggleDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
356
+ --borderToggleLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
357
+ --borderToggleStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
358
+ --borderToggleRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
359
+ --borderToggleDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
358
360
 
359
361
  /* 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%));
362
+ --bgDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
363
+ --bgPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
364
+ --bgSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
365
+ --bgCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
366
+ --bgWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
367
+ --bgDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
368
+ --bgLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
369
+ --bgStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
370
+ --bgRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
371
+ --bgDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
370
372
 
371
373
  --borderActiveBackgroundDefault: transparent;
372
374
  --borderActiveBackgroundPrimary: transparent;
@@ -379,16 +381,17 @@
379
381
  --borderActiveBackgroundRoyal: transparent;
380
382
  --borderActiveBackgroundDark: transparent;
381
383
 
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%));
384
+ --activeBackgroundDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
385
+ --activeBackgroundPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
386
+ --activeBackgroundSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
387
+ --activeBackgroundCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
388
+ --activeBackgroundWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
389
+ --activeBackgroundDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
390
+ --activeBackgroundLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
391
+ --activeBackgroundStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
392
+ --activeBackgroundRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
393
+ --activeBackgroundDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
394
+
392
395
  --ionSegmentDefault: var(--textColorPrimary40, #f0f0f0);
393
396
  --ionSegmentPrimary: var(--textColorDefault40, #f0f0f0);
394
397
  --ionSegmentSuccess: var(--textColorSuccess40, #f0f0f0);
@@ -400,63 +403,63 @@
400
403
  --ionSegmentRoyal: var(--textColorRoyal40, #f0f0f0);
401
404
  --ionSegmentDark: var(--textColorDark40, #f0f0f0);
402
405
 
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%));
406
+ --iconThemeLightDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
407
+ --iconThemeLightPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
408
+ --iconThemeLightSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
409
+ --iconThemeLightCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
410
+ --iconThemeLightWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
411
+ --iconThemeLightDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
412
+ --iconThemeLightLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
413
+ --iconThemeLightStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
414
+ --iconThemeLightRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
415
+ --iconThemeLightDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
413
416
 
414
417
  /* 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%));
418
+ --tabsDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
419
+ --tabsPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
420
+ --tabsSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
421
+ --tabsCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
422
+ --tabsWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
423
+ --tabsDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
424
+ --tabsLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
425
+ --tabsStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
426
+ --tabsRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
427
+ --tabsDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
425
428
 
426
429
  /* 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%));
430
+ --barDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
431
+ --barPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
432
+ --barSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
433
+ --barCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
434
+ --barWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
435
+ --barDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
436
+ --barLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
437
+ --barStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
438
+ --barRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
439
+ --barDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1e2e) 100%);
437
440
 
438
441
  /* 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);
442
+ --backgroundDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
443
+ --backgroundPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
444
+ --backgroundSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
445
+ --backgroundCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
446
+ --backgroundWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
447
+ --backgroundDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
448
+ --backgroundLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
449
+ --backgroundStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
450
+ --backgroundRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
451
+ --backgroundDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
452
+
453
+ --tabsIconDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
454
+ --tabsIconPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
455
+ --tabsIconSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
456
+ --tabsIconCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
457
+ --tabsIconWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
458
+ --tabsIconDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
459
+ --tabsIconLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
460
+ --tabsIconStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
461
+ --tabsIconRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
462
+ --tabsIconDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
460
463
  /* End - Variables used exclusively in the color palette property */
461
464
  }
462
465
 
@@ -473,25 +476,42 @@ h6,
473
476
  .h5,
474
477
  .h6 {
475
478
  font-family: var(--fontFamily, "Open Sans", "Arial", sans-serif);
479
+ color: var(--textColor40, #f0f0f0);
480
+ }
481
+
482
+ h1 {
483
+ font-size: var(--textFullSize, 36px);
484
+ }
485
+
486
+ .h3 {
487
+ font-size: var(--textBigSize, 24px);
488
+ }
489
+
490
+ .h5 {
491
+ font-size: var(--textSmallTitle, 18px);
492
+ }
493
+
494
+ h2 {
495
+ font-size: 18px;
476
496
  }
477
497
 
478
498
  a,
479
499
  a:focus,
480
500
  a:active,
481
501
  a:hover {
482
- color: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
502
+ color: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
483
503
  }
484
504
 
485
505
  .light,
486
506
  a.light,
487
507
  .color-light {
488
- color: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
508
+ color: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
489
509
  }
490
510
 
491
511
  .stable,
492
512
  a.stable,
493
513
  .color-stable {
494
- color: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
514
+ color: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
495
515
  }
496
516
 
497
517
  /* Login */
@@ -553,8 +573,8 @@ a.stable,
553
573
 
554
574
  /* Cabeçalho */
555
575
  .bar.bar-default {
556
- border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
557
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
576
+ border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
577
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
558
578
  color: var(--textColorPrimary40, #f0f0f0);
559
579
  }
560
580
 
@@ -564,8 +584,8 @@ a.stable,
564
584
  }
565
585
 
566
586
  .bar.bar-positive {
567
- border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
568
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
587
+ border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
588
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
569
589
  color: var(--textColorDefault40, #f0f0f0);
570
590
  }
571
591
 
@@ -576,28 +596,30 @@ a.stable,
576
596
 
577
597
  /* Menu */
578
598
  .menu-view {
579
- background: var(--colorLight60, #303B46);
599
+ background: var(--colorLight60, #303b46);
580
600
  color: var(--textColor10, #f0f0f0);
581
601
  }
582
602
 
583
- #menu-blue .item:hover,
603
+ #menu-blue .item:hover {
604
+ background: var(--backgroundColor30, #546270);
605
+ }
606
+
584
607
  #menu-blue .item:active,
585
608
  #menu-blue .item.actived {
586
- background: var(--backgroundColor30, #f4f4f4);
609
+ background: var(--backgroundColor50, #3a434b);
587
610
  }
588
611
 
589
612
  /* Button Positive */
590
613
  .button.button-positive {
591
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
614
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
592
615
  }
593
616
 
594
617
  .button.button-positive:active,
595
618
  .button.button-positive.activated {
596
- background: var(--colorPrimary70, #09467F);
619
+ background: var(--colorPrimary70, #09467f);
597
620
  }
598
621
 
599
622
  /* Light - Outline */
600
-
601
623
  .button.button-light.button-outline {
602
624
  border-color: none;
603
625
  }
@@ -628,67 +650,154 @@ a.stable,
628
650
  }
629
651
 
630
652
  /* Rodapé com ícone */
631
-
632
653
  .tabs-striped.background-default .tabs {
633
- background: var(--textColorDefault40, #f0f0f0);
654
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
655
+ }
656
+
657
+ .tabs-striped.background-positive .tabs {
658
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
659
+ }
660
+
661
+ .tabs-striped.background-balanced .tabs {
662
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
663
+ }
664
+
665
+ .tabs-striped.background-calm .tabs {
666
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
667
+ }
668
+
669
+ .tabs-striped.background-energized .tabs {
670
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
671
+ }
672
+
673
+ .tabs-striped.background-assertive .tabs {
674
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
675
+ }
676
+
677
+ .tabs-striped.background-light .tabs {
678
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
679
+ }
680
+
681
+ .tabs-striped.background-stable .tabs {
682
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
683
+ }
684
+
685
+ .tabs-striped.background-royal .tabs {
686
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
687
+ }
688
+
689
+ .tabs-striped.background-dark .tabs {
690
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
634
691
  }
635
692
 
636
693
  .tabs-striped.tabs-icon-default .tab-item {
637
694
  color: var(--textColorDefault40, #f0f0f0);
638
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
695
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
639
696
  opacity: 0.5;
640
697
  }
641
698
 
699
+ /* Rodapé com botões*/
700
+ .bar.bar-default.bar-footer,
701
+ .bar.bar-default {
702
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
703
+ }
704
+
705
+ .bar.bar-positive.bar-footer,
706
+ .bar.bar-positive {
707
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
708
+ }
709
+
710
+ .bar.bar-balanced.bar-footer,
711
+ .bar.bar-balanced {
712
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
713
+ }
714
+
715
+ .bar.bar-calm.bar-footer,
716
+ .bar.bar-calm {
717
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
718
+ }
719
+
720
+ .bar.bar-energized.bar-footer,
721
+ .bar.bar-energized {
722
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
723
+ }
724
+
725
+ .bar.bar-assertive.bar-footer,
726
+ .bar.bar-assertive {
727
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
728
+ }
729
+
730
+ .bar.bar-light.bar-footer,
731
+ .bar.bar-light {
732
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
733
+ }
734
+
735
+ .bar.bar-stable.bar-footer,
736
+ .bar.bar-stable {
737
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
738
+ }
739
+
740
+ .bar.bar-royal.bar-footer,
741
+ .bar.bar-royal {
742
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
743
+ }
744
+
745
+ .bar.bar-dark.bar-footer,
746
+ .bar.bar-dark {
747
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
748
+ }
749
+
642
750
  .item-input .icon {
643
751
  font-size: 12px;
644
752
  }
645
753
 
646
754
  .button.button-default {
647
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
755
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
648
756
  }
649
757
 
650
758
  .button.button-default:hover {
651
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
759
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
760
+ box-shadow: 0px 0px 3px 0px #3a4753;
652
761
  }
653
762
 
654
763
  .button.button-default:active,
655
764
  .button.button-default.activated {
656
- background: var(--colorDefault60, #1c2025);
765
+ background: var(--colorDefault50, #252e36);
657
766
  }
658
767
 
659
768
  .login-mobile .button.button-light {
660
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
769
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
661
770
  color: var(--textColorWarning40, #f0f0f0);
662
771
  border-radius: 20px;
663
772
  }
664
773
 
665
774
  .login-mobile .button.button-light:hover {
666
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
775
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
667
776
  color: var(--textColorWarning40, #f0f0f0);
668
777
  }
669
778
 
670
779
  .login-mobile .button.button-light:active {
671
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
780
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
672
781
  color: var(--textColorWarning40, #f0f0f0);
673
782
  }
674
783
 
675
784
  .button#button-reset-password {
676
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
785
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
677
786
  color: var(--textColorWarning40, #ffffff);
678
787
  }
679
788
 
680
789
  .button#button-reset-password:hover {
681
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
790
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
682
791
  color: var(--textColorWarning40, #f0f0f0);
683
792
  }
684
793
 
685
794
  .button#button-reset-password:active {
686
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
795
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
687
796
  color: var(--textColorWarning40, #f0f0f0);
688
797
  }
689
798
 
690
799
  .item-radio input:checked+.radio-content .item-content {
691
- background: var(--backgroundColor40, #f2f2f2);
800
+ background: var(--backgroundColor40, #090f13);
692
801
  color: var(--textColor40, #f0f0f0);
693
802
  }
694
803
 
@@ -709,24 +818,24 @@ a.stable,
709
818
 
710
819
  input[placeholder]:not([placeholder=""])::placeholder {
711
820
  /* Chrome, Firefox, Opera, Safari 10.1+ */
712
- color: var(--textColor60, #5F5F5F);
821
+ color: var(--textColor60, #5f5f5f);
713
822
  opacity: 1;
714
823
  /* Firefox */
715
824
  }
716
825
 
717
826
  input:-ms-input-placeholder {
718
827
  /* Internet Explorer 10-11 */
719
- color: var(--textColor60, #5F5F5F);
828
+ color: var(--textColor60, #5f5f5f);
720
829
  }
721
830
 
722
831
  input::-ms-input-placeholder {
723
832
  /* Microsoft Edge */
724
- color: var(--textColor60, #5F5F5F);
833
+ color: var(--textColor60, #5f5f5f);
725
834
  margin-left: 10px;
726
835
  }
727
836
 
728
837
  .list-inset .item.item-input input {
729
- background: var(--backgroundColor10, #CED0D2);
838
+ background: var(--backgroundColor10, #ced0d2);
730
839
  color: var(--textColor70, #434343);
731
840
  border-radius: 20px;
732
841
  border-bottom: 0;
@@ -735,13 +844,21 @@ input::-ms-input-placeholder {
735
844
  .modal .item {
736
845
  border-width: 1px;
737
846
  border-color: none;
738
- background: var(--backgroundColor10, #CED0D2);
847
+ background: var(--backgroundColor10, #ced0d2);
739
848
  color: var(--textColor40, #f0f0f0);
740
849
  }
741
850
 
851
+ .k-widget.k-window .k-window-titlebar .k-window-title {
852
+ color: var(--textColor40, #f0f0f0);
853
+ margin-top: 23px;
854
+ }
855
+
856
+ .k-widget.k-window {
857
+ border-radius: 20px;
858
+ }
742
859
 
743
860
  .item-input-wrapper {
744
- background: var(--backgroundColor40, #f2f2f2);
861
+ background: var(--backgroundColor40, #090f13);
745
862
  }
746
863
 
747
864
  .ion-search:before {
@@ -760,6 +877,7 @@ input[type="password"] {
760
877
  padding-left: 10px;
761
878
  height: 34px;
762
879
  line-height: 16px;
880
+ color: var(--textColor70, #434343);
763
881
  }
764
882
 
765
883
  .login-mobile .button {
@@ -801,7 +919,7 @@ button#crn-button-signup:hover {
801
919
 
802
920
  /*Default*/
803
921
  .button.button-default.button-outline {
804
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
922
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
805
923
  border-color: transparent;
806
924
  color: var(--textColor40, #f0f0f0);
807
925
  }
@@ -811,7 +929,7 @@ button#crn-button-signup:hover {
811
929
  }
812
930
 
813
931
  .button.button-default.button-outline:active {
814
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
932
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
815
933
  }
816
934
 
817
935
  .button.button-default.button-outline i {
@@ -820,11 +938,20 @@ button#crn-button-signup:hover {
820
938
 
821
939
  /*Secundary*/
822
940
  .button.button-positive {
823
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
941
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
942
+ }
943
+
944
+ .button.button-positive:hover {
945
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
946
+ box-shadow: 0px 0px 3px 0px #187ad4;
947
+ }
948
+
949
+ .button.button-positive:active {
950
+ background: var(--colorPrimary70, #09467f);
824
951
  }
825
952
 
826
953
  .button.button-positive.button-outline {
827
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
954
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
828
955
  border-color: transparent;
829
956
  color: var(--textColorDefault40, #f0f0f0);
830
957
  border-bottom: 0;
@@ -835,7 +962,7 @@ button#crn-button-signup:hover {
835
962
  }
836
963
 
837
964
  .button.button-positive.button-outline:active {
838
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
965
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
839
966
  border-bottom: 0;
840
967
  }
841
968
 
@@ -845,15 +972,20 @@ button#crn-button-signup:hover {
845
972
 
846
973
  /*Success*/
847
974
  .button.button-balanced {
848
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
975
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
976
+ }
977
+
978
+ .button.button-balanced:hover {
979
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
980
+ box-shadow: 0px 0px 3px 0px #2ffc2b;
849
981
  }
850
982
 
851
983
  .button.button-balanced:active {
852
- background: var(--colorSuccess70, #108D0D);
984
+ background: var(--colorSuccess70, #108d0d);
853
985
  }
854
986
 
855
987
  .button.button-balanced.button-outline {
856
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
988
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
857
989
  border-color: transparent;
858
990
  color: var(--textColorDefault40, #f0f0f0);
859
991
  border-bottom: 0;
@@ -864,7 +996,7 @@ button#crn-button-signup:hover {
864
996
  }
865
997
 
866
998
  .button.button-balanced.button-outline:active {
867
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
999
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
868
1000
  }
869
1001
 
870
1002
  .button.button-balanced.button-outline i {
@@ -873,11 +1005,20 @@ button#crn-button-signup:hover {
873
1005
 
874
1006
  /*Calm*/
875
1007
  .button.button-calm {
876
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1008
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1009
+ }
1010
+
1011
+ .button.button-calm:hover {
1012
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1013
+ box-shadow: 0px 0px 3px 0px #42dcd3;
1014
+ }
1015
+
1016
+ .button.button-calm:active {
1017
+ background: var(--colorCalm60, #169f97);
877
1018
  }
878
1019
 
879
1020
  .button.button-calm.button-outline {
880
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1021
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
881
1022
  border-color: transparent;
882
1023
  color: var(--textColorDefault40, #f0f0f0);
883
1024
  border-bottom: 0;
@@ -888,7 +1029,7 @@ button#crn-button-signup:hover {
888
1029
  }
889
1030
 
890
1031
  .button.button-calm.button-outline:active {
891
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1032
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
892
1033
  }
893
1034
 
894
1035
  .button.button-calm.button-outline i {
@@ -897,11 +1038,20 @@ button#crn-button-signup:hover {
897
1038
 
898
1039
  /*Warning*/
899
1040
  .button.button-energized {
900
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1041
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1042
+ }
1043
+
1044
+ .button.button-energized:hover {
1045
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1046
+ box-shadow: 0px 0px 3px 0px #f58d11;
1047
+ }
1048
+
1049
+ .button.button-energized:active {
1050
+ background: var(--colorWarning60, #b46406);
901
1051
  }
902
1052
 
903
1053
  .button.button-energized.button-outline {
904
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1054
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
905
1055
  border-color: transparent;
906
1056
  color: var(--textColorDefault40, #f0f0f0);
907
1057
  border-bottom: 0;
@@ -912,7 +1062,7 @@ button#crn-button-signup:hover {
912
1062
  }
913
1063
 
914
1064
  .button.button-energized.button-outline:active {
915
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1065
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
916
1066
  }
917
1067
 
918
1068
  .button.button-energized.button-outline i {
@@ -921,12 +1071,21 @@ button#crn-button-signup:hover {
921
1071
 
922
1072
  /*Danger*/
923
1073
  .button.button-assertive {
924
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1074
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
925
1075
  border-bottom: 0;
926
1076
  }
927
1077
 
1078
+ .button.button-assertive:hover {
1079
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1080
+ box-shadow: 0px 0px 3px 0px #de3636;
1081
+ }
1082
+
1083
+ .button.button-assertive:active {
1084
+ background: var(--colorDanger60, #7e2121);
1085
+ }
1086
+
928
1087
  .button.button-assertive.button-outline {
929
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1088
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
930
1089
  border-color: transparent;
931
1090
  color: var(--textColorDanger40, #f0f0f0);
932
1091
  }
@@ -936,7 +1095,7 @@ button#crn-button-signup:hover {
936
1095
  }
937
1096
 
938
1097
  .button.button-assertive.button-outline:active {
939
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1098
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
940
1099
  }
941
1100
 
942
1101
  .button.button-assertive.button-outline i {
@@ -945,12 +1104,21 @@ button#crn-button-signup:hover {
945
1104
 
946
1105
  /*Light*/
947
1106
  .button.button-light {
948
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1107
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
949
1108
  border-bottom: 0;
950
1109
  }
951
1110
 
1111
+ .button.button-light:hover {
1112
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1113
+ box-shadow: 0px 0px 3px 0px #8da0b2;
1114
+ }
1115
+
1116
+ .button.button-light:active {
1117
+ background: var(--colorLight60, #303b46);
1118
+ }
1119
+
952
1120
  .button.button-light.button-outline {
953
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1121
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
954
1122
  border-color: transparent;
955
1123
  color: var(--textColorLight40, #f0f0f0);
956
1124
  }
@@ -960,7 +1128,7 @@ button#crn-button-signup:hover {
960
1128
  }
961
1129
 
962
1130
  .button.button-light.button-outline:active {
963
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1131
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
964
1132
  }
965
1133
 
966
1134
  .button.button-light.button-outline i {
@@ -969,17 +1137,22 @@ button#crn-button-signup:hover {
969
1137
 
970
1138
  /*Stable*/
971
1139
  .button.button-stable {
972
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1140
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
973
1141
  border-bottom: 0;
974
1142
  }
975
1143
 
1144
+ .button.button-stable:hover {
1145
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1146
+ box-shadow: 0px 0px 3px 0px #7b7b7b;
1147
+ }
1148
+
976
1149
  .button.button-stable:active,
977
1150
  .button.button-stable.activated {
978
- background: var(--colorStable50, #4D4D4D);
1151
+ background: var(--colorStable50, #4d4d4d);
979
1152
  }
980
1153
 
981
1154
  .button.button-stable.button-outline {
982
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1155
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
983
1156
  border-color: transparent;
984
1157
  color: var(--textColorStable40, #434343);
985
1158
  }
@@ -989,7 +1162,7 @@ button#crn-button-signup:hover {
989
1162
  }
990
1163
 
991
1164
  .button.button-stable.button-outline:active {
992
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1165
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
993
1166
  }
994
1167
 
995
1168
  .button.button-stable.button-outline i {
@@ -998,17 +1171,22 @@ button#crn-button-signup:hover {
998
1171
 
999
1172
  /*Royal*/
1000
1173
  .button.button-royal {
1001
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1174
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1002
1175
  border-bottom: 0;
1003
1176
  }
1004
1177
 
1178
+ .button.button-royal:hover {
1179
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1180
+ box-shadow: 0px 0px 3px 0px #11375d;
1181
+ }
1182
+
1005
1183
  .button.button-royal:active,
1006
1184
  .button.button-royal.activated {
1007
- background: var(--colorRoyal70, #1A2E43);
1185
+ background: var(--colorRoyal70, #1a2e43);
1008
1186
  }
1009
1187
 
1010
1188
  .button.button-royal.button-outline {
1011
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1189
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1012
1190
  border-color: transparent;
1013
1191
  color: var(--textColorRoyal40, #f0f0f0);
1014
1192
  }
@@ -1018,7 +1196,7 @@ button#crn-button-signup:hover {
1018
1196
  }
1019
1197
 
1020
1198
  .button.button-royal.button-outline:active {
1021
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1199
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1022
1200
  }
1023
1201
 
1024
1202
  .button.button-royal.button-outline i {
@@ -1026,21 +1204,24 @@ button#crn-button-signup:hover {
1026
1204
  }
1027
1205
 
1028
1206
  /*Dark*/
1029
-
1030
1207
  .button.button-dark {
1031
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1208
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1209
+ }
1032
1210
 
1211
+ .button.button-dark:hover {
1212
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1213
+ box-shadow: 0px 0px 3px 0px #132639;
1033
1214
  }
1034
1215
 
1035
1216
  .button.button-dark:active,
1036
1217
  .button.button-dark.activated {
1037
- background: var(--colorDark50, #0A141E);
1218
+ background: var(--colorDark50, #0a141e);
1038
1219
  border-bottom: 0;
1039
1220
  border-top: 0;
1040
1221
  }
1041
1222
 
1042
1223
  .button.button-dark.button-outline {
1043
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1224
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1044
1225
  border-color: transparent;
1045
1226
  color: var(--textColorDark40, #f0f0f0);
1046
1227
  border-bottom: 0;
@@ -1052,7 +1233,7 @@ button#crn-button-signup:hover {
1052
1233
  }
1053
1234
 
1054
1235
  .button.button-dark.button-outline:active {
1055
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1236
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1056
1237
  }
1057
1238
 
1058
1239
  .button.button-dark.button-outline i {
@@ -1075,7 +1256,7 @@ button#crn-button-signup:hover {
1075
1256
  }
1076
1257
 
1077
1258
  .button#button-reset-password {
1078
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1259
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1079
1260
  color: var(--textColorWarning40, #ffffff);
1080
1261
  border-radius: 20px;
1081
1262
  }
@@ -1091,7 +1272,7 @@ button#crn-button-signup {
1091
1272
  justify-content: center;
1092
1273
  align-items: center;
1093
1274
  display: flex;
1094
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1275
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1095
1276
  }
1096
1277
 
1097
1278
  .crn-ion-segment-light ul li a,
@@ -1103,8 +1284,7 @@ button#crn-button-signup {
1103
1284
  }
1104
1285
 
1105
1286
  .item h3:last-child,
1106
- .item h3,
1107
- .item h2 {
1287
+ .item h3 {
1108
1288
  color: var(--textColorDark40, #f0f0f0);
1109
1289
  }
1110
1290
 
@@ -1113,53 +1293,63 @@ button#crn-button-signup {
1113
1293
  border-radius: 20px;
1114
1294
  }
1115
1295
 
1116
- div.crn-ion-segment-classic ul.active-background-default li.active {
1117
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1296
+ .crn-ion-segment-classic ul.active-background-default li.active a {
1297
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1298
+ color: var(--textColor40, #f0f0f0);
1118
1299
  }
1119
1300
 
1120
- div.crn-ion-segment-classic ul.active-background-positive li.active {
1121
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1301
+ .crn-ion-segment-classic ul.active-background-positive li.active a {
1302
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1303
+ color: var(--textColor40, #f0f0f0);
1122
1304
  }
1123
1305
 
1124
- div.crn-ion-segment-classic ul.active-background-balanced li.active {
1125
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1306
+ .crn-ion-segment-classic ul.active-background-balanced li.active a {
1307
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
1308
+ color: var(--textColor40, #f0f0f0);
1126
1309
  }
1127
1310
 
1128
- div.crn-ion-segment-classic ul.active-background-calm li.active {
1129
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1311
+ .crn-ion-segment-classic ul.active-background-calm li.active a {
1312
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1313
+ color: var(--textColor40, #f0f0f0);
1130
1314
  }
1131
1315
 
1132
- div.crn-ion-segment-classic ul.active-background-energized li.active {
1133
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1316
+ .crn-ion-segment-classic ul.active-background-energized li.active a {
1317
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1318
+ color: var(--textColor40, #f0f0f0);
1134
1319
  }
1135
1320
 
1136
- div.crn-ion-segment-classic ul.active-background-assertive li.active {
1137
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1321
+ .crn-ion-segment-classic ul.active-background-assertive li.active a {
1322
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1323
+ color: var(--textColor40, #f0f0f0);
1138
1324
  }
1139
1325
 
1140
- div.crn-ion-segment-classic ul.active-background-light li.active {
1141
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1326
+ .crn-ion-segment-classic ul.active-background-light li.active a {
1327
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1328
+ color: var(--textColor40, #f0f0f0);
1142
1329
  }
1143
1330
 
1144
- div.crn-ion-segment-classic ul.active-background-stable li.active {
1145
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1331
+ .crn-ion-segment-classic ul.active-background-stable li.active a {
1332
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1333
+ color: var(--textColor40, #f0f0f0);
1146
1334
  }
1147
1335
 
1148
- div.crn-ion-segment-classic ul.active-background-royal li.active {
1149
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1336
+ .crn-ion-segment-classic ul.active-background-royal li.active a {
1337
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1338
+ color: var(--textColor40, #f0f0f0);
1150
1339
  }
1151
1340
 
1152
- div.crn-ion-segment-classic ul.active-background-dark li.active {
1153
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1341
+ .crn-ion-segment-classic ul.active-background-dark li.active a {
1342
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1343
+ color: var(--textColor40, #f0f0f0);
1154
1344
  }
1155
1345
 
1156
1346
  canvas {
1157
- background: var(--backgroundColor10, #CED0D2);
1347
+ background: var(--backgroundColor10, #ced0d2);
1158
1348
  }
1159
1349
 
1160
1350
  /* Cores icones*/
1161
1351
  .default {
1162
- color: var(--textColor40, #f0f0f0);
1352
+ color: var(--colorDefault40, #262c32);
1163
1353
  }
1164
1354
 
1165
1355
  .positive {
@@ -1200,7 +1390,7 @@ canvas {
1200
1390
 
1201
1391
  /* Cores Links*/
1202
1392
  .color-default {
1203
- color: var(--textColor40, #f0f0f0);
1393
+ color: var(--colorDefault40, #262c32);
1204
1394
  }
1205
1395
 
1206
1396
  .color-positive {
@@ -1239,119 +1429,123 @@ canvas {
1239
1429
  color: var(--colorDark40, #000000);
1240
1430
  }
1241
1431
 
1242
-
1243
1432
  /*Cores Checkbox*/
1244
1433
  .checkbox input:before {
1245
1434
  border-radius: 2px;
1246
1435
  }
1247
1436
 
1248
1437
  .checkbox-default input:checked:before {
1249
- color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1438
+ background: var(--colorDefault40, #262c32);
1250
1439
  border-color: var(--colorDefault40, #262c32);
1251
1440
  border-radius: 2px;
1252
1441
  }
1253
1442
 
1254
1443
  .checkbox-positive input:checked:before {
1255
- color: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1444
+ background: var(--colorPrimary40, #197fdd);
1256
1445
  border-color: var(--colorPrimary40, #197fdd);
1257
1446
  border-radius: 2px;
1258
1447
  }
1259
1448
 
1260
1449
  .checkbox-balanced input:checked:before {
1261
- color: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1450
+ background: var(--colorSuccess40, #2ffc2b);
1262
1451
  border-color: var(--colorSuccess60, #22b920);
1263
1452
  border-radius: 2px;
1264
1453
  }
1265
1454
 
1266
1455
  .checkbox-calm input:checked:before {
1267
- color: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1456
+ background: var(--colorCalm40, #44e1d8);
1268
1457
  border-color: var(--colorCalm40, #44e1d8);
1269
1458
  border-radius: 2px;
1270
1459
  }
1271
1460
 
1272
1461
  .checkbox-energized input:checked:before {
1273
- color: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1462
+ background: var(--colorWarning40, #f58d11);
1274
1463
  border-color: var(--colorWarning40, #f58d11);
1275
1464
  border-radius: 2px;
1276
1465
  }
1277
1466
 
1278
1467
  .checkbox-assertive input:checked:before {
1279
- color: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1468
+ background: var(--colorDanger40, #f03a3a);
1280
1469
  border-color: var(--colorDanger40, #f03a3a);
1281
1470
  border-radius: 2px;
1282
1471
  }
1283
1472
 
1284
1473
  .checkbox-light input:checked:before {
1285
- color: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1474
+ background: var(--colorLight40, #8da0b2);
1286
1475
  border-color: var(--colorLight40, #8da0b2);
1287
1476
  border-radius: 2px;
1288
1477
  }
1289
1478
 
1290
1479
  .checkbox-stable input:checked:before {
1291
- color: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1480
+ background: var(--colorStable40, #818181);
1292
1481
  border-color: var(--colorStable40, #818181);
1293
1482
  border-radius: 2px;
1294
1483
  }
1295
1484
 
1296
1485
  .checkbox-royal input:checked:before {
1297
- color: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1486
+ background: var(--colorRoyal40, #0e3760);
1298
1487
  border-color: var(--colorRoyal40, #0e3760);
1299
1488
  border-radius: 2px;
1300
1489
  }
1301
1490
 
1302
1491
  .checkbox-dark input:checked:before {
1303
- color: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1492
+ background: var(--colorDark40, #000000);
1304
1493
  border-color: var(--colorDark40, #000000);
1305
1494
  border-radius: 2px;
1306
1495
  }
1307
1496
 
1308
1497
  /*Toogle*/
1309
- .toggle.toggle-default {
1310
- color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1498
+ .toggle.toggle-default input:checked+.track {
1499
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1500
+ border-color: var(--colorDefault40, #262c32);
1311
1501
  }
1312
1502
 
1313
- .toggle.toggle-positive {
1314
- color: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1503
+ .toggle.toggle-positive input:checked+.track {
1504
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1315
1505
  }
1316
1506
 
1317
- .toggle.toggle-balanced {
1318
- color: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1507
+ .toggle.toggle-balanced input:checked+.track {
1508
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
1319
1509
  }
1320
1510
 
1321
- .toggle.toggle-calm {
1322
- color: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1511
+ .toggle.toggle-calm input:checked+.track {
1512
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1323
1513
  }
1324
1514
 
1325
- .toggle.toggle-energized {
1326
- color: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1515
+ .toggle.toggle-energized input:checked+.track {
1516
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1327
1517
  }
1328
1518
 
1329
- .toggle.toggle-assertive {
1330
- color: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1519
+ .toggle.toggle-assertive input:checked+.track {
1520
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1331
1521
  }
1332
1522
 
1333
- .toggle.toggle-light {
1334
- color: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1523
+ .toggle.toggle-light input:checked+.track {
1524
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1335
1525
  }
1336
1526
 
1337
- .toggle.toggle-stable {
1338
- color: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1527
+ .toggle.toggle-stable input:checked+.track {
1528
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1339
1529
  }
1340
1530
 
1341
- .toggle.toggle-royal {
1342
- color: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1531
+ .toggle.toggle-royal input:checked+.track {
1532
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1343
1533
  }
1344
1534
 
1345
- .toggle.toggle-dark {
1346
- color: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1535
+ .toggle.toggle-dark input:checked+.track {
1536
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1347
1537
  }
1348
1538
 
1349
1539
  .k-combobox .k-dropdown-wrap .k-input,
1350
1540
  .k-combobox .k-dropdown-wrap .k-select {
1351
- background: var(--colorDark50, #0A141E);
1541
+ background: var(--colorDark50, #0a141e);
1352
1542
  color: var(--textColor40, #f0f0f0);
1353
1543
  }
1354
1544
 
1545
+ .k-list .k-item.k-state-focused {
1546
+ color: var(--textColor70, #434343);
1547
+ }
1548
+
1355
1549
  .tabs-striped .tabs,
1356
1550
  .tabs-striped.tabs-icon-default .tab-item.active,
1357
1551
  .tabs-striped .tabs .tab-item {
@@ -1363,13 +1557,13 @@ canvas {
1363
1557
  }
1364
1558
 
1365
1559
  .k-list .k-item {
1366
- background: var(--colorDark50, #0A141E);
1560
+ background: var(--colorDark50, #0a141e);
1367
1561
  color: var(--textColorDark40, #f0f0f0);
1368
1562
  }
1369
1563
 
1370
1564
  .k-list .k-item:focus,
1371
1565
  .k-list .k-item:hover {
1372
- background: var(--backgroundColor10, #CED0D2);
1566
+ background: var(--backgroundColor10, #ced0d2);
1373
1567
  color: var(--textColor70, #434343);
1374
1568
  }
1375
1569
 
@@ -1398,16 +1592,46 @@ h5 {
1398
1592
  background-color: var(--backgroundColor30, #546270);
1399
1593
  color: var(--colorSuccess40, #2ffc2b);
1400
1594
  border: none;
1401
- border-radius: 30px;
1402
- margin-left: 45px;
1595
+ margin: auto;
1403
1596
  margin-top: 20px;
1597
+ white-space: break-spaces;
1598
+ text-align: center;
1404
1599
  }
1405
1600
 
1406
- .k-dialog-button-layout-stretched .k-primary:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1407
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1408
- color: var(--textColor40, #f0f0f0);
1409
- border-radius: 20px;
1601
+ .k-dialog[data-dialog-type="info"] .k-dialog-titlebar,
1602
+ .k-dialog[data-dialog-type="info"] .k-dialog-title,
1603
+ .k-dialog[data-dialog-type="info"] .k-dialog-titlebar:before {
1604
+ background-color: var(--backgroundColor30, #546270);
1605
+ color: var(--colorCalm40, #44e1d8);
1606
+ border: none;
1607
+ margin: auto;
1608
+ margin-top: 20px;
1609
+ white-space: break-spaces;
1610
+ text-align: center;
1611
+ }
1612
+
1613
+ .k-dialog[data-dialog-type="error"] .k-dialog-titlebar,
1614
+ .k-dialog[data-dialog-type="error"] .k-dialog-title,
1615
+ .k-dialog[data-dialog-type="error"] .k-dialog-titlebar:before {
1616
+ background-color: var(--backgroundColor30, #546270);
1617
+ color: var(--colorDanger40, #f03a3a);
1618
+ border: none;
1619
+ margin: auto;
1620
+ margin-top: 20px;
1621
+ white-space: break-spaces;
1622
+ text-align: center;
1623
+ }
1624
+
1625
+ .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar,
1626
+ .k-dialog[data-dialog-type="warning"] .k-dialog-title,
1627
+ .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar:before {
1628
+ background-color: var(--backgroundColor30, #546270);
1629
+ color: var(--colorWarning40, #f58d11);
1410
1630
  border: none;
1631
+ margin: auto;
1632
+ margin-top: 20px;
1633
+ white-space: break-spaces;
1634
+ text-align: center;
1411
1635
  }
1412
1636
 
1413
1637
  .k-button.k-primary:hover {
@@ -1417,7 +1641,7 @@ h5 {
1417
1641
  }
1418
1642
 
1419
1643
  .k-button.k-primary:active {
1420
- background: var(--colorSuccess70, #108D0D);
1644
+ background: var(--colorSuccess70, #108d0d);
1421
1645
  border-radius: 30px;
1422
1646
  border: none;
1423
1647
  }
@@ -1435,35 +1659,38 @@ h5 {
1435
1659
  border: none;
1436
1660
  }
1437
1661
 
1438
- .k-dialog[data-dialog-type="info"] .k-dialog-titlebar,
1439
- .k-dialog[data-dialog-type="info"] .k-dialog-title,
1440
- .k-dialog[data-dialog-type="info"] .k-dialog-titlebar:before {
1441
- background-color: var(--backgroundColor30, #546270);
1442
- color: var(--colorWarning40, #f58d11);
1443
- border-radius: 30px;
1444
- border: none;
1445
- margin-left: 37px;
1446
- margin-top: 20px;
1662
+ .k-dialog-button-layout-stretched .k-primary:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1663
+ color: var(--textColorSuccess40, #f0f0f0);
1664
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%) !important;
1665
+ border-radius: 20px;
1447
1666
  }
1448
1667
 
1449
- .k-dialog[data-dialog-type="error"] .k-dialog-titlebar,
1450
- .k-dialog[data-dialog-type="error"] .k-dialog-title,
1451
- .k-dialog[data-dialog-type="error"] .k-dialog-titlebar:before {
1452
- background-color: var(--backgroundColor30, #546270);
1453
- color: var(--colorDanger40, #f03a3a);
1454
- border-radius: 30px;
1455
- border: none;
1456
- margin-left: 45px;
1457
- margin-top: 20px;
1668
+ .k-dialog-button-layout-stretched .k-button:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1669
+ color: var(--textColorDanger40, #f0f0f0);
1670
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1671
+ border-radius: 20px;
1672
+ margin: 3px;
1458
1673
  }
1459
1674
 
1460
- .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar,
1461
- .k-dialog[data-dialog-type="warning"] .k-dialog-title,
1462
- .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar:before {
1463
- background-color: var(--backgroundColor30, #546270);
1464
- color: var(--colorWarning40, #f58d11);
1465
- border-radius: 30px;
1466
- border: none;
1467
- margin-left: 45px;
1468
- margin-top: 20px;
1675
+ .k-dialog-buttongroup .k-button {
1676
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%) !important;
1677
+ }
1678
+
1679
+ .k-dialog-button-layout-stretched .k-button.k-button {
1680
+ margin: 0;
1681
+ border-left-width: 1px;
1682
+ border-radius: 20px;
1683
+ color: var(--textColorDanger40, #f0f0f0);
1684
+ box-shadow: 0px 0px 3px 0px #de3636;
1685
+ }
1686
+
1687
+ .k-dialog-button-layout-stretched .k-button.k-primary:hover {
1688
+ color: var(--textColorSuccess40, #f0f0f0);
1689
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%) !important;
1690
+ box-shadow: 0px 0px 3px 0px #2ffc2b;
1691
+ }
1692
+
1693
+ .item.activated.item-complex>.item-content h2 {
1694
+ background: var(--backgroundColor10, #ced0d2);
1695
+ color: var(--textColor70, #434343);
1469
1696
  }